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

package/selection/selection.mjs

@@ -1,4 +1,5 @@
 import "core-js/modules/es.error.cause.js";
+import "core-js/modules/es.array.push.js";
 import "core-js/modules/es.set.difference.v2.js";
 import "core-js/modules/es.set.intersection.v2.js";
 import "core-js/modules/es.set.is-disjoint-from.v2.js";
@@ -29,6 +30,15 @@ import { ExtenderTransformation, FocusTransformation } from "./transformation/in
 import { detectSelectionType, normalizeSelectionFactory, SELECTION_TYPE_EMPTY, SELECTION_TYPE_UNRECOGNIZED } from "./utils.mjs";
 import { toSingleLine } from "./../helpers/templateLiteralTag.mjs";
 import { A11Y_SELECTED } from "../helpers/a11y.mjs";
+/**
+ * @typedef {object} SelectionState
+ * @property {CellRange[]} ranges The array of all ranges.
+ * @property {CellRange} activeRange The active range.
+ * @property {number} activeSelectionLayer The active selection layer.
+ * @property {number[]} selectedByRowHeader The state of the selected row headers.
+ * @property {number[]} selectedByColumnHeader The state of the selected column headers.
+ * @property {boolean} disableHeadersHighlight The state of the disable headers highlight.
+ */
 /**
  * @class Selection
  * @util
@@ -350,6 +360,7 @@ class Selection {
     // We are creating copy. We would like to modify just the start of the selection by below hook. Then original coords
     // should be handled by next methods.
     const coordsClone = coords.clone();
+    _classPrivateFieldSet(_disableHeadersHighlight, this, false);
     _classPrivateFieldSet(_isFocusSelectionChanged, this, false);
     this.runLocalHooks(`beforeSetRangeStart${fragment ? 'Only' : ''}`, coordsClone);
     if (!isMultipleMode || isMultipleMode && !isMultipleSelection && isUndefined(multipleSelection)) {
@@ -947,7 +958,6 @@ class Selection {
       focusPosition,
       disableHeadersHighlight
     } = options;
-    _classPrivateFieldSet(_disableHeadersHighlight, this, disableHeadersHighlight);
     if (focusPosition && Number.isInteger(focusPosition === null || focusPosition === void 0 ? void 0 : focusPosition.row) && Number.isInteger(focusPosition === null || focusPosition === void 0 ? void 0 : focusPosition.col)) {
       highlight = this.tableProps.createCellCoords(clamp(focusPosition.row, rowFrom, nrOfRows - 1), clamp(focusPosition.col, columnFrom, nrOfColumns - 1));
     }
@@ -956,6 +966,7 @@ class Selection {
     this.clear();
     this.runLocalHooks('beforeSelectAll', startCoords, endCoords, highlight);
     this.setRangeStartOnly(startCoords, undefined, highlight);
+    _classPrivateFieldSet(_disableHeadersHighlight, this, disableHeadersHighlight);
     if (columnFrom < 0) {
       this.selectedByRowHeader.add(this.getLayerLevel());
     }
@@ -965,7 +976,6 @@ class Selection {
     this.setRangeEnd(endCoords);
     this.runLocalHooks('afterSelectAll', startCoords, endCoords, highlight);
     this.finish();
-    _classPrivateFieldSet(_disableHeadersHighlight, this, false);
   }
 
   /**
@@ -1132,6 +1142,57 @@ class Selection {
     return isValid;
   }
 
+  /**
+   * Allows importing the selection for all layers from the provided array of CellRange objects.
+   * The method clears the current selection and sets the new one without triggering any
+   * selection related hooks.
+   *
+   * @param {SelectionState} selectionState The selection state to import.
+   */
+  importSelection(_ref) {
+    let {
+      ranges,
+      activeRange,
+      activeSelectionLayer,
+      selectedByRowHeader,
+      selectedByColumnHeader,
+      disableHeadersHighlight
+    } = _ref;
+    if (ranges.length === 0) {
+      return;
+    }
+    this.selectedRange.clear();
+    this.highlight.clear();
+    this.inProgress = true;
+    _classPrivateFieldSet(_disableHeadersHighlight, this, disableHeadersHighlight);
+    this.selectedByRowHeader = new Set(selectedByRowHeader);
+    this.selectedByColumnHeader = new Set(selectedByColumnHeader);
+    this.setActiveSelectionLayerIndex(0);
+    ranges.forEach((cellRange, selectionLayerIndex) => {
+      this.selectedRange.push(cellRange);
+      this.applyAndCommit(cellRange, selectionLayerIndex);
+    });
+    this.setRangeFocus(activeRange.highlight, activeSelectionLayer);
+    _classPrivateFieldSet(_disableHeadersHighlight, this, false);
+    this.inProgress = false;
+  }
+
+  /**
+   * Exports all selection layers with other properties related to the selection state.
+   *
+   * @returns {SelectionState}
+   */
+  exportSelection() {
+    return {
+      ranges: Array.from(this.selectedRange).map(range => range.clone()),
+      activeRange: this.getActiveSelectedRange(),
+      activeSelectionLayer: this.getActiveSelectionLayerIndex(),
+      selectedByRowHeader: Array.from(this.selectedByRowHeader),
+      selectedByColumnHeader: Array.from(this.selectedByColumnHeader),
+      disableHeadersHighlight: _classPrivateFieldGet(_disableHeadersHighlight, this)
+    };
+  }
+
   /**
    * Refreshes the whole selection by clearing, reapplying and committing (calculating visual to renderable indexes)
    * the selection by using already added visual ranges. The method can be useful when underneath some indexes

package/selection/utils.js

@@ -118,9 +118,10 @@ function normalizeSelectionFactory(type) {
       rowEnd = Math.max(origRowStart, origRowEnd);
       columnEnd = Math.max(origColumnStart, origColumnEnd);
     }
+    const highlight = isObjectType ? selection.highlight.clone() : createCellCoords(rowStart, columnStart);
     const from = createCellCoords(rowStart, columnStart);
     const to = createCellCoords(rowEnd, columnEnd);
-    return createCellRange(from, from, to);
+    return createCellRange(highlight, from, to);
   };
 }
 

package/selection/utils.mjs

@@ -111,9 +111,10 @@ export function normalizeSelectionFactory(type) {
       rowEnd = Math.max(origRowStart, origRowEnd);
       columnEnd = Math.max(origColumnStart, origColumnEnd);
     }
+    const highlight = isObjectType ? selection.highlight.clone() : createCellCoords(rowStart, columnStart);
     const from = createCellCoords(rowStart, columnStart);
     const to = createCellCoords(rowEnd, columnEnd);
-    return createCellRange(from, from, to);
+    return createCellRange(highlight, from, to);
   };
 }
 

package/settings.d.ts

@@ -41,6 +41,7 @@ import { Settings as PaginationSettings } from './plugins/pagination';
 import { Settings as PersistentStateSettings } from './plugins/persistentState';
 import { Settings as SearchSettings } from './plugins/search';
 import { Settings as TrimRowsSettings } from './plugins/trimRows';
+import { Settings as DialogSettings } from './plugins/dialog';
 import { Settings as UndoRedoSettings } from './plugins/undoRedo';
 import { EditorType, BaseEditor } from './editors';
 import { RendererType } from './renderers';
@@ -210,7 +211,7 @@ export interface GridSettings extends Events {
   skipColumnOnPaste?: boolean;
   skipRowOnPaste?: boolean;
   sortByRelevance?: boolean;
-  source?: string[] | number[] | { key: any, value: any }[] | ((this: CellProperties, query: string, callback: (items: string[]) => void) => void);
+  source?: string[] | number[] | ((this: CellProperties, query: string, callback: (items: string[]) => void) => void);
   startCols?: number;
   startRows?: number;
   stretchH?: 'none' | 'all' | 'last';
@@ -225,10 +226,9 @@ export interface GridSettings extends Events {
   trimWhitespace?: boolean;
   type?: CellType | string;
   uncheckedTemplate?: boolean | string | number;
+  dialog?: DialogSettings;
   undo?: UndoRedoSettings;
   validator?: BaseValidator | RegExp | ValidatorType | string;
-  valueGetter?: (this: Core, value: CellValue, row: number, column: number, cellProperties: CellProperties) => CellValue;
-  valueSetter?: (this: Core, value: CellValue, row: number, column: number, cellProperties: CellProperties) => CellValue;
   viewportColumnRenderingOffset?: number | 'auto';
   viewportRowRenderingOffset?: number | 'auto';
   viewportColumnRenderingThreshold?: number | 'auto';

package/shortcuts/context.js

@@ -34,9 +34,11 @@ function isContextObject(objectToCheck) {
  * @alias ShortcutContext
  * @class ShortcutContext
  * @param {string} name The name of the keyboard shortcut context
+ * @param {string} [scope='table'] The scope of the shortcut: `'table'` or `'global'`
  * @returns {object}
  */
