handsontable 0.0.0-next-f86a877-20250819 → 0.0.0-next-fce5825-20250822

package/dataMap/metaManager/metaSchema.js

@@ -1797,6 +1797,101 @@ var _default = () => {
      * ```
      */
     disableVisualSelection: false,
+    /**
+     * @description
+     * The `dialog` option configures the [`Dialog`](@/api/dialog.md) plugin.
+     *
+     * You can set the `dialog` option to one of the following:
+     *
+     * | Setting   | Description                                                                 |
+     * | --------- | --------------------------------------------------------------------------- |
+     * | `false`   | Disable the [`Dialog`](@/api/dialog.md) plugin                              |
+     * | `true`    | Enable the [`Dialog`](@/api/dialog.md) plugin with default options          |
+     *
+     * ##### dialog: Additional options
+     *
+     * | Option                   | Possible settings                                                                                      | Description                             |
+     * | ------------------------ | ------------------------------------------------------------------------------------------------------ | ----------------------------------------|
+     * | `content`                | A string, HTMLElement or DocumentFragment (default: `''`)                                              | The content of the dialog               |
+     * | `customClassName`        | A string (default: `''`)                                                                               | The custom class name of the dialog     |
+     * | `background`             | One of the options: `'solid'` or `'semi-transparent'` (default: `'solid'`)                             | The background of the dialog            |
+     * | `contentBackground`      | Boolean (default: `false`)                                                                             | Whether to show the content background  |
+     * | `contentDirections`      | One of the options: `'row'` or `'row-reverse'` or `'column'` or `'column-reverse'` (default: `'row'`)  | The direction of the content            |
+     * | `animation`              | Boolean (default: `true`)                                                                              | Whether to show the animation           |
+     * | `closable`               | Boolean (default: `false`)                                                                             | Whether to show the close button        |
+     *
+     * Read more:
+     * - [Plugins: `Dialog`](@/api/dialog.md)
+     *
+     * @since 16.1.0
+     * @memberof Options#
+     * @type {boolean|object}
+     * @default false
+     * @category Dialog
+     *
+     * @example
+     * ::: only-for javascript
+     * ```js
+     * // enable the Dialog plugin with default option
+     * dialog: true,
+     *
+     * // enable the Dialog plugin with custom configuration
+     * dialog: {
+     *   content: 'Dialog content',
+     *   customClassName: 'custom-dialog',
+     *   background: 'semi-transparent',
+     *   contentBackground: false,
+     *   contentDirections: 'column',
+     *   animation: false,
+     *   closable: true,
+     * }
+     * ```
+     * :::
+     *
+     * ::: only-for react
+     * ```jsx
+     * // enable the Dialog plugin with default option
+     * <HotTable
+     *   dialog={true}
+     * />
+     *
+     * // enable the Dialog plugin with custom configuration
+     * <HotTable
+     *   dialog={{
+     *     content: 'Dialog content',
+     *     customClassName: 'custom-dialog',
+     *     background: 'semi-transparent',
+     *     contentBackground: false,
+     *     contentDirections: 'column',
+     *     animation: false,
+     *     closable: true,
+     *   }}
+     * />
+     * ```
+     * :::
+     *
+     * ::: only-for angular
+     * ```ts
+     * settings = {
+     *   dialog: {
+     *     content: 'Dialog content',
+     *     customClassName: 'custom-dialog',
+     *     background: 'semi-transparent',
+     *     contentBackground: false,
+     *     contentDirections: 'column',
+     *     animation: false,
+     *     closable: true,
+     *   }
+     * };
+     * ```
+     *
+     * ```html
+     * <hot-table [settings]="settings" />
+     * ```
+     * :::
+     *
+     */
+    dialog: false,
     /**
      * @description
      * The `dragToScroll` option configures the [`DragToScroll`](@/api/dragToScroll.md) plugin.

package/dataMap/metaManager/metaSchema.mjs

@@ -1794,6 +1794,101 @@ export default () => {
      * ```
      */
     disableVisualSelection: false,
+    /**
+     * @description
+     * The `dialog` option configures the [`Dialog`](@/api/dialog.md) plugin.
+     *
+     * You can set the `dialog` option to one of the following:
+     *
+     * | Setting   | Description                                                                 |
+     * | --------- | --------------------------------------------------------------------------- |
+     * | `false`   | Disable the [`Dialog`](@/api/dialog.md) plugin                              |
+     * | `true`    | Enable the [`Dialog`](@/api/dialog.md) plugin with default options          |
+     *
+     * ##### dialog: Additional options
+     *
+     * | Option                   | Possible settings                                                                                      | Description                             |
+     * | ------------------------ | ------------------------------------------------------------------------------------------------------ | ----------------------------------------|
+     * | `content`                | A string, HTMLElement or DocumentFragment (default: `''`)                                              | The content of the dialog               |
+     * | `customClassName`        | A string (default: `''`)                                                                               | The custom class name of the dialog     |
+     * | `background`             | One of the options: `'solid'` or `'semi-transparent'` (default: `'solid'`)                             | The background of the dialog            |
+     * | `contentBackground`      | Boolean (default: `false`)                                                                             | Whether to show the content background  |
+     * | `contentDirections`      | One of the options: `'row'` or `'row-reverse'` or `'column'` or `'column-reverse'` (default: `'row'`)  | The direction of the content            |
+     * | `animation`              | Boolean (default: `true`)                                                                              | Whether to show the animation           |
+     * | `closable`               | Boolean (default: `false`)                                                                             | Whether to show the close button        |
+     *
+     * Read more:
+     * - [Plugins: `Dialog`](@/api/dialog.md)
+     *
+     * @since 16.1.0
+     * @memberof Options#
+     * @type {boolean|object}
+     * @default false
+     * @category Dialog
+     *
+     * @example
+     * ::: only-for javascript
+     * ```js
+     * // enable the Dialog plugin with default option
+     * dialog: true,
+     *
+     * // enable the Dialog plugin with custom configuration
+     * dialog: {
+     *   content: 'Dialog content',
+     *   customClassName: 'custom-dialog',
+     *   background: 'semi-transparent',
+     *   contentBackground: false,
+     *   contentDirections: 'column',
+     *   animation: false,
+     *   closable: true,
+     * }
+     * ```
+     * :::
+     *
+     * ::: only-for react
+     * ```jsx
+     * // enable the Dialog plugin with default option
+     * <HotTable
+     *   dialog={true}
+     * />
+     *
+     * // enable the Dialog plugin with custom configuration
+     * <HotTable
+     *   dialog={{
+     *     content: 'Dialog content',
+     *     customClassName: 'custom-dialog',
+     *     background: 'semi-transparent',
+     *     contentBackground: false,
+     *     contentDirections: 'column',
+     *     animation: false,
+     *     closable: true,
+     *   }}
+     * />
+     * ```
+     * :::
+     *
+     * ::: only-for angular
+     * ```ts
+     * settings = {
+     *   dialog: {
+     *     content: 'Dialog content',
+     *     customClassName: 'custom-dialog',
+     *     background: 'semi-transparent',
+     *     contentBackground: false,
+     *     contentDirections: 'column',
+     *     animation: false,
+     *     closable: true,
+     *   }
+     * };
+     * ```
+     *
+     * ```html
+     * <hot-table [settings]="settings" />
+     * ```
+     * :::
+     *
+     */
+    dialog: false,
     /**
      * @description
      * The `dragToScroll` option configures the [`DragToScroll`](@/api/dragToScroll.md) plugin.

package/dist/handsontable.css

@@ -26,8 +26,8 @@
  * INDIRECT, SPECIAL, INCIDENTAL, OR CONSEQUENTIAL DAMAGES OF ANY CHARACTER ARISING FROM
  * USE OR INABILITY TO USE THIS SOFTWARE.
  *
- * Version: 0.0.0-next-f86a877-20250819
- * Release date: 10/07/2025 (built at 19/08/2025 13:13:12)
+ * Version: 0.0.0-next-fce5825-20250822
+ * Release date: 10/07/2025 (built at 22/08/2025 10:30:25)
  */
 /**
  * Fix for bootstrap styles
@@ -2100,10 +2100,108 @@ thead th.hiddenHeaderText .colHeader {
 }
 
 .ht-root-wrapper {
+  position: relative;
+  display: flex;
+  flex-direction: column;
   height: 100%;
 }
 
-.ht-root-wrapper .ht-pagination-container {
+.ht-grid {
+  flex: 1 1 auto;
+  min-height: 0;
+}
+
+.ht-dialog {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: none;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Helvetica Neue", Arial, sans-serif;
+  font-size: 13px;
+  width: 100%;
+  height: 100%;
+  z-index: 1060;
+  opacity: 0;
+  overflow-y: auto;
+  border: 1px solid #ccc;
+  box-sizing: border-box !important;
+}
+
+.ht-dialog[dir=rtl] {
+  left: auto;
+  right: 0
+}
+
+.ht-dialog:has(.htFocusCatcher:focus) {
+  border: 1px solid var(--ht-accent-color);
+  outline: none
+}
+
+.ht-dialog * {
+  box-sizing: border-box !important;
+}
+
+.ht-dialog--background-solid {
+  background-color: #fff;
+}
+
+.ht-dialog--background-semi-transparent {
+  background-color: rgba(255, 255, 255, 0.5);
+}
+
+.ht-dialog--animation {
+  transition: opacity 0.15s ease-in-out;
+}
+
+.ht-dialog--show {
+  opacity: 1;
+}
+
+.ht-dialog__content-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  min-height: 100%;
+  padding: 16px;
+}
+
+.ht-dialog__content-wrapper:focus {
+  border: 1px solid #4b89ff;
+  outline: none;
+}
+
+.ht-dialog__content {
+  position: relative;
+  padding: 8px;
+  display: flex;
+  gap: 8px;
+  max-width: 480px;
+  color: #222;
+}
+
+.ht-dialog__content--background {
+  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
+  background-color: #f7f7f9;
+}
+
+.ht-dialog__content--flex-row {
+  flex-direction: row;
+}
+
+.ht-dialog__content--flex-row-reverse {
+  flex-direction: row-reverse;
+}
+
+.ht-dialog__content--flex-column {
+  flex-direction: column;
+}
+
+.ht-dialog__content--flex-column-reverse {
+  flex-direction: column-reverse;
+}
+
+.ht-root-wrapper .ht-pagination {
   color: #222;
   background: #f0f0f0;
   border: 1px solid #ccc;
@@ -2115,7 +2213,7 @@ thead th.hiddenHeaderText .colHeader {
   overflow-x: auto;
 }
 
-.ht-root-wrapper .ht-pagination-container__inner {
+.ht-root-wrapper .ht-pagination__inner {
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -2126,7 +2224,7 @@ thead th.hiddenHeaderText .colHeader {
   min-width: 230px;
 }
 
-.ht-root-wrapper .ht-pagination-container--bordered {
+.ht-root-wrapper .ht-pagination--bordered {
   border-top-color: #ccc;
 }
 

package/dist/handsontable.full.css

@@ -26,8 +26,8 @@
  * INDIRECT, SPECIAL, INCIDENTAL, OR CONSEQUENTIAL DAMAGES OF ANY CHARACTER ARISING FROM
  * USE OR INABILITY TO USE THIS SOFTWARE.
  *
- * Version: 0.0.0-next-f86a877-20250819
- * Release date: 10/07/2025 (built at 19/08/2025 13:13:12)
+ * Version: 0.0.0-next-fce5825-20250822
+ * Release date: 10/07/2025 (built at 22/08/2025 10:30:25)
  */
 /**
  * Fix for bootstrap styles
@@ -2100,10 +2100,108 @@ thead th.hiddenHeaderText .colHeader {
 }
 
 .ht-root-wrapper {
+  position: relative;
+  display: flex;
+  flex-direction: column;
   height: 100%;
 }
 
-.ht-root-wrapper .ht-pagination-container {
+.ht-grid {
+  flex: 1 1 auto;
+  min-height: 0;
+}
+
+.ht-dialog {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: none;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Helvetica Neue", Arial, sans-serif;
+  font-size: 13px;
+  width: 100%;
+  height: 100%;
+  z-index: 1060;
+  opacity: 0;
+  overflow-y: auto;
+  border: 1px solid #ccc;
+  box-sizing: border-box !important;
+}
+
+.ht-dialog[dir=rtl] {
+  left: auto;
+  right: 0
+}
+
+.ht-dialog:has(.htFocusCatcher:focus) {
+  border: 1px solid var(--ht-accent-color);
+  outline: none
+}
+
+.ht-dialog * {
+  box-sizing: border-box !important;
+}
+
+.ht-dialog--background-solid {
+  background-color: #fff;
+}
+
+.ht-dialog--background-semi-transparent {
+  background-color: rgba(255, 255, 255, 0.5);
+}
+
+.ht-dialog--animation {
+  transition: opacity 0.15s ease-in-out;
+}
+
+.ht-dialog--show {
+  opacity: 1;
+}
+
+.ht-dialog__content-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  min-height: 100%;
+  padding: 16px;
+}
+
+.ht-dialog__content-wrapper:focus {
+  border: 1px solid #4b89ff;
+  outline: none;
+}
+
+.ht-dialog__content {
+  position: relative;
+  padding: 8px;
+  display: flex;
+  gap: 8px;
+  max-width: 480px;
+  color: #222;
+}
+
+.ht-dialog__content--background {
+  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
+  background-color: #f7f7f9;
+}
+
+.ht-dialog__content--flex-row {
+  flex-direction: row;
+}
+
+.ht-dialog__content--flex-row-reverse {
+  flex-direction: row-reverse;
+}
+
+.ht-dialog__content--flex-column {
+  flex-direction: column;
+}
+
+.ht-dialog__content--flex-column-reverse {
+  flex-direction: column-reverse;
+}
+
+.ht-root-wrapper .ht-pagination {
   color: #222;
   background: #f0f0f0;
   border: 1px solid #ccc;
@@ -2115,7 +2213,7 @@ thead th.hiddenHeaderText .colHeader {
   overflow-x: auto;
 }
 
-.ht-root-wrapper .ht-pagination-container__inner {
+.ht-root-wrapper .ht-pagination__inner {
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -2126,7 +2224,7 @@ thead th.hiddenHeaderText .colHeader {
   min-width: 230px;
 }
 
-.ht-root-wrapper .ht-pagination-container--bordered {
+.ht-root-wrapper .ht-pagination--bordered {
   border-top-color: #ccc;
 }