goblin-magic 1.3.0 → 1.6.0

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "goblin-magic",
-  "version": "1.3.0",
+  "version": "1.6.0",
   "description": "goblin-magic",
   "author": "Epsitec SA",
   "contributors": [
     "Yannick Vessaz <vessaz@epsitec.ch>",
-    "Mathieu Schroeter <schroeter@epsitec.ch>"
+    "Mathieu Schroeter <schroeter@epsitec.ch>",
+    "Samuel Loup <loup@epsitec.ch>"
   ],
   "license": "MIT",
   "config": {

package/test/navigation.spec.js

@@ -0,0 +1,117 @@
+'use strict';
+
+const {expect} = require('chai');
+const {Elf} = require('xcraft-core-goblin/lib/test.js');
+
+function restore(navLogic) {
+  navLogic.change('windows', {
+    'win@1': {
+      panelIds: ['panel@1', 'panel@2'],
+      dialogIds: ['dialog@1'],
+      activePanelId: 'panel@1',
+    },
+  });
+  navLogic.change('panels', {
+    'panel@1': {
+      tabIds: ['tab@1', 'tab@2', 'tab@3'],
+      lastTabIds: [],
+    },
+    'panel@2': {
+      tabIds: ['tab@4', 'tab@5', 'tab@6'],
+      lastTabIds: [],
+    },
+  });
+  navLogic.change('tabs', {
+    'tab@1': {highlighted: false},
+    'tab@2': {highlighted: false},
+    'tab@3': {highlighted: false},
+    'tab@4': {highlighted: false},
+    'tab@5': {highlighted: false},
+    'tab@6': {highlighted: false},
+  });
+}
+
+describe('goblin.magic.navigation', function () {
+  const {
+    MagicNavigationLogic,
+  } = require('../widgets/magic-navigation/service.js');
+
+  it('moveTab', function () {
+    const navLogic = Elf.trial(MagicNavigationLogic);
+    navLogic.create('magicNavigation@test');
+
+    // --- one panel -----------------------------------------------------------
+
+    /* 1,2,3 → 2,3,1 */
+    restore(navLogic);
+    navLogic.moveTab('panel@1', 'tab@1', 'panel@1', 'tab@3', 'right');
+    expect(navLogic.state.panels['panel@1'].tabIds.toJS()) //
+      .to.be.eql(['tab@2', 'tab@3', 'tab@1']);
+
+    /* 1,2,3 → 2,1,3 */
+    restore(navLogic);
+    navLogic.moveTab('panel@1', 'tab@1', 'panel@1', 'tab@3', 'left');
+    expect(navLogic.state.panels['panel@1'].tabIds.toJS()) //
+      .to.be.eql(['tab@2', 'tab@1', 'tab@3']);
+
+    /* 1,2,3 → 2,1,3 */
+    restore(navLogic);
+    navLogic.moveTab('panel@1', 'tab@1', 'panel@1', 'tab@2', 'right');
+    expect(navLogic.state.panels['panel@1'].tabIds.toJS()) //
+      .to.be.eql(['tab@2', 'tab@1', 'tab@3']);
+
+    /* 1,2,3 → 1,2,3 */
+    restore(navLogic);
+    navLogic.moveTab('panel@1', 'tab@1', 'panel@1', 'tab@2', 'left');
+    expect(navLogic.state.panels['panel@1'].tabIds.toJS()) //
+      .to.be.eql(['tab@1', 'tab@2', 'tab@3']);
+
+    /* 1,2,3 → 3,1,2 */
+    restore(navLogic);
+    navLogic.moveTab('panel@1', 'tab@3', 'panel@1', 'tab@1', 'left');
+    expect(navLogic.state.panels['panel@1'].tabIds.toJS()) //
+      .to.be.eql(['tab@3', 'tab@1', 'tab@2']);
+
+    /* 1,2,3 → 1,3,2 */
+    restore(navLogic);
+    navLogic.moveTab('panel@1', 'tab@3', 'panel@1', 'tab@1', 'right');
+    expect(navLogic.state.panels['panel@1'].tabIds.toJS()) //
+      .to.be.eql(['tab@1', 'tab@3', 'tab@2']);
+
+    // --- two panels ----------------------------------------------------------
+
+    /* 2,3 → 4,5,6,1 */
+    restore(navLogic);
+    navLogic.moveTab('panel@1', 'tab@1', 'panel@2', 'tab@6', 'right');
+    expect(navLogic.state.panels['panel@1'].tabIds.toJS()) //
+      .to.be.eql(['tab@2', 'tab@3']);
+    expect(navLogic.state.panels['panel@2'].tabIds.toJS()) //
+      .to.be.eql(['tab@4', 'tab@5', 'tab@6', 'tab@1']);
+
+    /* 1,3 → 2,4,5,6 */
+    restore(navLogic);
+    navLogic.moveTab('panel@1', 'tab@2', 'panel@2', 'tab@4', 'left');
+    expect(navLogic.state.panels['panel@1'].tabIds.toJS()) //
+      .to.be.eql(['tab@1', 'tab@3']);
+    expect(navLogic.state.panels['panel@2'].tabIds.toJS()) //
+      .to.be.eql(['tab@2', 'tab@4', 'tab@5', 'tab@6']);
+
+    /* 1,2 → 4,5,3,6 */
+    restore(navLogic);
+    navLogic.moveTab('panel@1', 'tab@3', 'panel@2', 'tab@5', 'right');
+    expect(navLogic.state.panels['panel@1'].tabIds.toJS()) //
+      .to.be.eql(['tab@1', 'tab@2']);
+    expect(navLogic.state.panels['panel@2'].tabIds.toJS()) //
+      .to.be.eql(['tab@4', 'tab@5', 'tab@3', 'tab@6']);
+
+    /* . → 2,4,1,5,6,3 */
+    restore(navLogic);
+    navLogic.moveTab('panel@1', 'tab@2', 'panel@2', 'tab@4', 'left');
+    navLogic.moveTab('panel@1', 'tab@1', 'panel@2', 'tab@5', 'left');
+    navLogic.moveTab('panel@1', 'tab@3', 'panel@2', 'tab@6', 'right');
+    expect(navLogic.state.panels['panel@1'].tabIds.toJS()) //
+      .to.be.eql([]);
+    expect(navLogic.state.panels['panel@2'].tabIds.toJS()) //
+      .to.be.eql(['tab@2', 'tab@4', 'tab@1', 'tab@5', 'tab@6', 'tab@3']);
+  });
+});

package/widgets/cancelable-dialog/widget.js

@@ -0,0 +1,116 @@
+import React from 'react';
+import Widget from 'goblin-laboratory/widgets/widget';
+import Dialog from '../dialog/widget.js';
+import ListenerStack from '../listener-stack/listener-stack.js';
+
+const listenerStack = new ListenerStack();
+
+/**
+ * Dialog with custom event handling.
+ *
+ * When an html dialog with closedby="any" or closedby="closerequest" is closed using ESC,
+ * it's not always possible to cancel the 'cancel' event. See https://issues.chromium.org/issues/351867704.
+ * This component provides a dialog where the 'cancel' event can be canceled.
+ */
+export default class CancelableDialog extends Widget {
+  constructor() {
+    super(...arguments);
+    /** @type {React.RefObject<Dialog>} */
+    this.dialog = React.createRef();
+    this.closeEnabled = false;
+  }
+
+  get dialogElement() {
+    return this.dialog.current.dialog.current;
+  }
+
+  componentDidMount() {
+    this.updateEscHandler();
+  }
+
+  componentDidUpdate() {
+    this.updateEscHandler();
+  }
+
+  componentWillUnmount() {
+    this.removeEscHandler();
+  }
+
+  updateEscHandler() {
+    if (this.props.open) {
+      this.addEscHandler();
+    } else {
+      this.removeEscHandler();
+    }
+  }
+
+  addEscHandler() {
+    // Do action only on the latest opened dialog
+    listenerStack.push('keydown', this.handleKeyDown);
+  }
+
+  removeEscHandler() {
+    listenerStack.pop('keydown', this.handleKeyDown);
+  }
+
+  close = () => {
+    this.dialog.current?.close();
+  };
+
+  cancel = (reason) => {
+    const event = new CustomEvent('cancel', {
+      detail: {reason},
+      cancelable: true,
+    });
+    this.props.onCancel?.(event);
+    if (!event.defaultPrevented) {
+      this.dialog.current.close();
+    }
+  };
+
+  handlePointerDown = (event) => {
+    this.props.onPointerDown?.(event);
+    if (event.target === this.dialogElement) {
+      this.closeEnabled = true;
+    } else {
+      this.closeEnabled = false;
+    }
+  };
+
+  /**
+   * @param {PointerEvent} event
+   */
+  handlePointerUp = (event) => {
+    this.props.onPointerUp?.(event);
+    if (this.closeEnabled && event.target === this.dialogElement) {
+      this.cancel('outside-click');
+      event.stopPropagation();
+    }
+    this.closeEnabled = false;
+  };
+
+  /**
+   * @param {KeyboardEvent} event
+   */
+  handleKeyDown = (event) => {
+    if (event.defaultPrevented) {
+      return;
+    }
+    if (event.key === 'Escape') {
+      this.cancel('escape-key');
+    }
+  };
+
+  render() {
+    const {onCancel, ...props} = this.props;
+    return (
+      <Dialog
+        closedby="none"
+        {...props}
+        ref={this.dialog}
+        onPointerDown={this.handlePointerDown}
+        onPointerUp={this.handlePointerUp}
+      />
+    );
+  }
+}

package/widgets/dialog/widget.js

@@ -11,13 +11,37 @@ export default class Dialog extends Widget {
   }
 
   componentDidMount() {
+    this.updateToggleListener();
     this.update();
   }
 
   componentDidUpdate() {
+    this.updateToggleListener();
     this.update();
   }
 
+  componentWillUnmount() {
+    this.removeToggleListener();
+  }
+
+  updateToggleListener() {
+    // Using the `onToggle` prop on the <dialog> component does not work.
+    // So we register the 'toggle' event manually.
+    if (this.props.onToggle) {
+      this.addToggleListener();
+    } else {
+      this.removeToggleListener();
+    }
+  }
+
+  addToggleListener() {
+    this.dialog.current?.addEventListener('toggle', this.props.onToggle);
+  }
+
+  removeToggleListener() {
+    this.dialog.current?.removeEventListener('toggle', this.props.onToggle);
+  }
+
   close = () => {
     this.dialog.current?.close();
   };
@@ -27,23 +51,6 @@ export default class Dialog extends Widget {
     event.stopPropagation();
   };
 
-  handlePointerDown = (event) => {
-    this.props.onPointerDown?.(event);
-    if (event.target === this.dialog.current) {
-      this.closeEnabled = true;
-    } else {
-      this.closeEnabled = false;
-    }
-  };
-
-  handlePointerUp = (event) => {
-    this.props.onPointerUp?.(event);
-    if (this.closeEnabled && event.target === this.dialog.current) {
-      this.dialog.current.close();
-    }
-    this.closeEnabled = false;
-  };
-
   update() {
     if (this.props.open) {
       if (!this.dialog.current?.open) {
@@ -59,15 +66,9 @@ export default class Dialog extends Widget {
   }
 
   render() {
-    const {open, modal, portal = false, ...props} = this.props;
+    const {open, modal, portal = false, onToggle, ...props} = this.props;
     const dialog = (
-      <dialog
-        {...props}
-        ref={this.dialog}
-        onClose={this.handleClose}
-        onPointerDown={this.handlePointerDown}
-        onPointerUp={this.handlePointerUp}
-      />
+      <dialog {...props} ref={this.dialog} onClose={this.handleClose} />
     );
 
     if (portal) {

package/widgets/listener-stack/listener-stack.js

@@ -0,0 +1,62 @@
+// @ts-check
+
+export default class ListenerStack {
+  /** @type {Map<string,Function[]>} */
+  stacks = new Map();
+
+  /**
+   * @param {string} type
+   * @returns {Function[]}
+   */
+  getStack(type) {
+    let stack = this.stacks.get(type);
+    if (!stack) {
+      stack = [];
+      this.stacks.set(type, stack);
+    }
+    return stack;
+  }
+
+  /**
+   * @param {Event} event
+   */
+  handleEvent = (event) => {
+    const stack = this.getStack(event.type);
+    const last = stack.at(-1);
+    if (!last) {
+      throw new Error('Empty stack');
+    }
+    last(event);
+  };
+
+  /**
+   * @template {keyof WindowEventMap} T
+   * @param {T} type
+   * @param {(event: WindowEventMap[T]) => any} listener
+   */
+  push(type, listener) {
+    const stack = this.getStack(type);
+    stack.push(listener);
+    if (stack.length === 1) {
+      window.addEventListener(type, this.handleEvent);
+    }
+  }
+
+  /**
+   * @template {keyof WindowEventMap} T
+   * @param {T} type
+   * @param {(event: WindowEventMap[T]) => any} listener
+   */
+  pop(type, listener) {
+    const stack = this.getStack(type);
+    const index = stack.indexOf(listener);
+    if (index === -1) {
+      console.error(`Unknown listener for type ${type}`);
+      return;
+    }
+    stack.splice(index, 1);
+    if (stack.length === 0) {
+      window.removeEventListener(type, this.handleEvent);
+    }
+  }
+}

package/widgets/magic-dialog/widget.js

@@ -1,9 +1,9 @@
 import React from 'react';
 import Widget from 'goblin-laboratory/widgets/widget';
 import * as styles from './styles.js';
-import Dialog from '../dialog/widget.js';
 import Movable from '../movable/widget.js';
 import isEmptyAreaElement from '../element-helpers/is-empty-area-element.js';
+import CancelableDialog from '../cancelable-dialog/widget.js';
 
 /**
  * @param {PointerEvent} event1
@@ -21,7 +21,7 @@ class MagicDialog extends Widget {
   constructor() {
     super(...arguments);
     this.styles = styles;
-    /** @type {React.RefObject<Dialog>} */
+    /** @type {React.RefObject<CancelableDialog>} */
     this.dialog = React.createRef();
   }
 
@@ -57,7 +57,7 @@ class MagicDialog extends Widget {
 
   handlePointerDown = (event) => {
     const {target} = event;
-    const dialog = this.dialog.current?.dialog.current;
+    const dialog = this.dialog.current?.dialogElement;
     if (dialog && !dialog.contains(target)) {
       if (isEmptyAreaElement(target)) {
         this.downEvent = event;
@@ -76,30 +76,14 @@ class MagicDialog extends Widget {
     }
   };
 
-  handleKeyDown = (event) => {
-    this.props.onKeyDown?.(event);
-    if (event.defaultPrevented) {
-      return;
-    }
-    if (event.key === 'Escape') {
-      this.dialog.current.close();
-      event.stopPropagation();
-    }
-  };
-
   render() {
     const {className = '', ...props} = this.props;
     return (
       <Movable>
         {(moveableProps) => (
-          <Dialog
+          <CancelableDialog
             {...props}
             {...moveableProps}
-            onKeyDown={
-              !this.props.modal && this.props.onClose
-                ? this.handleKeyDown
-                : undefined
-            }
             ref={this.dialog}
             className={this.styles.classNames.dialog + ' ' + className}
             open={this.props.open}

package/widgets/magic-navigation/service.js

@@ -258,6 +258,40 @@ class MagicNavigationLogic extends Elf.Spirit {
     }
   }
 
+  /**
+   * @param {id} srcPanelId
+   * @param {id} srcTabId
+   * @param {id} dstPanelId
+   * @param {id} dstTabId
+   * @param {`left`|`right`} side
+   */
+  moveTab(srcPanelId, srcTabId, dstPanelId, dstTabId, side) {
+    const {state} = this;
+    const tabs = [...state.panels[dstPanelId].tabIds];
+
+    if (srcPanelId === dstPanelId) {
+      const srcIndex = state.panels[srcPanelId].tabIds.indexOf(srcTabId);
+      if (side === 'right') {
+        tabs.splice(srcIndex, 1);
+      } else {
+        tabs.splice(srcIndex, 1);
+      }
+    }
+
+    if (side === 'right') {
+      const dstIndex = tabs.indexOf(dstTabId);
+      tabs.splice(dstIndex + 1, 0, srcTabId);
+    } else {
+      const dstIndex = tabs.indexOf(dstTabId);
+      tabs.splice(dstIndex, 0, srcTabId);
+    }
+    state.panels[dstPanelId].tabIds = tabs;
+
+    if (srcPanelId !== dstPanelId) {
+      this._removeTabAndUpdatePanel(state, srcPanelId, srcTabId);
+    }
+  }
+
   /**
    * @param {typeof this["state"]} state
    * @param {id} panelId
@@ -574,7 +608,7 @@ class MagicNavigation extends Elf {
    * @param {id} parentId
    * @param {string} prompt
    * @param {object} [options]
-   * @param {'default' | 'yes-no'} [options.kind]
+   * @param {'default' | 'yes-no' | 'yes-no-cancel'} [options.kind]
    * @param {string} [options.advice]
    * @param {string} [options.okLabel]
    * @param {string} [options.noLabel]
@@ -765,8 +799,14 @@ class MagicNavigation extends Elf {
   }
 
   async _hasSameWidget(view1, view2) {
-    const widget1 = view1.widget || getServiceName(view1.service);
-    const widget2 = view2.widget || getServiceName(view2.service);
+    const widget1 =
+      view1.widget ||
+      getServiceName(view1.service) ||
+      view1.serviceId.split('@', 1)[0];
+    const widget2 =
+      view2.widget ||
+      getServiceName(view2.service) ||
+      view2.serviceId.split('@', 1)[0];
     return (
       widget1[0].toLowerCase() + widget1.slice(1) ===
       widget2[0].toLowerCase() + widget2.slice(1)
@@ -949,6 +989,14 @@ class MagicNavigation extends Elf {
     )?.[0];
   }
 
+  /**
+   * @param {id} tabId
+   * @returns {Promise<string | null | undefined>}
+   */
+  async getServiceId(tabId) {
+    return this.state.tabs[tabId]?.serviceId;
+  }
+
   /**
    * @param {id} panelId
    * @returns {Promise<DesktopId | undefined >}
@@ -985,6 +1033,26 @@ class MagicNavigation extends Elf {
     this.logic.activateTab(panelId, tabId, keepHistory);
   }
 
+  /**
+   * @param {id} srcTabId
+   * @param {id} dstTabId
+   * @param {`left`|`right`} side
+   */
+  async moveTab(srcTabId, dstTabId, side) {
+    if (srcTabId === dstTabId) {
+      return;
+    }
+    const srcPanelId = await this.findPanelId(srcTabId);
+    if (!srcPanelId) {
+      throw new Error(`Unknown tab '${srcTabId}'`);
+    }
+    const dstPanelId = await this.findPanelId(dstTabId);
+    if (!dstPanelId) {
+      throw new Error(`Unknown tab '${dstTabId}'`);
+    }
+    this.logic.moveTab(srcPanelId, srcTabId, dstPanelId, dstTabId, side);
+  }
+
   /**
    * @param {DesktopId} desktopId
    * @returns {Promise<id | null | undefined>}
@@ -1226,6 +1294,34 @@ class MagicNavigation extends Elf {
     this.quest.evt(`${dialogId}-closed`, result);
   }
 
+  /**
+   * @param {id} viewId
+   * @param {any} [result]
+   * @returns {Promise<boolean>}
+   */
+  async _onCloseRequested(viewId, result) {
+    const view = this.views.get(viewId);
+    if (!view) {
+      throw new Error(`Missing view '${viewId}'`);
+    }
+    const serviceId = this.state.tabs[viewId].serviceId;
+    if (view.service && serviceId) {
+      if (typeof view.service === 'string') {
+        const serviceAPI = this.quest.getAPI(serviceId);
+        if (serviceAPI.onCloseRequested) {
+          return await serviceAPI.onCloseRequested(result);
+        }
+      } else {
+        const ServiceClass = view.service;
+        const serviceAPI = await new ServiceClass(this).api(serviceId);
+        if (serviceAPI.onCloseRequested) {
+          return await serviceAPI.onCloseRequested(result);
+        }
+      }
+    }
+    return true;
+  }
+
   /**
    * @param {id} viewOrServiceId id of dialog, tab or service
    * @returns {Promise<any>}
@@ -1283,6 +1379,18 @@ class MagicNavigation extends Elf {
     }
   }
 
+  /**
+   * @param {DesktopId} desktopId
+   * @param {id} viewId
+   * @param {any} [result]
+   */
+  async requestClose(desktopId, viewId, result) {
+    const canBeClosed = await this._onCloseRequested(viewId, result);
+    if (canBeClosed) {
+      await this.closeView(desktopId, viewId, result);
+    }
+  }
+
   /**
    * @param {id} viewOrServiceId
    * @param {DesktopId} desktopId

package/widgets/magic-navigation/widget.js

@@ -210,30 +210,35 @@ const MagicNavigationTab = withC(MagicNavigationTabNC);
 let MagicNavigationTabs = class extends Widget {
   constructor() {
     super(...arguments);
-    this.handleKeyDown = this.handleKeyDown.bind(this);
-    this.setTab = this.setTab.bind(this);
-    this.handleAuxClick = this.handleAuxClick.bind(this);
   }
 
-  handleKeyDown(event) {
+  handleKeyDown = (event) => {
     if (event.key === 'ArrowLeft') {
       this.doFor('magicNavigation@main', 'switchTab', {reverse: true});
     } else if (event.key === 'ArrowRight') {
       this.doFor('magicNavigation@main', 'switchTab');
     }
-  }
+  };
 
-  setTab(tabId) {
+  setTab = (tabId) => {
     this.doFor('magicNavigation@main', 'activateTab', {tabId});
-  }
+  };
+
+  moveTab = (srcTabId, dstTabId, side) => {
+    this.doFor('magicNavigation@main', 'moveTab', {
+      srcTabId,
+      dstTabId,
+      side,
+    });
+  };
 
-  handleAuxClick(event) {
+  handleAuxClick = (event) => {
     if (event.button === 1) {
       // Middle click
       const tabId = event.currentTarget.dataset.value;
       this.doFor('magicNavigation@main', 'closeTab', {tabId});
     }
-  }
+  };
 
   render() {
     const tabIds = this.props.tabIds;
@@ -242,6 +247,7 @@ let MagicNavigationTabs = class extends Widget {
       <MainTabs
         currentTab={currentTabId}
         onTabClick={this.setTab}
+        onTabDrop={this.moveTab}
         tabIndex="0"
         onKeyDown={this.handleKeyDown}
       >
@@ -365,23 +371,35 @@ MagicNavigationPanels = withC(MagicNavigationPanels);
 let MagicNavigationDialog = class extends Widget {
   constructor() {
     super(...arguments);
-    this.handleClose = this.handleClose.bind(this);
   }
 
-  handleClose(event) {
+  handleClose = (event) => {
     const returnValue = event.currentTarget.returnValue;
     const dialogId = this.props.dialogId;
     this.doFor('magicNavigation@main', 'closeDialog', {
       dialogId,
       result: returnValue !== '' ? returnValue : undefined,
     });
-  }
+  };
+
+  handleCancel = (event) => {
+    const dialogId = this.props.dialogId;
+    this.doFor('magicNavigation@main', 'requestClose', {
+      viewId: dialogId,
+    });
+    event.preventDefault();
+  };
 
   render() {
     const dialogId = this.props.dialogId;
     const widgetProps = this.props.view.get('widgetProps')?.toObject();
     return (
-      <MagicDialog modal={widgetProps?.modal} open onClose={this.handleClose}>
+      <MagicDialog
+        modal={widgetProps?.modal}
+        open
+        onClose={this.handleClose}
+        onCancel={this.handleCancel}
+      >
         <MagicNavigationView
           id={this.props.id}
           viewId={dialogId}

package/widgets/menu/widget.js

@@ -1,11 +1,11 @@
 import React from 'react';
 import Widget from 'goblin-laboratory/widgets/widget';
 import * as styles from './styles.js';
-import Dialog from '../dialog/widget.js';
 import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
 import {faBars, faChevronRight} from '@fortawesome/free-solid-svg-icons';
 import MagicButton from 'goblin-magic/widgets/magic-button/widget.js';
 import WithComputedSize from '../with-computed-size/widget.js';
+import MenuDialog from '../menu-dialog/widget.js';
 
 const MenuContext = React.createContext();
 const MenuStateContext = React.createContext();
@@ -254,6 +254,23 @@ class MenuContent extends Widget {
     this.stopPropagation = this.stopPropagation.bind(this);
   }
 
+  /**
+   * @param {ToggleEvent} event
+   */
+  setFocus = (event) => {
+    if (event.newState !== 'open') {
+      return;
+    }
+    /** @type {HTMLDialogElement} */
+    const dialog = event.currentTarget;
+    if (!document.activeElement || document.activeElement === document.body) {
+      const firstFocusable = dialog.querySelector('[tabindex]');
+      if (firstFocusable) {
+        firstFocusable.focus();
+      }
+    }
+  };
+
   /**
    * @param {Event} event
    * @param {Menu} menu
@@ -290,6 +307,7 @@ class MenuContent extends Widget {
     } else if (event.key === 'ArrowUp') {
       this.focusNext(event, -1);
     }
+    event.stopPropagation();
   };
 
   getStyle(state, size) {
@@ -461,9 +479,10 @@ class MenuContent extends Widget {
       ...props
     } = this.props;
     return (
-      <Dialog
+      <MenuDialog
         open={open}
         modal={modal}
+        onToggle={this.setFocus}
         onClose={(event) => this.handleClose(event, menu)}
         className={this.styles.classNames.menuDialog}
         portal={portal}
@@ -496,7 +515,7 @@ class MenuContent extends Widget {
             }}
           </WithComputedSize>
         )}
-      </Dialog>
+      </MenuDialog>
     );
   }
 

package/widgets/menu-dialog/widget.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import Widget from 'goblin-laboratory/widgets/widget';
+import Dialog from '../dialog/widget.js';
+
+export default class MenuDialog extends Widget {
+  constructor() {
+    super(...arguments);
+    /** @type {React.RefObject<Dialog>} */
+    this.dialog = React.createRef();
+    this.closeEnabled = false;
+  }
+
+  get dialogElement() {
+    return this.dialog.current.dialog.current;
+  }
+
+  close = () => {
+    this.dialog.current?.close();
+  };
+
+  handlePointerDown = (event) => {
+    this.props.onPointerDown?.(event);
+    if (event.target === this.dialogElement) {
+      this.closeEnabled = true;
+    } else {
+      this.closeEnabled = false;
+    }
+  };
+
+  handlePointerUp = (event) => {
+    this.props.onPointerUp?.(event);
+    if (this.closeEnabled && event.target === this.dialogElement) {
+      this.dialog.current.close();
+    }
+    this.closeEnabled = false;
+  };
+
+  render() {
+    const {onCancel, ...props} = this.props;
+    return (
+      <Dialog
+        closedby="any"
+        // Even with closedby="any", the dialog is not closed by clicking on the backdrop.
+        // So we add custom pointerDown and pointerUp handlers.
+        {...props}
+        ref={this.dialog}
+        onPointerDown={this.handlePointerDown}
+        onPointerUp={this.handlePointerUp}
+      />
+    );
+  }
+}

package/widgets/movable/widget.js

@@ -45,6 +45,7 @@ class Movable extends Widget {
   handlePointerDown = (event) => {
     this.element = event.currentTarget;
     if (
+      this.element !== event.target &&
       this.element.contains(event.target) &&
       isEmptyAreaElement(event.target, this.element)
     ) {

package/widgets/tab-layout/styles.js

@@ -22,6 +22,22 @@ export default function styles() {
 
       ':active': {},
     },
+
+    '& > .drop-left': {
+      willChange: 'box-shadow',
+      position: 'relative',
+      transition: 'box-shadow 0.2s ease',
+      boxShadow:
+        'inset 4px 0 0 color-mix(in srgb, var(--text-color), transparent 40%)',
+    },
+
+    '& > .drop-right': {
+      willChange: 'box-shadow',
+      position: 'relative',
+      transition: 'box-shadow 0.2s ease',
+      boxShadow:
+        'inset -4px 0 0 color-mix(in srgb, var(--text-color), transparent 40%)',
+    },
   };
 
   return {

package/widgets/tab-layout/widget.js

@@ -26,15 +26,90 @@ class TabLayoutTabs extends Widget {
   constructor() {
     super(...arguments);
     this.styles = styles;
-    this.handleTabClick = this.handleTabClick.bind(this);
   }
 
-  handleTabClick(value, event) {
+  handleTabClick = (value, event) => {
     this.props.onTabClick?.(value, event);
-  }
+  };
+
+  handleDragStart = (event, tabId) => {
+    event.dataTransfer.effectAllowed = 'move';
+    event.dataTransfer.setData('text/plain', tabId);
+  };
+
+  #applySideClass = (el, side) => {
+    if (!el) {
+      return;
+    }
+    if (side === 'left') {
+      el.classList.add('drop-left');
+      el.classList.remove('drop-right');
+    } else {
+      el.classList.add('drop-right');
+      el.classList.remove('drop-left');
+    }
+  };
+
+  #dropClasses = (el) => {
+    if (el) {
+      el.classList.remove('drop-left');
+      el.classList.remove('drop-right');
+    }
+  };
+
+  #getSideFromEvent = (event) => {
+    const rect = event.currentTarget.getBoundingClientRect();
+    const midX = rect.left + rect.width / 2;
+    return event.clientX < midX ? 'left' : 'right';
+  };
+
+  handleDragEnter = (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+  };
+
+  handleDragOver = (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    event.dataTransfer.dropEffect = 'move';
+
+    const side = this.#getSideFromEvent(event);
+    if (side) {
+      this.#applySideClass(event.currentTarget, side);
+    } else {
+      this.#dropClasses(event.currentTarget);
+    }
+  };
+
+  handleDragLeave = (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+
+    const leaveToOutside = !event.currentTarget.contains(event.relatedTarget);
+    if (leaveToOutside) {
+      this.#dropClasses(event.currentTarget);
+    }
+  };
+
+  handleDrop = (event, targetTabId) => {
+    event.preventDefault();
+
+    const el = event.currentTarget;
+    const side = this.#getSideFromEvent(event);
+    this.#dropClasses(el);
+
+    const draggedTabId = event.dataTransfer.getData('text/plain');
+    if (draggedTabId && targetTabId) {
+      this.props.onTabDrop?.(draggedTabId, targetTabId, side, event);
+    }
+  };
+
+  handleDragEnd = (event) => {
+    this.#dropClasses(event?.currentTarget);
+  };
 
   render() {
-    const {currentTab, onTabClick, ...props} = this.props;
+    const {currentTab, onTabClick, onTabDrop, ...props} = this.props;
     const className = this.props.className || '';
     return (
       <div {...props} className={this.styles.classNames.tabs + ' ' + className}>
@@ -47,6 +122,13 @@ class TabLayoutTabs extends Widget {
             'onClick': (event) =>
               (child.props.onClick || this.handleTabClick)(value, event),
             'data-active': currentTab === value,
+            'draggable': true,
+            'onDragStart': (e) => this.handleDragStart(e, value),
+            'onDragEnter': this.handleDragEnter,
+            'onDragOver': this.handleDragOver,
+            'onDragLeave': this.handleDragLeave,
+            'onDrop': (e) => this.handleDrop(e, value),
+            'onDragEnd': this.handleDragEnd,
           });
         })}
       </div>