handsontable 16.1.1 → 16.2.0-next-216dbd0-20251112

package/plugins/dialog/templates/confirm.mjs

@@ -0,0 +1,102 @@
+import "core-js/modules/es.error.cause.js";
+import "core-js/modules/es.array.push.js";
+import "core-js/modules/esnext.iterator.constructor.js";
+import "core-js/modules/esnext.iterator.map.js";
+import { DIALOG_CLASS_NAME } from "../constants.mjs";
+import { stripTags } from "../../../helpers/string.mjs";
+import { html } from "../../../helpers/templateLiteralTag.mjs";
+/**
+ * The `confirmTemplate` function returns a HTML string with the confirm template.
+ *
+ * @param {object} vars The variables to use for the template.
+ * @param {string} vars.id The ID of the confirm.
+ * @param {string} vars.title The title of the confirm.
+ * @param {string} vars.description The description of the confirm.
+ * @param {object[]} vars.buttons The buttons to display in the confirm.
+ *   - `text`: The text of the button.
+ *   - `type`: The type of the button ('primary' | 'secondary').
+ *   - `callback`: The callback to trigger when the button is clicked.
+ * @returns {string} HTML string with the confirm template.
+ */
+export function confirmTemplate(_ref) {
+  let {
+    id = '',
+    title = '',
+    description = '',
+    buttons = []
+  } = _ref;
+  /**
+   * Returns the HTML string for the template.
+   *
+   * @returns {string}
+   */
+  function template() {
+    return `
+      <div tabindex="-1" data-ref="contentElement" class="${DIALOG_CLASS_NAME}__content-wrapper-inner">
+        <div class="${DIALOG_CLASS_NAME}__content">
+          <h2
+            id="${id}-dialog-confirm-title"
+            class="${DIALOG_CLASS_NAME}__title">${stripTags(title)}</h2>
+          <p
+            id="${id}-dialog-confirm-description"
+            class="${DIALOG_CLASS_NAME}__description">${stripTags(description)}</p>
+        </div>
+        ${buttons.length > 0 ? `
+          <div data-ref="buttonsContainer" class="${DIALOG_CLASS_NAME}__buttons">
+            ${buttons.map(button => `
+              <button class="ht-button ht-button--${button.type}">${stripTags(button.text)}</button>
+            `).join('')}
+          </div>
+        ` : ''}
+      </div>
+    `;
+  }
+  let fragment = null;
+  const refs = {};
+
+  /**
+   * Compiles the template.
+   *
+   * @returns {object} The compiled template.
+   */
+  function compile() {
+    const elements = html`${template()}`;
+    Object.assign(refs, elements.refs);
+    fragment = elements.fragment;
+    return elements;
+  }
+
+  /**
+   * Gets the focusable elements of the template.
+   *
+   * @returns {HTMLElement[]} The focusable elements.
+   */
+  function focusableElements() {
+    if (fragment === null) {
+      throw new Error('Compile the template first.');
+    }
+    const {
+      contentElement,
+      buttonsContainer
+    } = refs;
+    const elements = [];
+    if (buttonsContainer) {
+      elements.push(...Array.from(buttonsContainer.children));
+    } else {
+      elements.push(contentElement);
+    }
+    return elements;
+  }
+  return {
+    TEMPLATE_NAME: 'confirm',
+    dialogA11YOptions() {
+      return {
+        role: 'alertdialog',
+        ariaLabelledby: `${id}-dialog-confirm-title`,
+        ariaDescribedby: description ? `${id}-dialog-confirm-description` : undefined
+      };
+    },
+    compile,
+    focusableElements
+  };
+}

package/plugins/dialog/templates/index.js

@@ -0,0 +1,6 @@
+"use strict";
+
+exports.__esModule = true;
+var _base = require("./base");
+var _confirm = require("./confirm");
+const TEMPLATES = exports.TEMPLATES = new Map([['base', _base.baseTemplate], ['confirm', _confirm.confirmTemplate]]);

package/plugins/dialog/templates/index.mjs

@@ -0,0 +1,4 @@
+import { baseTemplate } from "./base.mjs";
+import { confirmTemplate } from "./confirm.mjs";
+const TEMPLATES = new Map([['base', baseTemplate], ['confirm', confirmTemplate]]);
+export { TEMPLATES };

package/plugins/dialog/ui.js

