handsontable 16.1.1 → 16.2.0-next-90d1117-20251117

package/plugins/dialog/dialog.js

@@ -2,10 +2,15 @@
 
 exports.__esModule = true;
 require("core-js/modules/es.error.cause.js");
+require("core-js/modules/es.array.at.js");
+require("core-js/modules/es.string.at-alternative.js");
+require("core-js/modules/esnext.iterator.constructor.js");
+require("core-js/modules/esnext.iterator.every.js");
 var _base = require("../base");
 var _ui2 = require("./ui");
-var _focusDetector2 = require("../../utils/focusDetector");
 var _object = require("../../helpers/object");
+var C = _interopRequireWildcard(require("../../i18n/constants"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 function _classPrivateMethodInitSpec(e, a) { _checkPrivateRedeclaration(e, a), a.add(e); }
 function _classPrivateFieldInitSpec(e, t, a) { _checkPrivateRedeclaration(e, t), t.set(e, a); }
 function _checkPrivateRedeclaration(e, t) { if (t.has(e)) throw new TypeError("Cannot initialize the same private elements twice on an object"); }
@@ -29,6 +34,15 @@ const SHORTCUTS_CONTEXT_NAME = `plugin:${PLUGIN_KEY}`;
  * In order to enable the dialog mechanism, {@link Options#dialog} option must be set to `true`.
  *
  * The plugin provides several configuration options to customize the dialog behavior and appearance:
+ * - `template`: The template to use for the dialog (default: `null`). The error will be thrown when
+ * the template is provided together with the `content` option.
+ *   - `type`: The type of the template ('confirm')
+ *   - `title`: The title of the dialog
+ *   - `description`: The description of the dialog (default: '')
+ *   - `buttons`: The buttons to display in the dialog (default: [])
+ *     - `text`: The text of the button
+ *     - `type`: The type of the button ('primary' | 'secondary')
+ *     - `callback`: The callback to trigger when the button is clicked
  * - `content`: The string or HTMLElement content to display in the dialog (default: '')
  * - `customClassName`: Custom class name to apply to the dialog (default: '')
  * - `background`: Dialog background variant 'solid' | 'semi-transparent' (default: 'solid')
@@ -36,14 +50,10 @@ const SHORTCUTS_CONTEXT_NAME = `plugin:${PLUGIN_KEY}`;
  * - `animation`: Whether to enable animations (default: true)
  * - `closable`: Whether the dialog can be closed (default: false)
  * - `a11y`: Object with accessibility options (default object below)
- * ```js
- * {
- *   role: 'dialog', // Role of the dialog 'dialog' | 'alertdialog' (default: 'dialog')
- *   ariaLabel: 'Dialog', // Label for the dialog (default: 'Dialog')
- *   ariaLabelledby: '', // ID of the element that labels the dialog (default: '')
- *   ariaDescribedby: '', // ID of the element that describes the dialog (default: ''),
- * }
- * ```
+ *   - `role`: The role of the dialog ('dialog' | 'alertdialog') (default: 'dialog')
+ *   - `ariaLabel`: The label of the dialog (default: 'Dialog')
+ *   - `ariaLabelledby`: The ID of the element that labels the dialog (default: '')
+ *   - `ariaDescribedby`: The ID of the element that describes the dialog (default: ''),
  *
  * @example
  *
@@ -68,6 +78,31 @@ const SHORTCUTS_CONTEXT_NAME = `plugin:${PLUGIN_KEY}`;
  *   }
  * }
  *
+ * // Enable dialog plugin using prebuild templates
+ * dialog: {
+ *   template: {
+ *     type: 'confirm',
+ *     title: 'Confirm',
+ *     description: 'This is a confirm',
+ *     buttons: [
+ *       {
+ *         text: 'Ok',
+ *         type: 'primary',
+ *         callback: () => {
+ *           console.log('Ok');
+ *         }
+ *       },
+ *       {
+ *         text: 'Cancel',
+ *         type: 'secondary',
+ *         callback: () => {
+ *           console.log('Cancel');
+ *         }
+ *       },
+ *     ],
+ *   },
+ * }
+ *
  * // Access to dialog plugin instance:
  * const dialogPlugin = hot.getPlugin('dialog');
  *
@@ -139,7 +174,6 @@ const SHORTCUTS_CONTEXT_NAME = `plugin:${PLUGIN_KEY}`;
  */
 var _ui = /*#__PURE__*/new WeakMap();
 var _isVisible = /*#__PURE__*/new WeakMap();
-var _focusDetector = /*#__PURE__*/new WeakMap();
 var _selectionState = /*#__PURE__*/new WeakMap();
 var _Dialog_brand = /*#__PURE__*/new WeakSet();
 class Dialog extends _base.BasePlugin {
@@ -161,12 +195,6 @@ class Dialog extends _base.BasePlugin {
      * @type {boolean}
      */
     _classPrivateFieldInitSpec(this, _isVisible, false);
-    /**
-     * Focus detector instance.
-     *
-     * @type {FocusDetector}
-     */
-    _classPrivateFieldInitSpec(this, _focusDetector, null);
     /**
      * Keeps the selection state that will be restored after the dialog is closed.
      *
@@ -182,6 +210,7 @@ class Dialog extends _base.BasePlugin {
   }
   static get DEFAULT_SETTINGS() {
     return {
+      template: null,
       content: '',
       customClassName: '',
       background: 'solid',
@@ -198,6 +227,7 @@ class Dialog extends _base.BasePlugin {
   }
   static get SETTINGS_VALIDATORS() {
     return {
+      template: value => (0, _object.isObject)(value) && typeof ['alert', 'confirm'].includes(value.type) && typeof value.title === 'string' && (typeof (value === null || value === void 0 ? void 0 : value.description) === 'undefined' || typeof (value === null || value === void 0 ? void 0 : value.description) === 'string') && (typeof (value === null || value === void 0 ? void 0 : value.buttons) === 'undefined' || Array.isArray(value === null || value === void 0 ? void 0 : value.buttons) && value.buttons.every(item => typeof item === 'object' && typeof item.text === 'string' && ['primary', 'secondary'].includes(item.type) && (typeof item.callback === 'undefined' || typeof item.callback === 'function'))),
       content: value => typeof value === 'string' || typeof HTMLElement !== 'undefined' && value instanceof HTMLElement || typeof DocumentFragment !== 'undefined' && value instanceof DocumentFragment,
       customClassName: value => typeof value === 'string',
       background: value => ['solid', 'semi-transparent'].includes(value),
@@ -228,20 +258,10 @@ class Dialog extends _base.BasePlugin {
         rootElement: this.hot.rootGridElement,
         isRtl: this.hot.isRtl()
       }));
-      _classPrivateFieldGet(_ui, this).addLocalHook('clickDialogElement', () => _assertClassBrand(_Dialog_brand, this, _onDialogClick).call(this));
-      _classPrivateFieldSet(_focusDetector, this, (0, _focusDetector2.installFocusDetector)(this.hot, _classPrivateFieldGet(_ui, this).getDialogElement(), {
-        onFocus: from => {
-          this.hot.getShortcutManager().setActiveContextName(SHORTCUTS_CONTEXT_NAME);
-          this.hot.listen();
-          this.hot.runHooks('afterDialogFocus', `tab_${from}`);
-        }
-      }));
     }
     _assertClassBrand(_Dialog_brand, this, _registerShortcuts).call(this);
-    this.addHook('modifyFocusOnTabNavigation', from => _assertClassBrand(_Dialog_brand, this, _onFocusTabNavigation).call(this, from), 1);
-    this.addHook('afterViewRender', () => _assertClassBrand(_Dialog_brand, this, _onAfterRender).call(this));
-    this.addHook('afterListen', () => _assertClassBrand(_Dialog_brand, this, _onAfterListen).call(this));
-    this.addHook('afterUnlisten', () => _assertClassBrand(_Dialog_brand, this, _onAfterUnlisten).call(this));
+    _assertClassBrand(_Dialog_brand, this, _registerFocusScope).call(this);
+    this.addHook('afterViewRender', () => _assertClassBrand(_Dialog_brand, this, _onAfterViewRender).call(this));
     super.enablePlugin();
   }
 
@@ -260,8 +280,10 @@ class Dialog extends _base.BasePlugin {
   disablePlugin() {
     this.hide();
     _assertClassBrand(_Dialog_brand, this, _unregisterShortcuts).call(this);
+    _assertClassBrand(_Dialog_brand, this, _unregisterFocusScope).call(this);
     super.disablePlugin();
   }
+
   /**
    * Check if the dialog is currently visible.
    *
@@ -276,6 +298,15 @@ class Dialog extends _base.BasePlugin {
    * Displays the dialog with the specified content and options.
    *
    * @param {object} options Dialog configuration object containing content and display options.
+   * @param {object} options.template The template to use for the dialog (default: `null`). The error will be thrown when
+   * the template is provided together with the `content` option.
+   * @param {'confirm'} options.template.type The type of the template ('confirm').
+   * @param {string} options.template.title The title of the dialog.
+   * @param {string} options.template.description The description of the dialog. Default: ''.
+   * @param {object[]} options.template.buttons The buttons to display in the dialog. Default: [].
+   * @param {string} options.template.buttons.text The text of the button.
+   * @param {'primary' | 'secondary'} options.template.buttons.type The type of the button.
+   * @param {function(MouseEvent)} options.template.buttons.callback The callback to trigger when the button is clicked.
    * @param {string|HTMLElement|DocumentFragment} options.content The content to display in the dialog. Can be a string, HTMLElement, or DocumentFragment. Default: ''
    * @param {string} options.customClassName Custom CSS class name to apply to the dialog container. Default: ''
    * @param {'solid'|'semi-transparent'} options.background Dialog background variant. Default: 'solid'.
@@ -301,19 +332,10 @@ class Dialog extends _base.BasePlugin {
     this.update(options);
     _classPrivateFieldGet(_ui, this).showDialog(this.getSetting('animation'));
     _classPrivateFieldSet(_isVisible, this, true);
+    this.hot.getFocusScopeManager().activateScope(PLUGIN_KEY);
     _classPrivateFieldSet(_selectionState, this, this.hot.selection.exportSelection());
     this.hot.deselectCell();
     this.hot.runHooks('afterDialogShow');
-    const {
-      activeElement
-    } = this.hot.rootDocument;
-    if (this.hot.rootWrapperElement.contains(activeElement) || this.hot.rootPortalElement.contains(activeElement)) {
-      this.hot.unlisten();
-      this.hot.getShortcutManager().setActiveContextName(SHORTCUTS_CONTEXT_NAME);
-      this.hot.listen();
-      _classPrivateFieldGet(_ui, this).focusDialog();
-      this.hot.runHooks('afterDialogFocus', 'show');
-    }
   }
 
   /**
@@ -321,14 +343,15 @@ class Dialog extends _base.BasePlugin {
    * Closes the dialog and restores the focus to the table.
    */
   hide() {
+    var _classPrivateFieldGet2;
     if (!this.isVisible()) {
       return;
     }
     this.hot.runHooks('beforeDialogHide');
     _classPrivateFieldGet(_ui, this).hideDialog(this.getSetting('animation'));
-    this.hot.getShortcutManager().setActiveContextName('grid');
     _classPrivateFieldSet(_isVisible, this, false);
-    if (_classPrivateFieldGet(_selectionState, this)) {
+    this.hot.getFocusScopeManager().deactivateScope(PLUGIN_KEY);
+    if (((_classPrivateFieldGet2 = _classPrivateFieldGet(_selectionState, this)) === null || _classPrivateFieldGet2 === void 0 ? void 0 : _classPrivateFieldGet2.ranges.length) > 0) {
       this.hot.selection.importSelection(_classPrivateFieldGet(_selectionState, this));
       this.hot.view.render();
       _classPrivateFieldSet(_selectionState, this, null);
@@ -342,6 +365,15 @@ class Dialog extends _base.BasePlugin {
    * Update the dialog configuration.
    *
    * @param {object} options Dialog configuration object containing content and display options.
+   * @param {object} options.template The template to use for the dialog (default: `null`). The error will be thrown when
+   * the template is provided together with the `content` option.
+   * @param {'confirm'} options.template.type The type of the template ('confirm').
+   * @param {string} options.template.title The title of the dialog.
+   * @param {string} options.template.description The description of the dialog. Default: ''.
+   * @param {object[]} options.template.buttons The buttons to display in the dialog. Default: [].
+   * @param {string} options.template.buttons.text The text of the button.
+   * @param {'primary' | 'secondary'} options.template.buttons.type The type of the button.
+   * @param {function(MouseEvent)} options.template.buttons.callback The callback to trigger when the button is clicked.
    * @param {string|HTMLElement|DocumentFragment} options.content The content to display in the dialog. Can be a string, HTMLElement, or DocumentFragment. Default: ''
    * @param {string} options.customClassName Custom CSS class name to apply to the dialog container. Default: ''
    * @param {'solid'|'semi-transparent'} options.background Dialog background variant. Default: 'solid'.
@@ -359,6 +391,18 @@ class Dialog extends _base.BasePlugin {
       return;
     }
     this.updatePluginSettings(options);
+    const templateValue = this.getSetting('template');
+    if (templateValue !== Dialog.DEFAULT_SETTINGS.template && this.getSetting('content') !== Dialog.DEFAULT_SETTINGS.content) {
+      throw new Error('The `template` option cannot be used together with the `content` option.');
+    }
+    if (templateValue) {
+      _classPrivateFieldGet(_ui, this).useTemplate(templateValue.type, {
+        id: this.hot.guid,
+        ...templateValue
+      });
+    } else {
+      _classPrivateFieldGet(_ui, this).useDefaultTemplate();
+    }
     _classPrivateFieldGet(_ui, this).updateDialog({
       isVisible: this.isVisible(),
       content: this.getSetting('content'),
@@ -371,28 +415,103 @@ class Dialog extends _base.BasePlugin {
   }
 
   /**
-   * Focus the dialog.
+   * Displays the alert dialog with the specified content.
+   *
+   * @param {string | { title: string, description: string }} message The message to display in the dialog.
+   * Can be a string or an object with `title` and `description` properties.
+   * @param {function(MouseEvent): void} [callback] The callback to trigger when the button is clicked.
    */
-  focus() {
-    _classPrivateFieldGet(_ui, this).focusDialog();
+  showAlert(message, callback) {
+    const {
+      title = 'Alert',
+      description
+    } = (0, _object.isObject)(message) ? message : {
+      title: message
+    };
+    this.show({
+      template: {
+        type: 'confirm',
+        title,
+        description,
+        buttons: [{
+          text: this.hot.getTranslatedPhrase(C.OK),
+          type: 'primary',
+          callback: function () {
+            for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+              args[_key] = arguments[_key];
+            }
+            return callback === null || callback === void 0 ? void 0 : callback(...args);
+          }
+        }]
+      },
+      contentBackground: false,
+      background: 'solid',
+      animation: true,
+      closable: false
+    });
   }
 
   /**
-   * Handle focus tab navigation event.
+   * Displays the confirm dialog with the specified content and options.
    *
-   * @param {'from_above' | 'from_below'} from The direction from which the focus was modified.
-   * @returns {boolean} Returns `false` to prevent the default focus behavior.
+   * @param {string | { title: string, description: string }} message The message to display in the dialog.
+   * Can be a string or an object with `title` and `description` properties.
+   * @param {function(MouseEvent): void} [onOk] The callback to trigger when the OK button is clicked.
+   * @param {function(MouseEvent): void} [onCancel] The callback to trigger when the Cancel button is clicked.
    */
+  showConfirm(message, onOk, onCancel) {
+    const {
+      title = 'Confirm',
+      description
+    } = (0, _object.isObject)(message) ? message : {
+      title: message
+    };
+    this.show({
+      template: {
+        type: 'confirm',
+        title,
+        description,
+        buttons: [{
+          text: this.hot.getTranslatedPhrase(C.CANCEL),
+          type: 'secondary',
+          callback: function () {
+            for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+              args[_key2] = arguments[_key2];
+            }
+            return onCancel === null || onCancel === void 0 ? void 0 : onCancel(...args);
+          }
+        }, {
+          text: this.hot.getTranslatedPhrase(C.OK),
+          type: 'primary',
+          callback: function () {
+            for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
+              args[_key3] = arguments[_key3];
+            }
+            return onOk === null || onOk === void 0 ? void 0 : onOk(...args);
+          }
+        }]
+      },
+      contentBackground: true,
+      background: 'semi-transparent',
+      animation: true,
+      closable: false
+    });
+  }
 
+  /**
+   * Focus the dialog.
+   */
+  focus() {
+    _classPrivateFieldGet(_ui, this).focusDialog();
+  }
   /**
    * Destroy dialog and reset plugin state.
    */
   destroy() {
-    var _classPrivateFieldGet2;
-    (_classPrivateFieldGet2 = _classPrivateFieldGet(_ui, this)) === null || _classPrivateFieldGet2 === void 0 || _classPrivateFieldGet2.destroyDialog();
+    var _classPrivateFieldGet3;
+    (_classPrivateFieldGet3 = _classPrivateFieldGet(_ui, this)) === null || _classPrivateFieldGet3 === void 0 || _classPrivateFieldGet3.destroyDialog();
     _classPrivateFieldSet(_ui, this, null);
     _classPrivateFieldSet(_isVisible, this, false);
-    _classPrivateFieldSet(_focusDetector, this, null);
     _classPrivateFieldSet(_selectionState, this, null);
     super.destroy();
   }
@@ -415,19 +534,12 @@ function _registerShortcuts() {
     preventDefault: false,
     callback: event => {
       this.hot._registerTimeout(() => {
-        const {
-          activeElement
-        } = this.hot.rootDocument;
-        if (!_classPrivateFieldGet(_ui, this).isInsideDialog(activeElement)) {
-          this.hot.unlisten();
-          return;
-        }
         if (event.shiftKey) {
           this.hot.runHooks('dialogFocusPreviousElement');
         } else {
           this.hot.runHooks('dialogFocusNextElement');
         }
-      }, 0);
+      });
     },
     group: SHORTCUTS_GROUP
   });
@@ -440,39 +552,43 @@ function _unregisterShortcuts() {
   const pluginContext = shortcutManager.getContext(SHORTCUTS_CONTEXT_NAME);
   pluginContext.removeShortcutsByGroup(SHORTCUTS_GROUP);
 }
-function _onFocusTabNavigation(from) {
-  if (this.isVisible()) {
-    _classPrivateFieldGet(_focusDetector, this).focus(from);
-    return false;
-  }
-}
 /**
- * Handle dialog click event.
+ * Registers the focus scope for the dialog plugin.
  */
-function _onDialogClick() {
-  if (this.isVisible() && !this.hot.isListening()) {
-    this.hot.getShortcutManager().setActiveContextName(SHORTCUTS_CONTEXT_NAME);
-    this.hot.runHooks('afterDialogFocus', 'click');
-  }
-  this.hot.listen();
-}
-/**
- * Called after the table is listened.
- */
-function _onAfterListen() {
-  _classPrivateFieldGet(_focusDetector, this).deactivate();
+function _registerFocusScope() {
+  this.hot.getFocusScopeManager().registerScope(PLUGIN_KEY, _classPrivateFieldGet(_ui, this).getContainer(), {
+    shortcutsContextName: SHORTCUTS_CONTEXT_NAME,
+    type: 'modal',
+    runOnlyIf: () => this.isVisible(),
+    onActivate: focusSource => {
+      const isListening = this.hot.isListening();
+      const focusableElements = _classPrivateFieldGet(_ui, this).getFocusableElements();
+      if (focusableElements.length > 0) {
+        if (focusSource === 'tab_from_above') {
+          focusableElements.at(0).focus();
+        } else if (focusSource === 'tab_from_below') {
+          focusableElements.at(-1).focus();
+        }
+      } else if (focusSource !== 'tab_from_above' && focusSource !== 'tab_from_below' && isListening && !_classPrivateFieldGet(_ui, this).getContainer().contains(this.hot.rootDocument.activeElement)) {
+        _classPrivateFieldGet(_ui, this).getContainer().focus();
+      }
+      if (isListening) {
+        this.hot.runHooks('afterDialogFocus', focusSource === 'unknown' ? 'show' : focusSource);
+      }
+    }
+  });
 }
 /**
- * Called after the table is unlistened.
+ * Unregisters the focus scope for the dialog plugin.
  */
-function _onAfterUnlisten() {
-  _classPrivateFieldGet(_focusDetector, this).activate();
+function _unregisterFocusScope() {
+  this.hot.getFocusScopeManager().unregisterScope(PLUGIN_KEY);
 }
 /**
  * Called after the rendering of the table is completed. It updates the width and
  * height of the dialog container to the same size as the table.
  */
-function _onAfterRender() {
+function _onAfterViewRender() {
   const {
     view,
     rootWrapperElement,
@@ -483,7 +599,7 @@ function _onAfterRender() {
   const dialogInfo = rootWrapperElement.querySelector('.hot-display-license-info');
   if (dialogInfo) {
     const height = dialogInfo.offsetHeight;
-    const marginTop = parseFloat(rootWindow.getComputedStyle(dialogInfo).marginTop);
+    const marginTop = Number.parseFloat(rootWindow.getComputedStyle(dialogInfo).marginTop);
     _classPrivateFieldGet(_ui, this).updateHeight(height + marginTop);
   }
 }