-const createContext = name => {
+const createContext = function (name) {
+  let scope = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'table';
   const SHORTCUTS = (0, _uniqueMap.createUniqueMap)({
     errorIdExists: keys => `The "${keys}" shortcut is already registered in the "${name}" context.`
   });
@@ -212,6 +214,7 @@ const createContext = name => {
   };
   return {
     __kindOf,
+    scope,
     addShortcut,
     addShortcuts,
     getShortcuts,

package/shortcuts/context.mjs

@@ -30,9 +30,11 @@ export function isContextObject(objectToCheck) {
  * @alias ShortcutContext
  * @class ShortcutContext
  * @param {string} name The name of the keyboard shortcut context
+ * @param {string} [scope='table'] The scope of the shortcut: `'table'` or `'global'`
  * @returns {object}
  */
-export const createContext = name => {
+export const createContext = function (name) {
+  let scope = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'table';
   const SHORTCUTS = createUniqueMap({
     errorIdExists: keys => `The "${keys}" shortcut is already registered in the "${name}" context.`
   });
@@ -208,6 +210,7 @@ export const createContext = name => {
   };
   return {
     __kindOf,
+    scope,
     addShortcut,
     addShortcuts,
     getShortcuts,

package/shortcuts/manager.js

@@ -50,10 +50,12 @@ const createShortcutManager = _ref => {
    *
    * @memberof ShortcutManager#
    * @param {string} contextName The name of the new shortcut context
+   * @param {string} [scope='table'] The scope of the shortcut: `'table'` or `'global'`
    * @returns {object}
    */
-  const addContext = contextName => {
-    const context = (0, _context.createContext)(contextName);
+  const addContext = function (contextName) {
+    let scope = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'table';
+    const context = (0, _context.createContext)(contextName, scope);
     CONTEXTS.addItem(contextName, context);
     return context;
   };
@@ -153,12 +155,24 @@ const createShortcutManager = _ref => {
     return isExecutionCancelled;
   };
 
+  /**
+   * Handle the event with the scope of the active context.
+   *
+   * @param {KeyboardEvent} event The keyboard event.
+   * @returns {boolean}
+   */
+  const handleEventWithScope = event => {
+    const context = getActiveContextName();
+    const activeContext = (0, _context.isContextObject)(context) ? context : getContext(context);
+    return handleEvent(event, activeContext.scope);
+  };
+
   /**
    * Internal key recorder.
    *
    * @private
    */
-  const keyRecorder = (0, _recorder.useRecorder)(ownerWindow, handleEvent, beforeKeyDown, afterKeyDown, recorderCallback);
+  const keyRecorder = (0, _recorder.useRecorder)(ownerWindow, handleEventWithScope, beforeKeyDown, afterKeyDown, recorderCallback);
   keyRecorder.mount();
   return {
     addContext,

package/shortcuts/manager.mjs

@@ -47,10 +47,12 @@ export const createShortcutManager = _ref => {
    *
    * @memberof ShortcutManager#
    * @param {string} contextName The name of the new shortcut context
+   * @param {string} [scope='table'] The scope of the shortcut: `'table'` or `'global'`
    * @returns {object}
    */
-  const addContext = contextName => {
-    const context = createContext(contextName);
+  const addContext = function (contextName) {
+    let scope = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'table';
+    const context = createContext(contextName, scope);
     CONTEXTS.addItem(contextName, context);
     return context;
   };
@@ -150,12 +152,24 @@ export const createShortcutManager = _ref => {
     return isExecutionCancelled;
   };
 
+  /**
+   * Handle the event with the scope of the active context.
+   *
+   * @param {KeyboardEvent} event The keyboard event.
+   * @returns {boolean}
+   */
+  const handleEventWithScope = event => {
+    const context = getActiveContextName();
+    const activeContext = isContextObject(context) ? context : getContext(context);
+    return handleEvent(event, activeContext.scope);
+  };
+
   /**
    * Internal key recorder.
    *
    * @private
    */
-  const keyRecorder = useRecorder(ownerWindow, handleEvent, beforeKeyDown, afterKeyDown, recorderCallback);
+  const keyRecorder = useRecorder(ownerWindow, handleEventWithScope, beforeKeyDown, afterKeyDown, recorderCallback);
   keyRecorder.mount();
   return {
     addContext,

package/styles/handsontable.css

@@ -25,8 +25,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:28)
+ * Version: 0.0.0-next-fce5825-20250822
+ * Release date: 10/07/2025 (built at 22/08/2025 10:30:06)
  */
 .ht-root-wrapper:not([class*=ht-theme]),
 .ht-portal:not([class*=ht-theme]) {
@@ -58,9 +58,13 @@
 
 .ht-root-wrapper {
   font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Helvetica Neue, Arial, sans-serif;
+  position: relative;
+  display: flex;
+  flex-direction: column;
   height: 100%;
 }
-.ht-root-wrapper .htFocusCatcher {
+
+.htFocusCatcher {
   position: absolute;
   width: 0;
   height: 0;
@@ -71,6 +75,11 @@
   z-index: -1;
 }
 
+.ht-grid {
+  flex: 1 1 auto;
+  min-height: 0;
+}
+
 .handsontable {
   font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Helvetica Neue, Arial, sans-serif;
   position: relative;
@@ -2401,7 +2410,82 @@
   display: block;
 }
 
-.handsontable.ht-pagination-container {
+.ht-dialog {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: none;
+  font-size: var(--ht-font-size);
+  line-height: var(--ht-line-height);
+  letter-spacing: var(--ht-letter-spacing);
+  width: 100%;
+  height: 100%;
+  z-index: 1060;
+  opacity: 0;
+  overflow-y: auto;
+  border-radius: var(--ht-wrapper-border-radius);
+  border: 1px solid var(--ht-border-color);
+  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: var(--ht-dialog-solid-background-color);
+}
+.ht-dialog--background-semi-transparent {
+  background-color: var(--ht-dialog-semi-transparent-background-color);
+}
+.ht-dialog--animation {
+  transition: opacity var(--ht-table-transition) 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: calc(var(--ht-gap-size) * 4);
+  border-radius: var(--ht-wrapper-border-radius);
+}
+.ht-dialog__content {
+  position: relative;
+  padding: var(--ht-dialog-content-padding-horizontal) var(--ht-dialog-content-padding-vertical);
+  display: flex;
+  gap: var(--ht-dialog-content-gap);
+  max-width: 480px;
+  color: var(--ht-foreground-color);
+}
+.ht-dialog__content--background {
+  box-shadow: var(--ht-shadow-x, 0) var(--ht-shadow-y, 0) var(--ht-shadow-blur, 8px) var(--ht-shadow-color, rgba(0, 0, 0, 0.08));
+  border-radius: var(--ht-dialog-content-border-radius);
+  background-color: var(--ht-dialog-content-background-color);
+}
+.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;
+}
+
+.handsontable.ht-pagination {
   color: var(--ht-pagination-bar-foreground-color);
   background: var(--ht-pagination-bar-background-color);
   border: 1px solid var(--ht-wrapper-border-color);
@@ -2412,10 +2496,10 @@
   box-sizing: border-box;
   overflow-x: auto;
 }
-.handsontable.ht-pagination-container--bordered {
+.handsontable.ht-pagination--bordered {
   border-top-color: var(--ht-wrapper-border-color);
 }
-.handsontable.ht-pagination-container .ht-pagination-container__inner {
+.handsontable.ht-pagination .ht-pagination__inner {
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -2426,20 +2510,20 @@
   padding-block: var(--ht-pagination-bar-vertical-padding);
   min-width: 230px;
 }
-.handsontable.ht-pagination-container .ht-page-size-section {
+.handsontable.ht-pagination .ht-page-size-section {
   display: flex;
   align-items: center;
   gap: calc(var(--ht-gap-size) * 2);
 }
-.handsontable.ht-pagination-container .ht-page-size-section__label {
+.handsontable.ht-pagination .ht-page-size-section__label {
   white-space: nowrap;
 }
-.handsontable.ht-pagination-container .ht-page-size-section__select-wrapper {
+.handsontable.ht-pagination .ht-page-size-section__select-wrapper {
   position: relative;
   border-radius: var(--ht-input-border-radius);
   border: 1px solid var(--ht-input-border-color);
 }
-.handsontable.ht-pagination-container .ht-page-size-section__select-wrapper select {
+.handsontable.ht-pagination .ht-page-size-section__select-wrapper select {
   padding-inline-start: var(--ht-gap-size);
   padding-inline-end: calc(var(--ht-gap-size) + var(--ht-icon-size));
   padding-top: var(--ht-gap-size);
@@ -2453,18 +2537,18 @@
   font-size: inherit;
   cursor: pointer;
 }
-.handsontable.ht-pagination-container .ht-page-size-section__select-wrapper select:disabled {
+.handsontable.ht-pagination .ht-page-size-section__select-wrapper select:disabled {
   opacity: 0.4;
   cursor: default;
 }
-.handsontable.ht-pagination-container .ht-page-size-section__select-wrapper select:hover:not(:disabled) {
+.handsontable.ht-pagination .ht-page-size-section__select-wrapper select:hover:not(:disabled) {
   background-color: var(--ht-secondary-button-hover-background-color);
 }
-.handsontable.ht-pagination-container .ht-page-size-section__select-wrapper select:focus {
+.handsontable.ht-pagination .ht-page-size-section__select-wrapper select:focus {
   background-color: var(--ht-input-focus-background-color);
   outline: 1px solid var(--ht-accent-color);
 }
-.handsontable.ht-pagination-container .ht-page-size-section__select-wrapper::after {
+.handsontable.ht-pagination .ht-page-size-section__select-wrapper::after {
   content: "";
   display: block;
   position: absolute;
@@ -2474,15 +2558,15 @@
   background-color: var(--ht-foreground-color);
   pointer-events: none;
 }
-.handsontable.ht-pagination-container .ht-page-counter-section {
+.handsontable.ht-pagination .ht-page-counter-section {
   margin-inline-end: auto;
 }
-.handsontable.ht-pagination-container .ht-page-navigation-section {
+.handsontable.ht-pagination .ht-page-navigation-section {
   display: flex;
   align-items: center;
   gap: 1px;
 }
-.handsontable.ht-pagination-container .ht-page-navigation-section__button {
+.handsontable.ht-pagination .ht-page-navigation-section__button {
   font-size: inherit;
   color: var(--ht-foreground-color);
   background-color: var(--ht-pagination-bar-background-color);
@@ -2491,22 +2575,22 @@
   padding: var(--ht-icon-button-large-padding);
   cursor: pointer;
 }
-.handsontable.ht-pagination-container .ht-page-navigation-section__button::before {
+.handsontable.ht-pagination .ht-page-navigation-section__button::before {
   content: "";
   display: block;
 }
-.handsontable.ht-pagination-container .ht-page-navigation-section__button--disabled {
+.handsontable.ht-pagination .ht-page-navigation-section__button--disabled {
   opacity: 0.4;
   cursor: default;
   pointer-events: none;
 }
-.handsontable.ht-pagination-container .ht-page-navigation-section__button:hover:not(:disabled) {
+.handsontable.ht-pagination .ht-page-navigation-section__button:hover:not(:disabled) {
   background-color: var(--ht-input-hover-background-color);
 }
-.handsontable.ht-pagination-container .ht-page-navigation-section__button:focus {
+.handsontable.ht-pagination .ht-page-navigation-section__button:focus {
   outline: 1px solid var(--ht-accent-color);
 }
-.handsontable.ht-pagination-container .ht-page-navigation-section__label {
+.handsontable.ht-pagination .ht-page-navigation-section__label {
   white-space: nowrap;
   min-width: 100px;
   text-align: center;