@@ -2,23 +2,27 @@
 
 exports.__esModule = true;
 require("core-js/modules/es.error.cause.js");
+require("core-js/modules/esnext.iterator.constructor.js");
+require("core-js/modules/esnext.iterator.filter.js");
+require("core-js/modules/esnext.iterator.for-each.js");
+require("core-js/modules/esnext.iterator.map.js");
 var _templateLiteralTag = require("../../helpers/templateLiteralTag");
 var _object = require("../../helpers/object");
 var _localHooks = _interopRequireDefault(require("../../mixins/localHooks"));
 var _element = require("../../helpers/dom/element");
 var _a11y = require("../../helpers/a11y");
+var _templates = require("./templates");
+var _constants = require("./constants");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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"); }
 function _classPrivateFieldGet(s, a) { return s.get(_assertClassBrand(s, a)); }
 function _classPrivateFieldSet(s, a, r) { return s.set(_assertClassBrand(s, a), r), r; }
 function _assertClassBrand(e, t, n) { if ("function" == typeof e ? e === t : e.has(t)) return arguments.length < 3 ? t : n; throw new TypeError("Private element is not present on this object"); }
-const DIALOG_CLASS_NAME = 'ht-dialog';
-const TEMPLATE = `
-<div data-ref="dialogElement" class="${DIALOG_CLASS_NAME}">
-  <div data-ref="contentWrapperElement" class="${DIALOG_CLASS_NAME}__content-wrapper">
-    <div data-ref="contentElement" class="${DIALOG_CLASS_NAME}__content"></div>
-  </div>
+const CONTAINER_TEMPLATE = `
+<div data-ref="dialogElement" class="${_constants.DIALOG_CLASS_NAME}">
+  <div data-ref="dialogWrapperElement" class="${_constants.DIALOG_CLASS_NAME}__content-wrapper">
 </div>
 `;
 
@@ -32,12 +36,20 @@ const TEMPLATE = `
 var _rootElement = /*#__PURE__*/new WeakMap();
 var _refs = /*#__PURE__*/new WeakMap();
 var _isRtl = /*#__PURE__*/new WeakMap();
