[REF] board,web: adapt useSortable to be used natively

This commit removes Owl hooks from the sortable hook builder file and
introduces a new parameter attribute (`setupHooks`) to specify which
functions must be used to set up, update and tear down the draggable
hook.

This has been done to allow using the hook function in environments
where Owl is not available.

Part-of: odoo/odoo#137527

addons/board/static/src/board_controller.js

@@ -7,7 +7,7 @@ import { Dropdown } from "@web/core/dropdown/dropdown";
 import { DropdownItem } from "@web/core/dropdown/dropdown_item";
 import { useService } from "@web/core/utils/hooks";
 import { renderToString } from "@web/core/utils/render";
-import { useSortable } from "@web/core/utils/sortable";
+import { useSortable } from "@web/core/utils/sortable_owl";
 import { standardViewProps } from "@web/views/standard_view_props";
 import { BoardAction } from "./board_action";
 import { blockDom, Component, useState, useRef } from "@odoo/owl";

addons/web/static/src/core/utils/sortable.js

@@ -1,6 +1,6 @@
 /** @odoo-module **/
 
-import { makeDraggableHook } from "@web/core/utils/draggable_hook_builder_owl";
+import { makeDraggableHook as nativeMakeDraggableHook } from "@web/core/utils/draggable_hook_builder";
 import { pick } from "@web/core/utils/objects";
 
 /** @typedef {import("@web/core/utils/draggable_hook_builder").DraggableHandlerParams} DraggableHandlerParams */
@@ -63,8 +63,8 @@ import { pick } from "@web/core/utils/objects";
  * @property {boolean} dragging
  */
 
-/** @type {(params: SortableParams) => SortableState} */
-export const useSortable = makeDraggableHook({
+/** @type SortableParams */
+const hookParams = {
     name: "useSortable",
     acceptedParams: {
         groups: [String, Function],
@@ -205,4 +205,11 @@ export const useSortable = makeDraggableHook({
 
         return pick(current, "element", "group");
     },
-});
+};
+
+/** @type {(params: SortableParams) => SortableState} */
+export const useSortable = (sortableParams) => {
+    const { setupHooks } = sortableParams;
+    delete sortableParams.setupHooks;
+    return nativeMakeDraggableHook({ ...hookParams, setupHooks })(sortableParams);
+};

addons/web/static/src/core/utils/sortable_owl.js

@@ -0,0 +1,26 @@
+/** @odoo-module */
+
+import { onWillUnmount, reactive, useEffect, useExternalListener } from "@odoo/owl";
+import { useThrottleForAnimation } from "./timing";
+import { useSortable as nativeUseSortable } from "@web/core/utils/sortable";
+
+/**
+ * Set of default `useSortable` setup hooks that makes use of Owl lifecycle
+ * and reactivity hooks to properly set up, update and tear down the elements and
+ * listeners added by the draggable hook builder.
+ *
+ * @see {nativeUseSortable}
+ * @type {typeof nativeUseSortable}
+ */
+export function useSortable(params) {
+    return nativeUseSortable({
+        ...params,
+        setupHooks: {
+            addListener: useExternalListener,
+            setup: useEffect,
+            teardown: onWillUnmount,
+            throttle: useThrottleForAnimation,
+            wrapState: reactive,
+        },
+    });
+}

addons/web/static/src/views/fields/properties/properties_field.js

@@ -14,7 +14,7 @@ import { ConfirmationDialog } from "@web/core/confirmation_dialog/confirmation_d
 import { reposition } from "@web/core/position_hook";
 import { archParseBoolean } from "@web/views/utils";
 import { pick } from "@web/core/utils/objects";
-import { useSortable } from "@web/core/utils/sortable";
+import { useSortable } from "@web/core/utils/sortable_owl";
 
 import { Component, useRef, useState, useEffect, onWillStart } from "@odoo/owl";
 

addons/web/static/src/views/fields/properties/property_definition_selection.js

@@ -4,7 +4,7 @@ import { useService } from "@web/core/utils/hooks";
 import { uuid } from "../../utils";
 
 import { Component, useState, useRef, useEffect } from "@odoo/owl";
-import { useSortable } from "@web/core/utils/sortable";
+import { useSortable } from "@web/core/utils/sortable_owl";
 
 export class PropertyDefinitionSelection extends Component {
     setup() {

addons/web/static/src/views/kanban/kanban_renderer.js

@@ -6,7 +6,7 @@ import { DropdownItem } from "@web/core/dropdown/dropdown_item";
 import { useHotkey } from "@web/core/hotkeys/hotkey_hook";
 import { registry } from "@web/core/registry";
 import { useBus, useService } from "@web/core/utils/hooks";
-import { useSortable } from "@web/core/utils/sortable";
+import { useSortable } from "@web/core/utils/sortable_owl";
 import { isNull } from "@web/views/utils";
 import { ColumnProgress } from "@web/views/view_components/column_progress";
 import { useBounceButton } from "@web/views/view_hook";
@@ -229,7 +229,7 @@ export class KanbanRenderer extends Component {
             fieldNodes.length &&
             fieldNodes.some((fieldNode) => "readonly" in fieldNode)
         ) {
-            isReadonly = fieldNodes.every((fieldNode) => fieldNode.readonly === 'True');
+            isReadonly = fieldNodes.every((fieldNode) => fieldNode.readonly === "True");
         }
         return !isReadonly && this.isMovableField(groupByField);
     }

addons/web/static/src/views/list/list_renderer.js

@@ -9,7 +9,7 @@ import { Pager } from "@web/core/pager/pager";
 import { evaluateBooleanExpr } from "@web/core/py_js/py";
 import { registry } from "@web/core/registry";
 import { useBus, useService } from "@web/core/utils/hooks";
-import { useSortable } from "@web/core/utils/sortable";
+import { useSortable } from "@web/core/utils/sortable_owl";
 import { getTabableElements } from "@web/core/utils/ui";
 import { Field, getPropertyFieldInfo } from "@web/views/fields/field";
 import { getTooltipInfo } from "@web/views/fields/field_tooltip";

addons/web/static/src/views/view_dialogs/export_data_dialog.js

@@ -7,7 +7,7 @@ import { Dialog } from "@web/core/dialog/dialog";
 import { unique } from "@web/core/utils/arrays";
 import { useService } from "@web/core/utils/hooks";
 import { fuzzyLookup } from "@web/core/utils/search";
-import { useSortable } from "@web/core/utils/sortable";
+import { useSortable } from "@web/core/utils/sortable_owl";
 import { useDebounced } from "@web/core/utils/timing";
 
 import { Component, useRef, useState, onMounted, onWillStart, onWillUnmount } from "@odoo/owl";

addons/web/static/tests/core/utils/sortable_tests.js

@@ -8,7 +8,7 @@ import {
     mount,
     nextTick,
 } from "@web/../tests/helpers/utils";
-import { useSortable } from "@web/core/utils/sortable";
+import { useSortable } from "@web/core/utils/sortable_owl";
 
 import { Component, reactive, useRef, useState, xml } from "@odoo/owl";
 
@@ -330,7 +330,7 @@ QUnit.module("Draggable", ({ beforeEach }) => {
         assert.strictEqual(renderer.scrollWidth, 900);
         assert.containsNone(target, ".item.o_dragged");
 
-        let dragHelpers = await drag(".item11");
+        const dragHelpers = await drag(".item11");
 
         // Drag first record of first group to the right
         await dragHelpers.moveTo(".list3 .item");