@ckeditor/ckeditor5-ui 40.0.0 → 40.2.0

package/src/autocomplete/autocompleteview.js

@@ -1,146 +1,153 @@
-/**
- * @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/autocomplete/autocompleteview
-*/
-import { getOptimalPosition, global, toUnit, Rect } from '@ckeditor/ckeditor5-utils';
-import SearchTextView from '../search/text/searchtextview';
-import '../../theme/components/autocomplete/autocomplete.css';
-/**
- * The autocomplete component's view class. It extends the {@link module:ui/search/text/searchtextview~SearchTextView} class
- * with a floating {@link #resultsView} that shows up when the user starts typing and hides when they blur
- * the component.
- */
-export default class AutocompleteView extends SearchTextView {
-    /**
-     * @inheritDoc
-     */
-    constructor(locale, config) {
-        super(locale, config);
-        this._config = config;
-        const toPx = toUnit('px');
-        this.extendTemplate({
-            attributes: {
-                class: ['ck-autocomplete']
-            }
-        });
-        const bindResultsView = this.resultsView.bindTemplate;
-        this.resultsView.set('isVisible', false);
-        this.resultsView.set('_position', 's');
-        this.resultsView.set('_width', 0);
-        this.resultsView.extendTemplate({
-            attributes: {
-                class: [
-                    bindResultsView.if('isVisible', 'ck-hidden', value => !value),
-                    bindResultsView.to('_position', value => `ck-search__results_${value}`)
-                ],
-                style: {
-                    width: bindResultsView.to('_width', toPx)
-                }
-            }
-        });
-        // Update the visibility of the results view when the user focuses or blurs the component.
-        // This is also integration for the `resetOnBlur` configuration.
-        this.focusTracker.on('change:isFocused', (evt, name, isFocused) => {
-            this._updateResultsVisibility();
-            if (isFocused) {
-                // Reset the scroll position of the results view whenever the autocomplete reopens.
-                this.resultsView.element.scrollTop = 0;
-            }
-            else if (config.resetOnBlur) {
-                this.queryView.reset();
-            }
-        });
-        // Update the visibility of the results view when the user types in the query field.
-        // This is an integration for `queryMinChars` configuration.
-        // This is an integration for search results changing length and the #resultsView requiring to be repositioned.
-        this.on('search', () => {
-            this._updateResultsVisibility();
-            this._updateResultsViewWidthAndPosition();
-        });
-        // Hide the results view when the user presses the ESC key.
-        this.keystrokes.set('esc', (evt, cancel) => {
-            this.resultsView.isVisible = false;
-            cancel();
-        });
-        // Update the position of the results view when the user scrolls the page.
-        // TODO: This needs to be debounced down the road.
-        this.listenTo(global.document, 'scroll', () => {
-            this._updateResultsViewWidthAndPosition();
-        });
-        // Hide the results when the component becomes disabled.
-        this.on('change:isEnabled', () => {
-            this._updateResultsVisibility();
-        });
-        // Update the value of the query field when the user selects a result.
-        this.filteredView.on('execute', (evt, { value }) => {
-            // Focus the query view first to avoid losing the focus.
-            this.focus();
-            // Resetting the view will ensure that the #queryView will update its empty state correctly.
-            // This prevents bugs related to dynamic labels or auto-grow when re-setting the same value
-            // to #queryView.fieldView.value (which does not trigger empty state change) to an
-            // #queryView.fieldView.element that has been changed by the user.
-            this.reset();
-            // Update the value of the query field.
-            this.queryView.fieldView.value = this.queryView.fieldView.element.value = value;
-            // Finally, hide the results view. The focus has been moved earlier so this is safe.
-            this.resultsView.isVisible = false;
-        });
-        // Update the position and width of the results view when it becomes visible.
-        this.resultsView.on('change:isVisible', () => {
-            this._updateResultsViewWidthAndPosition();
-        });
-    }
-    /**
-     * Updates the position of the results view on demand.
-     */
-    _updateResultsViewWidthAndPosition() {
-        if (!this.resultsView.isVisible) {
-            return;
-        }
-        this.resultsView._width = new Rect(this.queryView.fieldView.element).width;
-        const optimalResultsPosition = AutocompleteView._getOptimalPosition({
-            element: this.resultsView.element,
-            target: this.queryView.element,
-            fitInViewport: true,
-            positions: AutocompleteView.defaultResultsPositions
-        });
-        // _getOptimalPosition will return null if there is no optimal position found (e.g. target is off the viewport).
-        this.resultsView._position = optimalResultsPosition ? optimalResultsPosition.name : 's';
-    }
-    /**
-     * Updates the visibility of the results view on demand.
-     */
-    _updateResultsVisibility() {
-        const queryMinChars = typeof this._config.queryMinChars === 'undefined' ? 0 : this._config.queryMinChars;
-        const queryLength = this.queryView.fieldView.element.value.length;
-        this.resultsView.isVisible = this.focusTracker.isFocused && this.isEnabled && queryLength >= queryMinChars;
-    }
-}
-/**
- * Positions for the autocomplete results view. Two positions are defined by default:
- * * `s` - below the search field,
- * * `n` - above the search field.
- */
-AutocompleteView.defaultResultsPositions = [
-    (fieldRect => {
-        return {
-            top: fieldRect.bottom,
-            left: fieldRect.left,
-            name: 's'
-        };
-    }),
-    ((fieldRect, resultsRect) => {
-        return {
-            top: fieldRect.top - resultsRect.height,
-            left: fieldRect.left,
-            name: 'n'
-        };
-    })
-];
-/**
- * A function used to calculate the optimal position for the dropdown panel.
- */
-AutocompleteView._getOptimalPosition = getOptimalPosition;
+/**
+ * @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/autocomplete/autocompleteview
+*/
+import { getOptimalPosition, global, toUnit, Rect } from '@ckeditor/ckeditor5-utils';
+import SearchTextView from '../search/text/searchtextview';
+import '../../theme/components/autocomplete/autocomplete.css';
+/**
+ * The autocomplete component's view class. It extends the {@link module:ui/search/text/searchtextview~SearchTextView} class
+ * with a floating {@link #resultsView} that shows up when the user starts typing and hides when they blur
+ * the component.
+ */
+export default class AutocompleteView extends SearchTextView {
+    /**
+     * @inheritDoc
+     */
+    constructor(locale, config) {
+        super(locale, config);
+        this._config = config;
+        const toPx = toUnit('px');
+        this.extendTemplate({
+            attributes: {
+                class: ['ck-autocomplete']
+            }
+        });
+        const bindResultsView = this.resultsView.bindTemplate;
+        this.resultsView.set('isVisible', false);
+        this.resultsView.set('_position', 's');
+        this.resultsView.set('_width', 0);
+        this.resultsView.extendTemplate({
+            attributes: {
+                class: [
+                    bindResultsView.if('isVisible', 'ck-hidden', value => !value),
+                    bindResultsView.to('_position', value => `ck-search__results_${value}`)
+                ],
+                style: {
+                    width: bindResultsView.to('_width', toPx)
+                }
+            }
+        });
+        // Update the visibility of the results view when the user focuses or blurs the component.
+        // This is also integration for the `resetOnBlur` configuration.
+        this.focusTracker.on('change:isFocused', (evt, name, isFocused) => {
+            this._updateResultsVisibility();
+            if (isFocused) {
+                // Reset the scroll position of the results view whenever the autocomplete reopens.
+                this.resultsView.element.scrollTop = 0;
+            }
+            else if (config.resetOnBlur) {
+                this.queryView.reset();
+            }
+        });
+        // Update the visibility of the results view when the user types in the query field.
+        // This is an integration for `queryMinChars` configuration.
+        // This is an integration for search results changing length and the #resultsView requiring to be repositioned.
+        this.on('search', () => {
+            this._updateResultsVisibility();
+            this._updateResultsViewWidthAndPosition();
+        });
+        // Hide the results view when the user presses the ESC key.
+        this.keystrokes.set('esc', (evt, cancel) => {
+            // Let the DOM event pass through if the focus is in the query view.
+            if (!this.resultsView.isVisible) {
+                return;
+            }
+            // Focus the query view first and only then close the results view. Otherwise, if the focus
+            // was in the results view, it will get lost.
+            this.queryView.focus();
+            this.resultsView.isVisible = false;
+            cancel();
+        });
+        // Update the position of the results view when the user scrolls the page.
+        // TODO: This needs to be debounced down the road.
+        this.listenTo(global.document, 'scroll', () => {
+            this._updateResultsViewWidthAndPosition();
+        });
+        // Hide the results when the component becomes disabled.
+        this.on('change:isEnabled', () => {
+            this._updateResultsVisibility();
+        });
+        // Update the value of the query field when the user selects a result.
+        this.filteredView.on('execute', (evt, { value }) => {
+            // Focus the query view first to avoid losing the focus.
+            this.focus();
+            // Resetting the view will ensure that the #queryView will update its empty state correctly.
+            // This prevents bugs related to dynamic labels or auto-grow when re-setting the same value
+            // to #queryView.fieldView.value (which does not trigger empty state change) to an
+            // #queryView.fieldView.element that has been changed by the user.
+            this.reset();
+            // Update the value of the query field.
+            this.queryView.fieldView.value = this.queryView.fieldView.element.value = value;
+            // Finally, hide the results view. The focus has been moved earlier so this is safe.
+            this.resultsView.isVisible = false;
+        });
+        // Update the position and width of the results view when it becomes visible.
+        this.resultsView.on('change:isVisible', () => {
+            this._updateResultsViewWidthAndPosition();
+        });
+    }
+    /**
+     * Updates the position of the results view on demand.
+     */
+    _updateResultsViewWidthAndPosition() {
+        if (!this.resultsView.isVisible) {
+            return;
+        }
+        this.resultsView._width = new Rect(this.queryView.fieldView.element).width;
+        const optimalResultsPosition = AutocompleteView._getOptimalPosition({
+            element: this.resultsView.element,
+            target: this.queryView.element,
+            fitInViewport: true,
+            positions: AutocompleteView.defaultResultsPositions
+        });
+        // _getOptimalPosition will return null if there is no optimal position found (e.g. target is off the viewport).
+        this.resultsView._position = optimalResultsPosition ? optimalResultsPosition.name : 's';
+    }
+    /**
+     * Updates the visibility of the results view on demand.
+     */
+    _updateResultsVisibility() {
+        const queryMinChars = typeof this._config.queryMinChars === 'undefined' ? 0 : this._config.queryMinChars;
+        const queryLength = this.queryView.fieldView.element.value.length;
+        this.resultsView.isVisible = this.focusTracker.isFocused && this.isEnabled && queryLength >= queryMinChars;
+    }
+}
+/**
+ * Positions for the autocomplete results view. Two positions are defined by default:
+ * * `s` - below the search field,
+ * * `n` - above the search field.
+ */
+AutocompleteView.defaultResultsPositions = [
+    (fieldRect => {
+        return {
+            top: fieldRect.bottom,
+            left: fieldRect.left,
+            name: 's'
+        };
+    }),
+    ((fieldRect, resultsRect) => {
+        return {
+            top: fieldRect.top - resultsRect.height,
+            left: fieldRect.left,
+            name: 'n'
+        };
+    })
+];
+/**
+ * A function used to calculate the optimal position for the dropdown panel.
+ */
+AutocompleteView._getOptimalPosition = getOptimalPosition;

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';
+/**
+ * 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;