[REF] web: remove custom useExternalListener hook

This hook is now available in owl directly, so we remove its custom
definition in Odoo, and adapt the code using it.

addons/web/static/src/js/core/custom_hooks.js

@@ -1,4 +1,4 @@
-odoo.define('web.custom_hooks', function (require) {
+odoo.define('web.custom_hooks', function () {
     "use strict";
 
     const { Component, hooks } = owl;
@@ -37,33 +37,7 @@ odoo.define('web.custom_hooks', function (require) {
         };
     }
 
-    /**
-     * When component needs to listen to DOM Events on element(s) that is not part of his hierarchy, we can use
-     * `useExternalListener` hook.
-     * It will correctly add and remove the event listener.
-     *
-     * Example:
-     *  a menu needs to listen to the click on window to be closed automatically
-     *
-     * Usage:
-     *  in the constructor of the OWL component that needs to be notified,
-     *  `useExternalListener(window, 'click', this._doSomething);` listen to the click event on window and call
-     *  `this._doSomething` function of the component when the click happened
-     *
-     * @param {EventTarget} target
-     * @param {string} eventName
-     * @param {Function} handler
-     * @param {(Object|boolean)} [eventParams]
-     */
-    function useExternalListener(target, eventName, handler, eventParams) {
-        const boundHandler = handler.bind(Component.current);
-
-        onMounted(() => target.addEventListener(eventName, boundHandler, eventParams));
-        onWillUnmount(() => target.removeEventListener(eventName, boundHandler, eventParams));
-    }
-
     return {
         useFocusOnUpdate,
-        useExternalListener,
     };
 });

addons/web/static/src/js/core/owl_dialog.js

@@ -1,11 +1,9 @@
-odoo.define('web.OwlDialog', function (require) {
+odoo.define('web.OwlDialog', function () {
     "use strict";
 
-    const { useExternalListener } = require('web.custom_hooks');
-
     const { Component, hooks, misc } = owl;
     const { Portal } = misc;
-    const { useRef } = hooks;
+    const { useExternalListener, useRef } = hooks;
     const SIZE_CLASSES = {
         'extra-large': 'modal-xl',
         'large': 'modal-lg',

addons/web/static/src/js/views/pivot/pivot_renderer.js

@@ -1,11 +1,11 @@
 odoo.define('web.PivotRenderer', function (require) {
     "use strict";
 
-    const { useState, onMounted, onPatched } = owl.hooks;
-    const { useExternalListener } = require('web.custom_hooks');
     const OwlAbstractRenderer = require('web.AbstractRendererOwl');
     const field_utils = require('web.field_utils');
 
+    const { useExternalListener, useState, onMounted, onPatched } = owl.hooks;
+
     /**
      * Here is a basic example of the structure of the Pivot Table:
      *