@ckeditor/ckeditor5-ui 38.1.1 → 38.2.0-alpha.1

package/lang/contexts.json

@@ -23,5 +23,6 @@
 	"Purple": "Label of a button that applies a purple color in color pickers.",
 	"Editor block content toolbar": "Accessible label of a toolbar that shows up next to the blocks of content (e.g. headings, paragraphs).",
 	"Editor contextual toolbar": "Accessible label of a balloon toolbar that shows up right next to the user selection (the caret).",
-	"HEX": "Label of an input field for typing colors in the HEX color format."
+	"HEX": "Label of an input field for typing colors in the HEX color format.",
+	"Accept": "Label of the button closing the color picker and confirming the changes done in the color selector component."
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ckeditor/ckeditor5-ui",
-  "version": "38.1.1",
+  "version": "38.2.0-alpha.1",
   "description": "The UI framework and standard UI library of CKEditor 5.",
   "keywords": [
     "ckeditor",
@@ -10,9 +10,10 @@
     "ckeditor5-dll"
   ],
   "main": "src/index.js",
+  "type": "module",
   "dependencies": {
-    "@ckeditor/ckeditor5-core": "38.1.1",
-    "@ckeditor/ckeditor5-utils": "38.1.1",
+    "@ckeditor/ckeditor5-core": "38.2.0-alpha.1",
+    "@ckeditor/ckeditor5-utils": "38.2.0-alpha.1",
     "color-convert": "2.0.1",
     "color-parse": "1.4.2",
     "lodash-es": "^4.17.15",

package/src/augmentation.d.ts

@@ -1,86 +1,86 @@
-/**
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
- */
-import type { BalloonToolbar, BlockToolbar, ContextualBalloon, Notification } from './index';
-import type { ToolbarConfig } from '@ckeditor/ckeditor5-core';
-declare module '@ckeditor/ckeditor5-core' {
-    interface EditorConfig {
-        /**
-         * Contextual toolbar configuration. Used by the {@link module:ui/toolbar/balloon/balloontoolbar~BalloonToolbar}
-         * feature.
-         *
-         * ## Configuring toolbar items
-         *
-         * ```ts
-         * const config = {
-         * 	balloonToolbar: [ 'bold', 'italic', 'undo', 'redo' ]
-         * };
-         * ```
-         *
-         * You can also use `'|'` to create a separator between groups of items:
-         *
-         * ```ts
-         * const config = {
-         * 	balloonToolbar: [ 'bold', 'italic', '|', 'undo', 'redo' ]
-         * };
-         * ```
-         *
-         * Read also about configuring the main editor toolbar in {@link module:core/editor/editorconfig~EditorConfig#toolbar}.
-         *
-         * ## Configuring items grouping
-         *
-         * You can prevent automatic items grouping by setting the `shouldNotGroupWhenFull` option:
-         *
-         * ```ts
-         * const config = {
-         * 	balloonToolbar: {
-         * 		items: [ 'bold', 'italic', 'undo', 'redo' ],
-         * 		shouldNotGroupWhenFull: true
-         * 	},
-         * };
-         * ```
-         */
-        balloonToolbar?: ToolbarConfig;
-        /**
-         * The block toolbar configuration. Used by the {@link module:ui/toolbar/block/blocktoolbar~BlockToolbar}
-         * feature.
-         *
-         * ```ts
-         * const config = {
-         * 	blockToolbar: [ 'paragraph', 'heading1', 'heading2', 'bulletedList', 'numberedList' ]
-         * };
-         * ```
-         *
-         * You can also use `'|'` to create a separator between groups of items:
-         *
-         * ```ts
-         * const config = {
-         * 	blockToolbar: [ 'paragraph', 'heading1', 'heading2', '|', 'bulletedList', 'numberedList' ]
-         * };
-         * ```
-         *
-         * ## Configuring items grouping
-         *
-         * You can prevent automatic items grouping by setting the `shouldNotGroupWhenFull` option:
-         *
-         * ```ts
-         * const config = {
-         * 	blockToolbar: {
-         * 		items: [ 'paragraph', 'heading1', 'heading2', '|', 'bulletedList', 'numberedList' ],
-         * 		shouldNotGroupWhenFull: true
-         * 	},
-         * };
-         * ```
-         *
-         * Read more about configuring the main editor toolbar in {@link module:core/editor/editorconfig~EditorConfig#toolbar}.
-         */
-        blockToolbar?: ToolbarConfig;
-    }
-    interface PluginsMap {
-        [BalloonToolbar.pluginName]: BalloonToolbar;
-        [BlockToolbar.pluginName]: BlockToolbar;
-        [ContextualBalloon.pluginName]: ContextualBalloon;
-        [Notification.pluginName]: Notification;
-    }
-}
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+import type { BalloonToolbar, BlockToolbar, ContextualBalloon, Notification } from './index.js';
+import type { ToolbarConfig } from '@ckeditor/ckeditor5-core';
+declare module '@ckeditor/ckeditor5-core' {
+    interface EditorConfig {
+        /**
+         * Contextual toolbar configuration. Used by the {@link module:ui/toolbar/balloon/balloontoolbar~BalloonToolbar}
+         * feature.
+         *
+         * ## Configuring toolbar items
+         *
+         * ```ts
+         * const config = {
+         * 	balloonToolbar: [ 'bold', 'italic', 'undo', 'redo' ]
+         * };
+         * ```
+         *
+         * You can also use `'|'` to create a separator between groups of items:
+         *
+         * ```ts
+         * const config = {
+         * 	balloonToolbar: [ 'bold', 'italic', '|', 'undo', 'redo' ]
+         * };
+         * ```
+         *
+         * Read also about configuring the main editor toolbar in {@link module:core/editor/editorconfig~EditorConfig#toolbar}.
+         *
+         * ## Configuring items grouping
+         *
+         * You can prevent automatic items grouping by setting the `shouldNotGroupWhenFull` option:
+         *
+         * ```ts
+         * const config = {
+         * 	balloonToolbar: {
+         * 		items: [ 'bold', 'italic', 'undo', 'redo' ],
+         * 		shouldNotGroupWhenFull: true
+         * 	},
+         * };
+         * ```
+         */
+        balloonToolbar?: ToolbarConfig;
+        /**
+         * The block toolbar configuration. Used by the {@link module:ui/toolbar/block/blocktoolbar~BlockToolbar}
+         * feature.
+         *
+         * ```ts
+         * const config = {
+         * 	blockToolbar: [ 'paragraph', 'heading1', 'heading2', 'bulletedList', 'numberedList' ]
+         * };
+         * ```
+         *
+         * You can also use `'|'` to create a separator between groups of items:
+         *
+         * ```ts
+         * const config = {
+         * 	blockToolbar: [ 'paragraph', 'heading1', 'heading2', '|', 'bulletedList', 'numberedList' ]
+         * };
+         * ```
+         *
+         * ## Configuring items grouping
+         *
+         * You can prevent automatic items grouping by setting the `shouldNotGroupWhenFull` option:
+         *
+         * ```ts
+         * const config = {
+         * 	blockToolbar: {
+         * 		items: [ 'paragraph', 'heading1', 'heading2', '|', 'bulletedList', 'numberedList' ],
+         * 		shouldNotGroupWhenFull: true
+         * 	},
+         * };
+         * ```
+         *
+         * Read more about configuring the main editor toolbar in {@link module:core/editor/editorconfig~EditorConfig#toolbar}.
+         */
+        blockToolbar?: ToolbarConfig;
+    }
+    interface PluginsMap {
+        [BalloonToolbar.pluginName]: BalloonToolbar;
+        [BlockToolbar.pluginName]: BlockToolbar;
+        [ContextualBalloon.pluginName]: ContextualBalloon;
+        [Notification.pluginName]: Notification;
+    }
+}

package/src/augmentation.js

@@ -1,5 +1,5 @@
-/**
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
- */
-export {};
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+export {};

package/src/bindings/addkeyboardhandlingforgrid.d.ts

@@ -1,27 +1,27 @@
-/**
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
- */
-/**
- * @module ui/bindings/addkeyboardhandlingforgrid
- */
-import type { FocusTracker, KeystrokeHandler } from '@ckeditor/ckeditor5-utils';
-import type ViewCollection from '../viewcollection';
-/**
- * A helper that adds a keyboard navigation support (arrow up/down/left/right) for grids.
- *
- * @param options Configuration options.
- * @param options.keystrokeHandler Keystroke handler to register navigation with arrow keys.
- * @param options.focusTracker A focus tracker for grid elements.
- * @param options.gridItems A collection of grid items.
- * @param options.numberOfColumns Number of columns in the grid. Can be specified as a function that returns
- * the number (e.g. for responsive grids).
- * @param options.uiLanguageDirection String of ui language direction.
- */
-export default function addKeyboardHandlingForGrid({ keystrokeHandler, focusTracker, gridItems, numberOfColumns, uiLanguageDirection }: {
-    keystrokeHandler: KeystrokeHandler;
-    focusTracker: FocusTracker;
-    gridItems: ViewCollection;
-    numberOfColumns: number | (() => number);
-    uiLanguageDirection?: string;
-}): void;
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module ui/bindings/addkeyboardhandlingforgrid
+ */
+import type { FocusTracker, KeystrokeHandler } from '@ckeditor/ckeditor5-utils';
+import type ViewCollection from '../viewcollection.js';
+/**
+ * A helper that adds a keyboard navigation support (arrow up/down/left/right) for grids.
+ *
+ * @param options Configuration options.
+ * @param options.keystrokeHandler Keystroke handler to register navigation with arrow keys.
+ * @param options.focusTracker A focus tracker for grid elements.
+ * @param options.gridItems A collection of grid items.
+ * @param options.numberOfColumns Number of columns in the grid. Can be specified as a function that returns
+ * the number (e.g. for responsive grids).
+ * @param options.uiLanguageDirection String of ui language direction.
+ */
+export default function addKeyboardHandlingForGrid({ keystrokeHandler, focusTracker, gridItems, numberOfColumns, uiLanguageDirection }: {
+    keystrokeHandler: KeystrokeHandler;
+    focusTracker: FocusTracker;
+    gridItems: ViewCollection;
+    numberOfColumns: number | (() => number);
+    uiLanguageDirection?: string;
+}): void;

package/src/bindings/addkeyboardhandlingforgrid.js

@@ -1,107 +1,107 @@
-/**
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
- */
-/**
- * A helper that adds a keyboard navigation support (arrow up/down/left/right) for grids.
- *
- * @param options Configuration options.
- * @param options.keystrokeHandler Keystroke handler to register navigation with arrow keys.
- * @param options.focusTracker A focus tracker for grid elements.
- * @param options.gridItems A collection of grid items.
- * @param options.numberOfColumns Number of columns in the grid. Can be specified as a function that returns
- * the number (e.g. for responsive grids).
- * @param options.uiLanguageDirection String of ui language direction.
- */
-export default function addKeyboardHandlingForGrid({ keystrokeHandler, focusTracker, gridItems, numberOfColumns, uiLanguageDirection }) {
-    const getNumberOfColumns = typeof numberOfColumns === 'number' ? () => numberOfColumns : numberOfColumns;
-    keystrokeHandler.set('arrowright', getGridItemFocuser((focusedElementIndex, gridItems) => {
-        return uiLanguageDirection === 'rtl' ?
-            getLeftElementIndex(focusedElementIndex, gridItems.length) :
-            getRightElementIndex(focusedElementIndex, gridItems.length);
-    }));
-    keystrokeHandler.set('arrowleft', getGridItemFocuser((focusedElementIndex, gridItems) => {
-        return uiLanguageDirection === 'rtl' ?
-            getRightElementIndex(focusedElementIndex, gridItems.length) :
-            getLeftElementIndex(focusedElementIndex, gridItems.length);
-    }));
-    keystrokeHandler.set('arrowup', getGridItemFocuser((focusedElementIndex, gridItems) => {
-        let nextIndex = focusedElementIndex - getNumberOfColumns();
-        if (nextIndex < 0) {
-            nextIndex = focusedElementIndex + getNumberOfColumns() * Math.floor(gridItems.length / getNumberOfColumns());
-            if (nextIndex > gridItems.length - 1) {
-                nextIndex -= getNumberOfColumns();
-            }
-        }
-        return nextIndex;
-    }));
-    keystrokeHandler.set('arrowdown', getGridItemFocuser((focusedElementIndex, gridItems) => {
-        let nextIndex = focusedElementIndex + getNumberOfColumns();
-        if (nextIndex > gridItems.length - 1) {
-            nextIndex = focusedElementIndex % getNumberOfColumns();
-        }
-        return nextIndex;
-    }));
-    function getGridItemFocuser(getIndexToFocus) {
-        return (evt) => {
-            const focusedElement = gridItems.find(item => item.element === focusTracker.focusedElement);
-            const focusedElementIndex = gridItems.getIndex(focusedElement);
-            const nextIndexToFocus = getIndexToFocus(focusedElementIndex, gridItems);
-            gridItems.get(nextIndexToFocus).focus();
-            evt.stopPropagation();
-            evt.preventDefault();
-        };
-    }
-    /**
-     * Function returning the next index.
-     *
-     * ```
-     * before: [ ][x][ ]	after: [ ][ ][x]
-     * index = 1            index = 2
-     * ```
-     *
-     * If current index is last, function returns first index.
-     *
-     * ```
-     * before: [ ][ ][x]	after: [x][ ][ ]
-     * index = 2            index = 0
-     * ```
-     *
-     * @param elementIndex Number of current index.
-     * @param collectionLength A count of collection items.
-     */
-    function getRightElementIndex(elementIndex, collectionLength) {
-        if (elementIndex === collectionLength - 1) {
-            return 0;
-        }
-        else {
-            return elementIndex + 1;
-        }
-    }
-    /**
-     * Function returning the previous index.
-     *
-     * ```
-     * before: [ ][x][ ]	after: [x][ ][ ]
-     * index = 1            index = 0
-     * ```
-     *
-     * If current index is first, function returns last index.
-     *
-     * ```
-     * before: [x][ ][ ]	after: [ ][ ][x]
-     * index = 0            index = 2
-     * ```
-     *
-     * @param elementIndex Number of current index.
-     * @param collectionLength A count of collection items.
-     */
-    function getLeftElementIndex(elementIndex, collectionLength) {
-        if (elementIndex === 0) {
-            return collectionLength - 1;
-        }
-        else {
-            return elementIndex - 1;
-        }
-    }
-}
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * A helper that adds a keyboard navigation support (arrow up/down/left/right) for grids.
+ *
+ * @param options Configuration options.
+ * @param options.keystrokeHandler Keystroke handler to register navigation with arrow keys.
+ * @param options.focusTracker A focus tracker for grid elements.
+ * @param options.gridItems A collection of grid items.
+ * @param options.numberOfColumns Number of columns in the grid. Can be specified as a function that returns
+ * the number (e.g. for responsive grids).
+ * @param options.uiLanguageDirection String of ui language direction.
+ */
+export default function addKeyboardHandlingForGrid({ keystrokeHandler, focusTracker, gridItems, numberOfColumns, uiLanguageDirection }) {
+    const getNumberOfColumns = typeof numberOfColumns === 'number' ? () => numberOfColumns : numberOfColumns;
+    keystrokeHandler.set('arrowright', getGridItemFocuser((focusedElementIndex, gridItems) => {
+        return uiLanguageDirection === 'rtl' ?
+            getLeftElementIndex(focusedElementIndex, gridItems.length) :
+            getRightElementIndex(focusedElementIndex, gridItems.length);
+    }));
+    keystrokeHandler.set('arrowleft', getGridItemFocuser((focusedElementIndex, gridItems) => {
+        return uiLanguageDirection === 'rtl' ?
+            getRightElementIndex(focusedElementIndex, gridItems.length) :
+            getLeftElementIndex(focusedElementIndex, gridItems.length);
+    }));
+    keystrokeHandler.set('arrowup', getGridItemFocuser((focusedElementIndex, gridItems) => {
+        let nextIndex = focusedElementIndex - getNumberOfColumns();
+        if (nextIndex < 0) {
+            nextIndex = focusedElementIndex + getNumberOfColumns() * Math.floor(gridItems.length / getNumberOfColumns());
+            if (nextIndex > gridItems.length - 1) {
+                nextIndex -= getNumberOfColumns();
+            }
+        }
+        return nextIndex;
+    }));
+    keystrokeHandler.set('arrowdown', getGridItemFocuser((focusedElementIndex, gridItems) => {
+        let nextIndex = focusedElementIndex + getNumberOfColumns();
+        if (nextIndex > gridItems.length - 1) {
+            nextIndex = focusedElementIndex % getNumberOfColumns();
+        }
+        return nextIndex;
+    }));
+    function getGridItemFocuser(getIndexToFocus) {
+        return (evt) => {
+            const focusedElement = gridItems.find(item => item.element === focusTracker.focusedElement);
+            const focusedElementIndex = gridItems.getIndex(focusedElement);
+            const nextIndexToFocus = getIndexToFocus(focusedElementIndex, gridItems);
+            gridItems.get(nextIndexToFocus).focus();
+            evt.stopPropagation();
+            evt.preventDefault();
+        };
+    }
+    /**
+     * Function returning the next index.
+     *
+     * ```
+     * before: [ ][x][ ]	after: [ ][ ][x]
+     * index = 1            index = 2
+     * ```
+     *
+     * If current index is last, function returns first index.
+     *
+     * ```
+     * before: [ ][ ][x]	after: [x][ ][ ]
+     * index = 2            index = 0
+     * ```
+     *
+     * @param elementIndex Number of current index.
+     * @param collectionLength A count of collection items.
+     */
+    function getRightElementIndex(elementIndex, collectionLength) {
+        if (elementIndex === collectionLength - 1) {
+            return 0;
+        }
+        else {
+            return elementIndex + 1;
+        }
+    }
+    /**
+     * Function returning the previous index.
+     *
+     * ```
+     * before: [ ][x][ ]	after: [x][ ][ ]
+     * index = 1            index = 0
+     * ```
+     *
+     * If current index is first, function returns last index.
+     *
+     * ```
+     * before: [x][ ][ ]	after: [ ][ ][x]
+     * index = 0            index = 2
+     * ```
+     *
+     * @param elementIndex Number of current index.
+     * @param collectionLength A count of collection items.
+     */
+    function getLeftElementIndex(elementIndex, collectionLength) {
+        if (elementIndex === 0) {
+            return collectionLength - 1;
+        }
+        else {
+            return elementIndex - 1;
+        }
+    }
+}

package/src/bindings/clickoutsidehandler.d.ts

@@ -1,28 +1,28 @@
-/**
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
- */
-/**
- * @module ui/bindings/clickoutsidehandler
- */
-import type { DomEmitter } from '@ckeditor/ckeditor5-utils';
-/**
- * Handles clicking **outside** of a specified set of elements, then fires an action.
- *
- * **Note**: Actually, the action is executed upon `mousedown`, not `click`. It prevents
- * certain issues when the user keeps holding the mouse button and the UI cannot react
- * properly.
- *
- * @param options Configuration options.
- * @param options.emitter The emitter to which this behavior should be added.
- * @param options.activator Function returning a `Boolean`, to determine whether the handler is active.
- * @param options.contextElements Array of HTML elements or a callback returning an array of HTML elements
- * that determine the scope of the handler. Clicking any of them or their descendants will **not** fire the callback.
- * @param options.callback An action executed by the handler.
- */
-export default function clickOutsideHandler({ emitter, activator, callback, contextElements }: {
-    emitter: DomEmitter;
-    activator: () => boolean;
-    contextElements: Array<HTMLElement> | (() => Array<HTMLElement>);
-    callback: () => void;
-}): void;
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module ui/bindings/clickoutsidehandler
+ */
+import type { DomEmitter } from '@ckeditor/ckeditor5-utils';
+/**
+ * Handles clicking **outside** of a specified set of elements, then fires an action.
+ *
+ * **Note**: Actually, the action is executed upon `mousedown`, not `click`. It prevents
+ * certain issues when the user keeps holding the mouse button and the UI cannot react
+ * properly.
+ *
+ * @param options Configuration options.
+ * @param options.emitter The emitter to which this behavior should be added.
+ * @param options.activator Function returning a `Boolean`, to determine whether the handler is active.
+ * @param options.contextElements Array of HTML elements or a callback returning an array of HTML elements
+ * that determine the scope of the handler. Clicking any of them or their descendants will **not** fire the callback.
+ * @param options.callback An action executed by the handler.
+ */
+export default function clickOutsideHandler({ emitter, activator, callback, contextElements }: {
+    emitter: DomEmitter;
+    activator: () => boolean;
+    contextElements: Array<HTMLElement> | (() => Array<HTMLElement>);
+    callback: () => void;
+}): void;

package/src/bindings/clickoutsidehandler.js

@@ -1,36 +1,36 @@
-/**
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
- */
-/* global document */
-/**
- * Handles clicking **outside** of a specified set of elements, then fires an action.
- *
- * **Note**: Actually, the action is executed upon `mousedown`, not `click`. It prevents
- * certain issues when the user keeps holding the mouse button and the UI cannot react
- * properly.
- *
- * @param options Configuration options.
- * @param options.emitter The emitter to which this behavior should be added.
- * @param options.activator Function returning a `Boolean`, to determine whether the handler is active.
- * @param options.contextElements Array of HTML elements or a callback returning an array of HTML elements
- * that determine the scope of the handler. Clicking any of them or their descendants will **not** fire the callback.
- * @param options.callback An action executed by the handler.
- */
-export default function clickOutsideHandler({ emitter, activator, callback, contextElements }) {
-    emitter.listenTo(document, 'mousedown', (evt, domEvt) => {
-        if (!activator()) {
-            return;
-        }
-        // Check if `composedPath` is `undefined` in case the browser does not support native shadow DOM.
-        // Can be removed when all supported browsers support native shadow DOM.
-        const path = typeof domEvt.composedPath == 'function' ? domEvt.composedPath() : [];
-        const contextElementsList = typeof contextElements == 'function' ? contextElements() : contextElements;
-        for (const contextElement of contextElementsList) {
-            if (contextElement.contains(domEvt.target) || path.includes(contextElement)) {
-                return;
-            }
-        }
-        callback();
-    });
-}
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/* global document */
+/**
+ * Handles clicking **outside** of a specified set of elements, then fires an action.
+ *
+ * **Note**: Actually, the action is executed upon `mousedown`, not `click`. It prevents
+ * certain issues when the user keeps holding the mouse button and the UI cannot react
+ * properly.
+ *
+ * @param options Configuration options.
+ * @param options.emitter The emitter to which this behavior should be added.
+ * @param options.activator Function returning a `Boolean`, to determine whether the handler is active.
+ * @param options.contextElements Array of HTML elements or a callback returning an array of HTML elements
+ * that determine the scope of the handler. Clicking any of them or their descendants will **not** fire the callback.
+ * @param options.callback An action executed by the handler.
+ */
+export default function clickOutsideHandler({ emitter, activator, callback, contextElements }) {
+    emitter.listenTo(document, 'mousedown', (evt, domEvt) => {
+        if (!activator()) {
+            return;
+        }
+        // Check if `composedPath` is `undefined` in case the browser does not support native shadow DOM.
+        // Can be removed when all supported browsers support native shadow DOM.
+        const path = typeof domEvt.composedPath == 'function' ? domEvt.composedPath() : [];
+        const contextElementsList = typeof contextElements == 'function' ? contextElements() : contextElements;
+        for (const contextElement of contextElementsList) {
+            if (contextElement.contains(domEvt.target) || path.includes(contextElement)) {
+                return;
+            }
+        }
+        callback();
+    });
+}