+var _animationStarted = /*#__PURE__*/new WeakMap();
+var _template = /*#__PURE__*/new WeakMap();
+var _templateButtonCallbacks = /*#__PURE__*/new WeakMap();
+var _DialogUI_brand = /*#__PURE__*/new WeakSet();
 class DialogUI {
   constructor(_ref) {
     let {
       rootElement,
       isRtl
     } = _ref;
+    /**
+     * Handles the transition end event.
+     */
+    _classPrivateMethodInitSpec(this, _DialogUI_brand);
     /**
      * The root element where the dialog UI will be installed.
      *
@@ -56,11 +68,55 @@ class DialogUI {
      * @type {boolean}
      */
     _classPrivateFieldInitSpec(this, _isRtl, false);
+    /**
+     * Indicates if the animation has started.
+     *
+     * @type {boolean}
+     */
+    _classPrivateFieldInitSpec(this, _animationStarted, false);
+    /**
+     * The template to use for the dialog.
+     *
+     * @type {function(): string}
+     */
+    _classPrivateFieldInitSpec(this, _template, _templates.TEMPLATES.get('base'));
+    /**
+     * The callbacks of the template buttons to trigger when the button is clicked.
+     *
+     * @type {Array<function(MouseEvent)>}
+     */
+    _classPrivateFieldInitSpec(this, _templateButtonCallbacks, []);
     _classPrivateFieldSet(_rootElement, this, rootElement);
     _classPrivateFieldSet(_isRtl, this, isRtl);
     this.install();
   }
 
+  /**
+   * Uses the specified template for the dialog.
+   *
+   * @param {string} templateName The name of the template to use.
+   * @param {object} templateVars The variables to use for the template.
+   */
+  useTemplate(templateName) {
+    var _templateVars$buttons;
+    let templateVars = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    if (!_templates.TEMPLATES.has(templateName) || templateName === 'base') {
+      const validTemplates = Array.from(_templates.TEMPLATES.keys()).filter(template => template !== 'base').join(', ');
+      throw new Error((0, _templateLiteralTag.toSingleLine)`Invalid template: ${templateName}.\x20
+        Valid templates are: ${validTemplates}.`);
+    }
+    _classPrivateFieldSet(_template, this, _templates.TEMPLATES.get(templateName)(templateVars));
+    _classPrivateFieldSet(_templateButtonCallbacks, this, ((_templateVars$buttons = templateVars.buttons) !== null && _templateVars$buttons !== void 0 ? _templateVars$buttons : []).map(button => button.callback));
+  }
+
+  /**
+   * Uses the default template for the dialog for the `content` option.
+   */
+  useDefaultTemplate() {
+    _classPrivateFieldSet(_template, this, _templates.TEMPLATES.get('base')());
+    _classPrivateFieldSet(_templateButtonCallbacks, this, []);
+  }
+
   /**
    * Creates the dialog UI elements and sets up the structure.
    */
@@ -69,15 +125,16 @@ class DialogUI {
     if ((_classPrivateFieldGet2 = _classPrivateFieldGet(_refs, this)) !== null && _classPrivateFieldGet2 !== void 0 && _classPrivateFieldGet2.dialogElement) {
       return;
     }
-    const elements = (0, _templateLiteralTag.html)`${TEMPLATE}`;
+    const elements = (0, _templateLiteralTag.html)`${CONTAINER_TEMPLATE}`;
     _classPrivateFieldSet(_refs, this, elements.refs);
     const {
       dialogElement
     } = _classPrivateFieldGet(_refs, this);
-    dialogElement.addEventListener('click', () => this.runLocalHooks('clickDialogElement'));
 
     // Set ARIA attributes
-    (0, _element.setAttribute)(dialogElement, [(0, _a11y.A11Y_MODAL)(), (0, _a11y.A11Y_TABINDEX)(-1), ['dir', _classPrivateFieldGet(_isRtl, this) ? 'rtl' : 'ltr']]);
+    (0, _element.setAttribute)(dialogElement, [(0, _a11y.A11Y_MODAL)(), ['dir', _classPrivateFieldGet(_isRtl, this) ? 'rtl' : 'ltr']]);
+    dialogElement.addEventListener('transitionstart', () => _assertClassBrand(_DialogUI_brand, this, _onTransitionStart).call(this));
+    dialogElement.addEventListener('transitionend', () => _assertClassBrand(_DialogUI_brand, this, _onTransitionEnd).call(this));
 
     // Append to Handsontable after table grid element
     _classPrivateFieldGet(_rootElement, this).after(elements.fragment);
@@ -88,18 +145,17 @@ class DialogUI {
    *
    * @returns {HTMLElement} The dialog element.
    */
-  getDialogElement() {
+  getContainer() {
     return _classPrivateFieldGet(_refs, this).dialogElement;
   }
 
   /**
-   * Checks if the given element is inside the dialog.
+   * Gets the focusable elements.
    *
-   * @param {HTMLElement} element - The element to check.
-   * @returns {boolean} Returns `true` if the element is inside the dialog, `false` otherwise.
+   * @returns {HTMLElement[]} The focusable elements.
    */
-  isInsideDialog(element) {
-    return _classPrivateFieldGet(_refs, this).dialogElement.contains(element);
+  getFocusableElements() {
+    return _classPrivateFieldGet(_template, this).focusableElements();
   }
 
   /**
@@ -126,19 +182,31 @@ class DialogUI {
       animation,
       a11y
     } = _ref2;
+    const elements = _classPrivateFieldGet(_template, this).compile();
     const {
       dialogElement,
-      contentElement
+      dialogWrapperElement
+    } = _classPrivateFieldGet(_refs, this);
+    dialogWrapperElement.innerHTML = '';
+    dialogWrapperElement.appendChild(elements.fragment);
+    Object.assign(_classPrivateFieldGet(_refs, this), elements.refs);
+    const {
+      contentElement,
+      buttonsContainer
     } = _classPrivateFieldGet(_refs, this);
+    if (_classPrivateFieldGet(_template, this).TEMPLATE_NAME !== 'base') {
+      Object.assign(a11y, _classPrivateFieldGet(_template, this).dialogA11YOptions());
+    }
 
     // Dialog class name
     const customClass = customClassName ? ` ${customClassName}` : '';
-    const backgroundClass = background ? ` ${DIALOG_CLASS_NAME}--background-${background}` : '';
-    const animationClass = animation ? ` ${DIALOG_CLASS_NAME}--animation` : '';
-    const showClass = isVisible ? ` ${DIALOG_CLASS_NAME}--show` : '';
+    const backgroundClass = background ? ` ${_constants.DIALOG_CLASS_NAME}--background-${background}` : '';
+    const animationClass = animation ? ` ${_constants.DIALOG_CLASS_NAME}--animation` : '';
+    const showClass = isVisible ? ` ${_constants.DIALOG_CLASS_NAME}--show` : '';
 
     // Update dialog class name
-    dialogElement.className = `${DIALOG_CLASS_NAME}${customClass}${backgroundClass}${animationClass}${showClass}`;
+    dialogElement.className = [_constants.DIALOG_CLASS_NAME, `${_constants.DIALOG_CLASS_NAME}--${_classPrivateFieldGet(_template, this).TEMPLATE_NAME}`, 'handsontable', customClass, backgroundClass, animationClass, showClass].join(' ');
+    (0, _element.setAttribute)(dialogElement, [_classPrivateFieldGet(_template, this).TEMPLATE_NAME === 'base' ? (0, _a11y.A11Y_TABINDEX)(-1) : undefined]);
 
     // Dialog aria attributes
     (0, _element.setAttribute)(dialogElement, [a11y.role === 'alertdialog' ? (0, _a11y.A11Y_ALERTDIALOG)() : (0, _a11y.A11Y_DIALOG)()]);
@@ -159,19 +227,27 @@ class DialogUI {
     }
 
     // Dialog content class name
-    const contentBackgroundClass = contentBackground ? ` ${DIALOG_CLASS_NAME}__content--background` : '';
+    const contentBackgroundClass = contentBackground ? ` ${_constants.DIALOG_CLASS_NAME}__content--background` : '';
 
     // Update content class name
-    contentElement.className = `${DIALOG_CLASS_NAME}__content${contentBackgroundClass}`;
-
-    // Clear existing dialog content
-    contentElement.innerHTML = '';
+    (0, _element.addClass)(contentElement, `${_constants.DIALOG_CLASS_NAME}__content${contentBackgroundClass}`);
+    if (_classPrivateFieldGet(_template, this).TEMPLATE_NAME === 'base') {
+      // Clear existing dialog content
+      contentElement.innerHTML = '';
 
-    // Render new dialog content
-    if (typeof content === 'string') {
-      (0, _element.fastInnerHTML)(contentElement, content);
-    } else if (content instanceof HTMLElement || content instanceof DocumentFragment) {
-      contentElement.appendChild(content);
+      // Render new dialog content
+      if (typeof content === 'string') {
+        (0, _element.fastInnerHTML)(contentElement, content);
+      } else if (content instanceof HTMLElement || content instanceof DocumentFragment) {
+        contentElement.appendChild(content);
+      }
+    } else if (buttonsContainer) {
+      Array.from(buttonsContainer.children).forEach((button, index) => {
+        const callback = _classPrivateFieldGet(_templateButtonCallbacks, this)[index];
+        if (callback) {
+          button.addEventListener('click', callback);
+        }
+      });
     }
     return this;
   }
@@ -193,7 +269,8 @@ class DialogUI {
       // eslint-disable-next-line no-unused-expressions
       dialogElement.offsetHeight;
     }
-    (0, _element.addClass)(dialogElement, `${DIALOG_CLASS_NAME}--show`);
+    (0, _element.addClass)(dialogElement, `${_constants.DIALOG_CLASS_NAME}--show`);
+    _classPrivateFieldSet(_animationStarted, this, false);
     return this;
   }
 
@@ -207,18 +284,11 @@ class DialogUI {
     const {
       dialogElement
     } = _classPrivateFieldGet(_refs, this);
-    (0, _element.removeClass)(dialogElement, `${DIALOG_CLASS_NAME}--show`);
-    if (animation) {
-      dialogElement.addEventListener('transitionend', () => {
-        if (!(0, _element.hasClass)(dialogElement, `${DIALOG_CLASS_NAME}--show`)) {
-          dialogElement.style.display = 'none';
-        }
-      }, {
-        once: true
-      });
-    } else {
+    (0, _element.removeClass)(dialogElement, `${_constants.DIALOG_CLASS_NAME}--show`);
+    if (animation && !_classPrivateFieldGet(_animationStarted, this) || !animation) {
       dialogElement.style.display = 'none';
     }
+    _classPrivateFieldSet(_animationStarted, this, false);
     return this;
   }
 
@@ -261,4 +331,18 @@ class DialogUI {
   }
 }
 exports.DialogUI = DialogUI;
+function _onTransitionEnd() {
+  const {
+    dialogElement
+  } = _classPrivateFieldGet(_refs, this);
+  if (!(0, _element.hasClass)(dialogElement, `${_constants.DIALOG_CLASS_NAME}--show`)) {
+    dialogElement.style.display = 'none';
+  }
+}
+/**
+ * Handles the transition start event. This is used to track if the animation has started.
+ */
+function _onTransitionStart() {
+  _classPrivateFieldSet(_animationStarted, this, true);
+}
 (0, _object.mixin)(DialogUI, _localHooks.default);

package/plugins/dialog/ui.mjs

@@ -1,20 +1,24 @@
 import "core-js/modules/es.error.cause.js";
+import "core-js/modules/esnext.iterator.constructor.js";
+import "core-js/modules/esnext.iterator.filter.js";
+import "core-js/modules/esnext.iterator.for-each.js";
+import "core-js/modules/esnext.iterator.map.js";
+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"); }
 function _classPrivateFieldGet(s, a) { return s.get(_assertClassBrand(s, a)); }
 function _classPrivateFieldSet(s, a, r) { return s.set(_assertClassBrand(s, a), r), r; }
 function _assertClassBrand(e, t, n) { if ("function" == typeof e ? e === t : e.has(t)) return arguments.length < 3 ? t : n; throw new TypeError("Private element is not present on this object"); }
-import { html } from "../../helpers/templateLiteralTag.mjs";
+import { html, toSingleLine } from "../../helpers/templateLiteralTag.mjs";
 import { mixin } from "../../helpers/object.mjs";
 import localHooks from "../../mixins/localHooks.mjs";
 import { addClass, removeClass, hasClass, fastInnerHTML, setAttribute, removeAttribute } from "../../helpers/dom/element.mjs";
 import { A11Y_DIALOG, A11Y_MODAL, A11Y_TABINDEX, A11Y_LABEL, A11Y_LABELED_BY, A11Y_DESCRIBED_BY, A11Y_ALERTDIALOG } from "../../helpers/a11y.mjs";
-const DIALOG_CLASS_NAME = 'ht-dialog';
-const TEMPLATE = `
+import { TEMPLATES } from "./templates/index.mjs";
+import { DIALOG_CLASS_NAME } from "./constants.mjs";
+const CONTAINER_TEMPLATE = `
 <div data-ref="dialogElement" class="${DIALOG_CLASS_NAME}">
-  <div data-ref="contentWrapperElement" class="${DIALOG_CLASS_NAME}__content-wrapper">
-    <div data-ref="contentElement" class="${DIALOG_CLASS_NAME}__content"></div>
-  </div>
+  <div data-ref="dialogWrapperElement" class="${DIALOG_CLASS_NAME}__content-wrapper">
 </div>
 `;
 
@@ -28,12 +32,20 @@ const TEMPLATE = `
 var _rootElement = /*#__PURE__*/new WeakMap();
 var _refs = /*#__PURE__*/new WeakMap();
 var _isRtl = /*#__PURE__*/new WeakMap();
+var _animationStarted = /*#__PURE__*/new WeakMap();
+var _template = /*#__PURE__*/new WeakMap();
+var _templateButtonCallbacks = /*#__PURE__*/new WeakMap();
+var _DialogUI_brand = /*#__PURE__*/new WeakSet();
 export class DialogUI {
   constructor(_ref) {
     let {
       rootElement,
       isRtl
     } = _ref;
+    /**
+     * Handles the transition end event.
+     */
+    _classPrivateMethodInitSpec(this, _DialogUI_brand);
     /**
      * The root element where the dialog UI will be installed.
      *
@@ -52,11 +64,55 @@ export class DialogUI {
      * @type {boolean}
      */
     _classPrivateFieldInitSpec(this, _isRtl, false);
+    /**
+     * Indicates if the animation has started.
+     *
+     * @type {boolean}
+     */
+    _classPrivateFieldInitSpec(this, _animationStarted, false);
+    /**
+     * The template to use for the dialog.
+     *
+     * @type {function(): string}
+     */
+    _classPrivateFieldInitSpec(this, _template, TEMPLATES.get('base'));
+    /**
+     * The callbacks of the template buttons to trigger when the button is clicked.
+     *
+     * @type {Array<function(MouseEvent)>}
+     */
+    _classPrivateFieldInitSpec(this, _templateButtonCallbacks, []);
     _classPrivateFieldSet(_rootElement, this, rootElement);
     _classPrivateFieldSet(_isRtl, this, isRtl);
     this.install();
   }
 
+  /**
+   * Uses the specified template for the dialog.
+   *
+   * @param {string} templateName The name of the template to use.
+   * @param {object} templateVars The variables to use for the template.
+   */
+  useTemplate(templateName) {
+    var _templateVars$buttons;
+    let templateVars = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    if (!TEMPLATES.has(templateName) || templateName === 'base') {
+      const validTemplates = Array.from(TEMPLATES.keys()).filter(template => template !== 'base').join(', ');
+      throw new Error(toSingleLine`Invalid template: ${templateName}.\x20
+        Valid templates are: ${validTemplates}.`);
+    }
+    _classPrivateFieldSet(_template, this, TEMPLATES.get(templateName)(templateVars));
+    _classPrivateFieldSet(_templateButtonCallbacks, this, ((_templateVars$buttons = templateVars.buttons) !== null && _templateVars$buttons !== void 0 ? _templateVars$buttons : []).map(button => button.callback));
+  }
+
+  /**
+   * Uses the default template for the dialog for the `content` option.
+   */
+  useDefaultTemplate() {
+    _classPrivateFieldSet(_template, this, TEMPLATES.get('base')());
+    _classPrivateFieldSet(_templateButtonCallbacks, this, []);
+  }
+
   /**
    * Creates the dialog UI elements and sets up the structure.
    */
@@ -65,15 +121,16 @@ export class DialogUI {
     if ((_classPrivateFieldGet2 = _classPrivateFieldGet(_refs, this)) !== null && _classPrivateFieldGet2 !== void 0 && _classPrivateFieldGet2.dialogElement) {
       return;
     }
-    const elements = html`${TEMPLATE}`;
+    const elements = html`${CONTAINER_TEMPLATE}`;
     _classPrivateFieldSet(_refs, this, elements.refs);
     const {
       dialogElement
     } = _classPrivateFieldGet(_refs, this);
-    dialogElement.addEventListener('click', () => this.runLocalHooks('clickDialogElement'));
 
     // Set ARIA attributes
-    setAttribute(dialogElement, [A11Y_MODAL(), A11Y_TABINDEX(-1), ['dir', _classPrivateFieldGet(_isRtl, this) ? 'rtl' : 'ltr']]);
+    setAttribute(dialogElement, [A11Y_MODAL(), ['dir', _classPrivateFieldGet(_isRtl, this) ? 'rtl' : 'ltr']]);
+    dialogElement.addEventListener('transitionstart', () => _assertClassBrand(_DialogUI_brand, this, _onTransitionStart).call(this));
+    dialogElement.addEventListener('transitionend', () => _assertClassBrand(_DialogUI_brand, this, _onTransitionEnd).call(this));
 
     // Append to Handsontable after table grid element
     _classPrivateFieldGet(_rootElement, this).after(elements.fragment);
@@ -84,18 +141,17 @@ export class DialogUI {
    *
    * @returns {HTMLElement} The dialog element.
    */
-  getDialogElement() {
+  getContainer() {
     return _classPrivateFieldGet(_refs, this).dialogElement;
   }
 
   /**
-   * Checks if the given element is inside the dialog.
+   * Gets the focusable elements.
    *
-   * @param {HTMLElement} element - The element to check.
-   * @returns {boolean} Returns `true` if the element is inside the dialog, `false` otherwise.
+   * @returns {HTMLElement[]} The focusable elements.
    */
-  isInsideDialog(element) {
-    return _classPrivateFieldGet(_refs, this).dialogElement.contains(element);
+  getFocusableElements() {
+    return _classPrivateFieldGet(_template, this).focusableElements();
   }
 
   /**
@@ -122,10 +178,21 @@ export class DialogUI {
       animation,
       a11y
     } = _ref2;
+    const elements = _classPrivateFieldGet(_template, this).compile();
     const {
       dialogElement,
-      contentElement
+      dialogWrapperElement
+    } = _classPrivateFieldGet(_refs, this);
+    dialogWrapperElement.innerHTML = '';
+    dialogWrapperElement.appendChild(elements.fragment);
+    Object.assign(_classPrivateFieldGet(_refs, this), elements.refs);
+    const {
+      contentElement,
+      buttonsContainer
     } = _classPrivateFieldGet(_refs, this);
+    if (_classPrivateFieldGet(_template, this).TEMPLATE_NAME !== 'base') {
+      Object.assign(a11y, _classPrivateFieldGet(_template, this).dialogA11YOptions());
+    }
 
     // Dialog class name
     const customClass = customClassName ? ` ${customClassName}` : '';
@@ -134,7 +201,8 @@ export class DialogUI {
     const showClass = isVisible ? ` ${DIALOG_CLASS_NAME}--show` : '';
 
     // Update dialog class name
-    dialogElement.className = `${DIALOG_CLASS_NAME}${customClass}${backgroundClass}${animationClass}${showClass}`;
+    dialogElement.className = [DIALOG_CLASS_NAME, `${DIALOG_CLASS_NAME}--${_classPrivateFieldGet(_template, this).TEMPLATE_NAME}`, 'handsontable', customClass, backgroundClass, animationClass, showClass].join(' ');
+    setAttribute(dialogElement, [_classPrivateFieldGet(_template, this).TEMPLATE_NAME === 'base' ? A11Y_TABINDEX(-1) : undefined]);
 
     // Dialog aria attributes
     setAttribute(dialogElement, [a11y.role === 'alertdialog' ? A11Y_ALERTDIALOG() : A11Y_DIALOG()]);
@@ -158,16 +226,24 @@ export class DialogUI {
     const contentBackgroundClass = contentBackground ? ` ${DIALOG_CLASS_NAME}__content--background` : '';
 
     // Update content class name
-    contentElement.className = `${DIALOG_CLASS_NAME}__content${contentBackgroundClass}`;
-
-    // Clear existing dialog content
-    contentElement.innerHTML = '';
+    addClass(contentElement, `${DIALOG_CLASS_NAME}__content${contentBackgroundClass}`);
+    if (_classPrivateFieldGet(_template, this).TEMPLATE_NAME === 'base') {
+      // Clear existing dialog content
+      contentElement.innerHTML = '';
 
-    // Render new dialog content
-    if (typeof content === 'string') {
-      fastInnerHTML(contentElement, content);
-    } else if (content instanceof HTMLElement || content instanceof DocumentFragment) {
-      contentElement.appendChild(content);
+      // Render new dialog content
+      if (typeof content === 'string') {
+        fastInnerHTML(contentElement, content);
+      } else if (content instanceof HTMLElement || content instanceof DocumentFragment) {
+        contentElement.appendChild(content);
+      }
+    } else if (buttonsContainer) {
+      Array.from(buttonsContainer.children).forEach((button, index) => {
+        const callback = _classPrivateFieldGet(_templateButtonCallbacks, this)[index];
+        if (callback) {
+          button.addEventListener('click', callback);
+        }
+      });
     }
     return this;
   }
@@ -190,6 +266,7 @@ export class DialogUI {
       dialogElement.offsetHeight;
     }
     addClass(dialogElement, `${DIALOG_CLASS_NAME}--show`);
+    _classPrivateFieldSet(_animationStarted, this, false);
     return this;
   }
 
@@ -204,17 +281,10 @@ export class DialogUI {
       dialogElement
     } = _classPrivateFieldGet(_refs, this);
     removeClass(dialogElement, `${DIALOG_CLASS_NAME}--show`);
-    if (animation) {
-      dialogElement.addEventListener('transitionend', () => {
-        if (!hasClass(dialogElement, `${DIALOG_CLASS_NAME}--show`)) {
-          dialogElement.style.display = 'none';
-        }
-      }, {
-        once: true
-      });
-    } else {
+    if (animation && !_classPrivateFieldGet(_animationStarted, this) || !animation) {
       dialogElement.style.display = 'none';
     }
+    _classPrivateFieldSet(_animationStarted, this, false);
     return this;
   }
 
@@ -256,4 +326,18 @@ export class DialogUI {
     _classPrivateFieldSet(_refs, this, null);
   }
 }
+function _onTransitionEnd() {
+  const {
+    dialogElement
+  } = _classPrivateFieldGet(_refs, this);
+  if (!hasClass(dialogElement, `${DIALOG_CLASS_NAME}--show`)) {
+    dialogElement.style.display = 'none';
+  }
+}
+/**
+ * Handles the transition start event. This is used to track if the animation has started.
+ */
+function _onTransitionStart() {
+  _classPrivateFieldSet(_animationStarted, this, true);
+}
 mixin(DialogUI, localHooks);