handsontable 0.0.0-next-2c41c5b-20250814 → 0.0.0-next-fce5825-20250822

package/dataMap/metaManager/lazyFactoryMap.js

@@ -13,7 +13,6 @@ require("core-js/modules/es.set.union.v2.js");
 require("core-js/modules/esnext.iterator.constructor.js");
 require("core-js/modules/esnext.iterator.filter.js");
 var _utils = require("./utils");
-var _number = require("../../helpers/number");
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
@@ -180,7 +179,7 @@ class LazyFactoryMap {
    * @returns {*}
    */
   obtain(key) {
-    (0, _utils.assert)(() => (0, _number.isUnsignedNumber)(key), 'Expecting an unsigned number.');
+    (0, _utils.assert)(() => (0, _utils.isUnsignedNumber)(key), 'Expecting an unsigned number.');
     const dataIndex = this._getStorageIndexByKey(key);
     let result;
     if (dataIndex >= 0) {
@@ -214,7 +213,7 @@ class LazyFactoryMap {
    */
   insert(key) {
     let amount = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
-    (0, _utils.assert)(() => (0, _number.isUnsignedNumber)(key) || (0, _utils.isNullish)(key), 'Expecting an unsigned number or null/undefined argument.');
+    (0, _utils.assert)(() => (0, _utils.isUnsignedNumber)(key) || (0, _utils.isNullish)(key), 'Expecting an unsigned number or null/undefined argument.');
     const newIndexes = [];
     const dataLength = this.data.length;
     for (let i = 0; i < amount; i++) {
@@ -233,7 +232,7 @@ class LazyFactoryMap {
    */
   remove(key) {
     let amount = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
-    (0, _utils.assert)(() => (0, _number.isUnsignedNumber)(key) || (0, _utils.isNullish)(key), 'Expecting an unsigned number or null/undefined argument.');
+    (0, _utils.assert)(() => (0, _utils.isUnsignedNumber)(key) || (0, _utils.isNullish)(key), 'Expecting an unsigned number or null/undefined argument.');
     const removed = this.index.splice((0, _utils.isNullish)(key) ? this.index.length - amount : key, amount);
     for (let i = 0; i < removed.length; i++) {
       const removedIndex = removed[i];

package/dataMap/metaManager/lazyFactoryMap.mjs

@@ -12,8 +12,7 @@ import "core-js/modules/esnext.iterator.filter.js";
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-import { assert, isNullish } from "./utils.mjs";
-import { isUnsignedNumber } from "../../helpers/number.mjs";
+import { assert, isUnsignedNumber, isNullish } from "./utils.mjs";
 /* eslint-disable jsdoc/require-description-complete-sentence */
 /**
  * @class LazyFactoryMap

package/dataMap/metaManager/metaLayers/cellMeta.js

@@ -3,11 +3,10 @@
 exports.__esModule = true;
 require("core-js/modules/es.error.cause.js");
 require("core-js/modules/es.array.push.js");
+var _object = require("../../../helpers/object");
 var _utils = require("../utils");
 var _lazyFactoryMap = _interopRequireDefault(require("../lazyFactoryMap"));
-var _object = require("../../../helpers/object");
 var _mixed = require("../../../helpers/mixed");
-var _number = require("../../../helpers/number");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
@@ -190,7 +189,7 @@ class CellMeta {
    * @returns {object[]}
    */
   getMetasAtRow(physicalRow) {
-    (0, _utils.assert)(() => (0, _number.isUnsignedNumber)(physicalRow), 'Expecting an unsigned number.');
+    (0, _utils.assert)(() => (0, _utils.isUnsignedNumber)(physicalRow), 'Expecting an unsigned number.');
     const rowsMeta = new Map(this.metas);
     return rowsMeta.has(physicalRow) ? Array.from(rowsMeta.get(physicalRow).values()) : [];
   }

package/dataMap/metaManager/metaLayers/cellMeta.mjs

@@ -3,11 +3,10 @@ import "core-js/modules/es.array.push.js";
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-import { extendByMetaType, assert } from "../utils.mjs";
-import LazyFactoryMap from "../lazyFactoryMap.mjs";
 import { extend } from "../../../helpers/object.mjs";
+import { extendByMetaType, assert, isUnsignedNumber } from "../utils.mjs";
+import LazyFactoryMap from "../lazyFactoryMap.mjs";
 import { isDefined } from "../../../helpers/mixed.mjs";
-import { isUnsignedNumber } from "../../../helpers/number.mjs";
 /* eslint-disable jsdoc/require-description-complete-sentence */
 /**
  * @class CellMeta

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.
@@ -4242,13 +4337,9 @@ var _default = () => {
      *
      * You can set the `source` option to one of the following:
      *
-     * - An array of string values
-     * - An array of objects with `key` and `value` properties
+     * - An array
      * - A function
      *
-     * Note: When defining the `source` option as an array of objects with `key` and `value` properties, the data format for that cell
-     * needs to be an object with `key` and `value` properties as well.
-     *
      * Read more:
      * - [Autocomplete cell type](@/guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md)
      * - [Dropdown cell type](@/guides/cell-types/dropdown-cell-type/dropdown-cell-type.md)
@@ -4264,7 +4355,7 @@ var _default = () => {
      *
      * @example
      * ```js
-     * // set `source` to an array of string values
+     * // set `source` to an array
      * columns: [{
      *   // set the `type` of each cell in this column to `autocomplete`
      *   type: 'autocomplete',
@@ -4272,20 +4363,6 @@ var _default = () => {
      *   source: ['A', 'B', 'C', 'D']
      * }],
      *
-     * // set `source` to an array of objects with `key` and `value` properties
-     * columns: [{
-     *   // set the `type` of each cell in this column to `autocomplete`
-     *   type: 'autocomplete',
-     *   // set options available in every `autocomplete` cell of this column
-     *   source: [{
-     *     key: 'A',
-     *     value: 'Label A'
-     *   }, {
-     *     key: 'B',
-     *     value: 'Label B'
-     *   }]
-     * }],
-     *
      * // set `source` to a function
      * columns: [{
      *   // set the `type` of each cell in this column to `autocomplete`
@@ -4839,54 +4916,6 @@ var _default = () => {
      * ```
      */
     validator: undefined,
-    /**
-     * @description
-     * The `valueGetter` option configures a function that defines what value will be used when displaying the cell content.
-     * It can be used to modify the value of a cell before it is displayed (for example, for object-based data).
-     *
-     * @example
-     * ```js
-     * // use the `label` property of the value object with a fallback to the value itself
-     * valueGetter: (value, row, column, cellMeta) => {
-     *   return value?.label ?? value;
-     * }
-     * ```
-     *
-     * @memberof Options#
-     * @type {function(any, number, number): any}
-     * @param {*} value The value to be displayed in the cell.
-     * @param {number} row The visual row index of the cell.
-     * @param {number} column The visual column index of the cell.
-     * @param {object} cellMeta The cell meta object.
-     * @since 16.1.0
-     * @default undefined
-     * @category Core
-     */
-    valueGetter: undefined,
-    /**
-     * @description
-     * The `valueSetter` option configures a function that defines what value will be used when setting the cell content.
-     * It can be used to modify the value of a cell before it is saved (for example, for object-based data).
-     *
-     * @example
-     * ```js
-     * // Modify the value of a cell before it is saved
-     * valueSetter: (value, row, column, cellMeta) => {
-     *   return { id: value?.id ?? value, value: `${value?.value ?? value} at ${row}, ${column}` }
-     * },
-     * ```
-     *
-     * @memberof Options#
-     * @type {function(any, number, number): any}
-     * @param {*} value The value to be set to a cell.
-     * @param {number} row The visual row index of the cell.
-     * @param {number} column The visual column index of the cell.
-     * @param {object} cellMeta The cell meta object.
-     * @since 16.1.0
-     * @default undefined
-     * @category Core
-     */
-    valueSetter: undefined,
     /**
      * @description
      * The `viewportColumnRenderingOffset` option configures the number of columns

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.
@@ -4239,13 +4334,9 @@ export default () => {
      *
      * You can set the `source` option to one of the following:
      *
-     * - An array of string values
-     * - An array of objects with `key` and `value` properties
+     * - An array
      * - A function
      *
-     * Note: When defining the `source` option as an array of objects with `key` and `value` properties, the data format for that cell
-     * needs to be an object with `key` and `value` properties as well.
-     *
      * Read more:
      * - [Autocomplete cell type](@/guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md)
      * - [Dropdown cell type](@/guides/cell-types/dropdown-cell-type/dropdown-cell-type.md)
@@ -4261,7 +4352,7 @@ export default () => {
      *
      * @example
      * ```js
-     * // set `source` to an array of string values
+     * // set `source` to an array
      * columns: [{
      *   // set the `type` of each cell in this column to `autocomplete`
      *   type: 'autocomplete',
@@ -4269,20 +4360,6 @@ export default () => {
      *   source: ['A', 'B', 'C', 'D']
      * }],
      *
-     * // set `source` to an array of objects with `key` and `value` properties
-     * columns: [{
-     *   // set the `type` of each cell in this column to `autocomplete`
-     *   type: 'autocomplete',
-     *   // set options available in every `autocomplete` cell of this column
-     *   source: [{
-     *     key: 'A',
-     *     value: 'Label A'
-     *   }, {
-     *     key: 'B',
-     *     value: 'Label B'
-     *   }]
-     * }],
-     *
      * // set `source` to a function
      * columns: [{
      *   // set the `type` of each cell in this column to `autocomplete`
@@ -4836,54 +4913,6 @@ export default () => {
      * ```
      */
     validator: undefined,
-    /**
-     * @description
-     * The `valueGetter` option configures a function that defines what value will be used when displaying the cell content.
-     * It can be used to modify the value of a cell before it is displayed (for example, for object-based data).
-     *
-     * @example
-     * ```js
-     * // use the `label` property of the value object with a fallback to the value itself
-     * valueGetter: (value, row, column, cellMeta) => {
-     *   return value?.label ?? value;
-     * }
-     * ```
-     *
-     * @memberof Options#
-     * @type {function(any, number, number): any}
-     * @param {*} value The value to be displayed in the cell.
-     * @param {number} row The visual row index of the cell.
-     * @param {number} column The visual column index of the cell.
-     * @param {object} cellMeta The cell meta object.
-     * @since 16.1.0
-     * @default undefined
-     * @category Core
-     */
-    valueGetter: undefined,
-    /**
-     * @description
-     * The `valueSetter` option configures a function that defines what value will be used when setting the cell content.
-     * It can be used to modify the value of a cell before it is saved (for example, for object-based data).
-     *
-     * @example
-     * ```js
-     * // Modify the value of a cell before it is saved
-     * valueSetter: (value, row, column, cellMeta) => {
-     *   return { id: value?.id ?? value, value: `${value?.value ?? value} at ${row}, ${column}` }
-     * },
-     * ```
-     *
-     * @memberof Options#
-     * @type {function(any, number, number): any}
-     * @param {*} value The value to be set to a cell.
-     * @param {number} row The visual row index of the cell.
-     * @param {number} column The visual column index of the cell.
-     * @param {object} cellMeta The cell meta object.
-     * @since 16.1.0
-     * @default undefined
-     * @category Core
-     */
-    valueSetter: undefined,
     /**
      * @description
      * The `viewportColumnRenderingOffset` option configures the number of columns

package/dataMap/metaManager/utils.js

@@ -5,6 +5,7 @@ exports.assert = assert;
 exports.columnFactory = columnFactory;
 exports.extendByMetaType = extendByMetaType;
 exports.isNullish = isNullish;
+exports.isUnsignedNumber = isUnsignedNumber;
 require("core-js/modules/es.error.cause.js");
 require("core-js/modules/es.set.difference.v2.js");
 require("core-js/modules/es.set.intersection.v2.js");
@@ -94,6 +95,16 @@ function columnFactory(TableMeta) {
   return ColumnMeta;
 }
 
+/**
+ * Helper which checks if the provided argument is an unsigned number.
+ *
+ * @param {*} value Value to check.
+ * @returns {boolean}
+ */
+function isUnsignedNumber(value) {
+  return Number.isInteger(value) && value >= 0;
+}
+
 /**
  * Function which makes assertion by custom condition. Function throws an error when assertion doesn't meet the spec.
  *

package/dataMap/metaManager/utils.mjs

@@ -87,6 +87,16 @@ export function columnFactory(TableMeta) {
   return ColumnMeta;
 }
 
+/**
+ * Helper which checks if the provided argument is an unsigned number.
+ *
+ * @param {*} value Value to check.
+ * @returns {boolean}
+ */
+export function isUnsignedNumber(value) {
+  return Number.isInteger(value) && value >= 0;
+}
+
 /**
  * Function which makes assertion by custom condition. Function throws an error when assertion doesn't meet the spec.
  *

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-2c41c5b-20250814
- * Release date: 10/07/2025 (built at 14/08/2025 13:37:46)
+ * 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;
 }