handsontable 16.1.1 → 16.2.0-next-216dbd0-20251112

package/shortcutContexts/grid.js

@@ -11,7 +11,7 @@ var _commands = require("./commands");
  * @param {Handsontable} hot The Handsontable instance.
  */
 function shortcutsGridContext(hot) {
-  const context = hot.getShortcutManager().addContext('grid');
+  const context = hot.getShortcutManager().addContext(_constants.GRID_SCOPE);
   const commandsPool = (0, _commands.createKeyboardShortcutCommandsPool)(hot);
   const config = {
     runOnlyIf: () => {
@@ -168,16 +168,32 @@ function shortcutsGridContext(hot) {
     callback: () => commandsPool.extendCellsSelectionDownByViewportHeight()
   }, {
     keys: [['Tab']],
-    // The property value is controlled by focusCatcher module (https://github.com/handsontable/handsontable/blob/master/handsontable/src/core/focusCatcher/index.js)
     preventDefault: false,
     callback: event => commandsPool.moveCellSelectionInlineStart(event)
   }, {
     keys: [['Shift', 'Tab']],
-    // The property value is controlled by focusCatcher module (https://github.com/handsontable/handsontable/blob/master/handsontable/src/core/focusCatcher/index.js)
     preventDefault: false,
     callback: event => commandsPool.moveCellSelectionInlineEnd(event)
   }, {
     keys: [['Control/Meta', 'Backspace']],
     callback: () => commandsPool.scrollToFocusedCell()
   }], config);
+  const tabNavigationCommand = commandsPool.tabNavigation();
+  context.addShortcuts([{
+    keys: [['Tab'], ['Shift', 'Tab']],
+    preventDefault: false,
+    stopPropagation: false,
+    relativeToGroup: _constants.GRID_GROUP,
+    group: _constants.GRID_TAB_NAVIGATION_GROUP,
+    position: 'before',
+    callback: event => tabNavigationCommand.before(event)
+  }, {
+    keys: [['Tab'], ['Shift', 'Tab']],
+    preventDefault: false,
+    stopPropagation: false,
+    relativeToGroup: _constants.GRID_GROUP,
+    group: _constants.GRID_TAB_NAVIGATION_GROUP,
+    callback: event => tabNavigationCommand.after(event),
+    position: 'after'
+  }]);
 }

package/shortcutContexts/grid.mjs

@@ -1,5 +1,5 @@
 import { isDefined } from "../helpers/mixed.mjs";
-import { GRID_GROUP, EDITOR_EDIT_GROUP } from "./constants.mjs";
+import { GRID_GROUP, EDITOR_EDIT_GROUP, GRID_SCOPE, GRID_TAB_NAVIGATION_GROUP } from "./constants.mjs";
 import { createKeyboardShortcutCommandsPool } from "./commands/index.mjs";
 /**
  * The context that defines shortcut list available for selected cell or cells.
@@ -7,7 +7,7 @@ import { createKeyboardShortcutCommandsPool } from "./commands/index.mjs";
  * @param {Handsontable} hot The Handsontable instance.
  */
 export function shortcutsGridContext(hot) {
-  const context = hot.getShortcutManager().addContext('grid');
+  const context = hot.getShortcutManager().addContext(GRID_SCOPE);
   const commandsPool = createKeyboardShortcutCommandsPool(hot);
   const config = {
     runOnlyIf: () => {
@@ -164,16 +164,32 @@ export function shortcutsGridContext(hot) {
     callback: () => commandsPool.extendCellsSelectionDownByViewportHeight()
   }, {
     keys: [['Tab']],
-    // The property value is controlled by focusCatcher module (https://github.com/handsontable/handsontable/blob/master/handsontable/src/core/focusCatcher/index.js)
     preventDefault: false,
     callback: event => commandsPool.moveCellSelectionInlineStart(event)
   }, {
     keys: [['Shift', 'Tab']],
-    // The property value is controlled by focusCatcher module (https://github.com/handsontable/handsontable/blob/master/handsontable/src/core/focusCatcher/index.js)
     preventDefault: false,
     callback: event => commandsPool.moveCellSelectionInlineEnd(event)
   }, {
     keys: [['Control/Meta', 'Backspace']],
     callback: () => commandsPool.scrollToFocusedCell()
   }], config);
+  const tabNavigationCommand = commandsPool.tabNavigation();
+  context.addShortcuts([{
+    keys: [['Tab'], ['Shift', 'Tab']],
+    preventDefault: false,
+    stopPropagation: false,
+    relativeToGroup: GRID_GROUP,
+    group: GRID_TAB_NAVIGATION_GROUP,
+    position: 'before',
+    callback: event => tabNavigationCommand.before(event)
+  }, {
+    keys: [['Tab'], ['Shift', 'Tab']],
+    preventDefault: false,
+    stopPropagation: false,
+    relativeToGroup: GRID_GROUP,
+    group: GRID_TAB_NAVIGATION_GROUP,
+    callback: event => tabNavigationCommand.after(event),
+    position: 'after'
+  }]);
 }

package/shortcuts/manager.d.ts

@@ -4,6 +4,7 @@ export interface ShortcutManager {
   addContext(contextName: string): Context;
   getActiveContextName(): string;
   getContext(contextName: string): Context | undefined;
+  getOrCreateContext(contextName: string): Context;
   setActiveContextName(contextName: string): void;
   isCtrlPressed(): boolean;
   destroy(): void;

package/shortcuts/manager.js

@@ -74,13 +74,27 @@ const createShortcutManager = _ref => {
    * Get a keyboard shortcut context by its name.
    *
    * @memberof ShortcutManager#
-   * @param {string} contextName The name of the shortcut context
-   * @returns {object|undefined} A [`ShortcutContext`](@/api/shortcutContext.md) object that stores registered shortcuts
+   * @param {string} contextName The name of the shortcut context.
+   * @returns {object|undefined} A [`ShortcutContext`](@/api/shortcutContext.md) object that stores registered shortcuts.
    */
   const getContext = contextName => {
     return CONTEXTS.getItem(contextName);
   };
 
+  /**
+   * Get a keyboard shortcut context by its name, or create it if it doesn't exist.
+   *
+   * @memberof ShortcutManager#
+   * @param {string} contextName The name of the shortcut context
+   * @param {string} [scope='table'] The scope of the shortcut: `'table'` or `'global'`
+   * @returns {object} A [`ShortcutContext`](@/api/shortcutContext.md) object that stores registered shortcuts
+   */
+  const getOrCreateContext = function (contextName) {
+    var _getContext;
+    let scope = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'table';
+    return (_getContext = getContext(contextName)) !== null && _getContext !== void 0 ? _getContext : addContext(contextName, scope);
+  };
+
   /**
    * Start listening to keyboard shortcuts within a given [`ShortcutContext`](@/api/shortcutContext.md).
    *
@@ -178,6 +192,7 @@ const createShortcutManager = _ref => {
     addContext,
     getActiveContextName,
     getContext,
+    getOrCreateContext,
     setActiveContextName,
     /**
      * Returns whether `control` or `meta` keys are pressed.

package/shortcuts/manager.mjs

@@ -71,13 +71,27 @@ export const createShortcutManager = _ref => {
    * Get a keyboard shortcut context by its name.
    *
    * @memberof ShortcutManager#
-   * @param {string} contextName The name of the shortcut context
-   * @returns {object|undefined} A [`ShortcutContext`](@/api/shortcutContext.md) object that stores registered shortcuts
+   * @param {string} contextName The name of the shortcut context.
+   * @returns {object|undefined} A [`ShortcutContext`](@/api/shortcutContext.md) object that stores registered shortcuts.
    */
   const getContext = contextName => {
     return CONTEXTS.getItem(contextName);
   };
 
+  /**
+   * Get a keyboard shortcut context by its name, or create it if it doesn't exist.
+   *
+   * @memberof ShortcutManager#
+   * @param {string} contextName The name of the shortcut context
+   * @param {string} [scope='table'] The scope of the shortcut: `'table'` or `'global'`
+   * @returns {object} A [`ShortcutContext`](@/api/shortcutContext.md) object that stores registered shortcuts
+   */
+  const getOrCreateContext = function (contextName) {
+    var _getContext;
+    let scope = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'table';
+    return (_getContext = getContext(contextName)) !== null && _getContext !== void 0 ? _getContext : addContext(contextName, scope);
+  };
+
   /**
    * Start listening to keyboard shortcuts within a given [`ShortcutContext`](@/api/shortcutContext.md).
    *
@@ -175,6 +189,7 @@ export const createShortcutManager = _ref => {
     addContext,
     getActiveContextName,
     getContext,
+    getOrCreateContext,
     setActiveContextName,
     /**
      * Returns whether `control` or `meta` keys are pressed.

package/styles/handsontable.css

@@ -25,9 +25,26 @@
  * INDIRECT, SPECIAL, INCIDENTAL, OR CONSEQUENTIAL DAMAGES OF ANY CHARACTER ARISING FROM
  * USE OR INABILITY TO USE THIS SOFTWARE.
  *
- * Version: 16.1.1
- * Release date: 23/09/2025 (built at 23/09/2025 14:16:58)
+ * Version: 16.2.0-next-216dbd0-20251112
+ * Release date: 19/11/2025 (built at 12/11/2025 14:05:16)
  */
+.htBorders .wtBorder.ht-border-style-dashed-vertical {
+  background-image: repeating-linear-gradient(to bottom, var(--ht-custom-border-color) 0 5px, transparent 0 10px);
+}
+.htBorders .wtBorder.ht-border-style-dashed-horizontal {
+  background-image: repeating-linear-gradient(to right, var(--ht-custom-border-color) 0 5px, transparent 0 10px);
+}
+.htBorders .wtBorder.ht-border-style-dotted-horizontal {
+  background-image: radial-gradient(circle, var(--ht-custom-border-color) calc(var(--ht-custom-border-size) / 2), transparent 0);
+  background-size: calc(var(--ht-custom-border-size) * 2) var(--ht-custom-border-size);
+  background-repeat: repeat-x;
+}
+.htBorders .wtBorder.ht-border-style-dotted-vertical {
+  background-image: radial-gradient(circle, var(--ht-custom-border-color) calc(var(--ht-custom-border-size) / 2), transparent 0);
+  background-size: var(--ht-custom-border-size) calc(var(--ht-custom-border-size) * 2);
+  background-repeat: repeat-y;
+}
+
 .ht-root-wrapper:not([class*=ht-theme]),
 .ht-portal:not([class*=ht-theme]) {
   --ht-gap-size: 4px;
@@ -111,6 +128,8 @@
 }
 .handsontable.ht-wrapper {
   border-radius: var(--ht-wrapper-border-radius, 0);
+  height: 100%;
+  width: 100%;
 }
 .handsontable.ht-wrapper:not(.htFirstDatasetColumnNotRendered) td:first-of-type {
   border-inline-start-width: 1px;
@@ -138,11 +157,6 @@
   border-top-width: 0;
   height: calc(var(--ht-cell-vertical-padding) * 2 + var(--ht-line-height) + 1px);
 }
-.handsontable.htGhostTable table.htGhostTableFirstRow tbody tr th,
-.handsontable.htGhostTable table.htGhostTableFirstRow tbody tr td {
-  border-top-width: 1px;
-  height: calc(var(--ht-cell-vertical-padding) * 2 + var(--ht-line-height) + 2px);
-}
 .handsontable.htHasScrollX:not(.htHorizontallyScrollableByWindow) .ht_master .wtHolder, .handsontable.htHasScrollY:not(.htVerticallyScrollableByWindow) .ht_master .wtHolder {
   border-radius: var(--ht-wrapper-border-radius, 0);
 }
@@ -245,9 +259,11 @@
   color: var(--ht-header-row-active-foreground-color);
   background-color: var(--ht-header-row-active-background-color);
 }
-.handsontable tbody tr:first-of-type th:first-child,
-.handsontable tbody tr:first-of-type td:first-child {
-  height: calc(var(--ht-cell-vertical-padding) * 2 + var(--ht-line-height) + 2px);
+.handsontable tbody tr:first-of-type th:first-child:empty::after,
+.handsontable tbody tr:first-of-type td:first-child:empty::after {
+  content: "";
+  display: block;
+  min-height: var(--ht-line-height);
 }
 .handsontable tbody tr th {
   padding: 0;
@@ -283,7 +299,7 @@
   max-width: calc(100% + 1px);
 }
 .handsontable thead tr th .relative:has(.collapsibleIndicator, .changeType) .colHeader {
-  max-width: calc(100% - (var(--ht-icon-size) + var(--ht-gap-size)));
+  max-width: calc(100% - (var(--ht-icon-size) + var(--ht-gap-size)) - 1px);
 }
 .handsontable tr:first-child th,
 .handsontable tr:first-child td {
@@ -427,12 +443,12 @@
 .handsontable .ht_master:not(.innerBorderTop):not(.innerBorderBottom) thead tr.lastChild th, .handsontable .ht_master:not(.innerBorderTop):not(.innerBorderBottom) ~ .handsontable thead tr.lastChild th {
   border-bottom-width: 0;
 }
-.handsontable .ht_master.innerBorderTop tbody tr:first-child th,
-.handsontable .ht_master.innerBorderTop tbody tr:first-child td {
+.handsontable.htAutoRowSize .ht_master.innerBorderTop tbody tr:first-child th,
+.handsontable.htAutoRowSize .ht_master.innerBorderTop tbody tr:first-child td {
   border-top-width: 0;
 }
-.handsontable .ht_master.innerBorderTop ~ .ht_clone_inline_start tbody tr:first-child th,
-.handsontable .ht_master.innerBorderTop ~ .ht_clone_inline_start tbody tr:first-child td {
+.handsontable.htAutoRowSize .ht_master.innerBorderTop ~ .ht_clone_inline_start tbody tr:first-child th,
+.handsontable.htAutoRowSize .ht_master.innerBorderTop ~ .ht_clone_inline_start tbody tr:first-child td {
   border-top-width: 0;
 }
 .handsontable .ht_master table.htCore > thead,
@@ -1196,6 +1212,7 @@
   color: var(--ht-accent-color);
   background: none;
   border: none;
+  padding: 0;
 }
 .pika-single .pika-prev {
   order: 1;
@@ -1369,11 +1386,7 @@
   position: absolute;
 }
 
-.handsontable .htUIInput.htUIButton {
-  cursor: pointer;
-  display: inline-block;
-}
-.handsontable .htUIInput.htUIButton input {
+.handsontable .htUIInput.htUIButton input, .handsontable .ht-button {
   min-width: 64px;
   padding: var(--ht-button-vertical-padding) var(--ht-button-horizontal-padding);
   font-family: inherit;
@@ -1381,50 +1394,51 @@
   line-height: var(--ht-line-height);
   font-weight: var(--ht-font-weight);
   border-radius: var(--ht-button-border-radius);
+  border-width: 1px;
+  border-style: solid;
   box-sizing: border-box;
-  cursor: pointer;
   outline: none !important;
-  border: 1px solid var(--ht-secondary-button-border-color);
+  cursor: pointer;
+  transition: var(--ht-table-transition) all ease-in-out;
+}
+.handsontable .htUIInput.htUIButtonCancel input, .handsontable .ht-button--secondary {
+  border-color: var(--ht-secondary-button-border-color);
   background-color: var(--ht-secondary-button-background-color);
   color: var(--ht-secondary-button-foreground-color);
-  transition: var(--ht-table-transition) all ease-in-out;
 }
-.handsontable .htUIInput.htUIButton input:hover {
+.handsontable .htUIInput.htUIButtonCancel input:hover, .handsontable .ht-button--secondary:hover {
   border-color: var(--ht-secondary-button-hover-border-color);
   background-color: var(--ht-secondary-button-hover-background-color);
   color: var(--ht-secondary-button-hover-foreground-color);
 }
-.handsontable .htUIInput.htUIButton input:disabled {
+.handsontable .htUIInput.htUIButtonCancel input:disabled, .handsontable .ht-button--secondary:disabled {
   border-color: var(--ht-secondary-button-disabled-border-color);
   background-color: var(--ht-secondary-button-disabled-background-color);
   color: var(--ht-secondary-button-disabled-foreground-color);
 }
-.handsontable .htUIInput.htUIButton input:focus {
+.handsontable .htUIInput.htUIButtonCancel input:focus, .handsontable .ht-button--secondary:focus {
   border-color: var(--ht-secondary-button-focus-border-color);
   background-color: var(--ht-secondary-button-focus-background-color);
   color: var(--ht-secondary-button-focus-foreground-color);
   box-shadow: 0 0 0 1px var(--ht-accent-color);
 }
-.handsontable .htUIInput.htUIButtonOK {
-  margin-inline-start: 0;
-  margin-inline-end: calc(2 * var(--ht-gap-size, 2px));
-}
-.handsontable .htUIInput.htUIButtonOK input {
+
+.htUIInput.htUIButtonOK input, .ht-button--primary {
   border-color: var(--ht-primary-button-border-color);
   background-color: var(--ht-primary-button-background-color);
   color: var(--ht-primary-button-foreground-color);
 }
-.handsontable .htUIInput.htUIButtonOK input:hover {
+.htUIInput.htUIButtonOK input:hover, .ht-button--primary:hover {
   border-color: var(--ht-primary-button-hover-border-color);
   background-color: var(--ht-primary-button-hover-background-color);
   color: var(--ht-primary-button-hover-foreground-color);
 }
-.handsontable .htUIInput.htUIButtonOK input:disabled {
+.htUIInput.htUIButtonOK input:disabled, .ht-button--primary:disabled {
   border-color: var(--ht-primary-button-disabled-border-color);
   background-color: var(--ht-primary-button-disabled-background-color);
   color: var(--ht-primary-button-disabled-foreground-color);
 }
-.handsontable .htUIInput.htUIButtonOK input:focus {
+.htUIInput.htUIButtonOK input:focus, .ht-button--primary:focus {
   border-color: var(--ht-primary-button-focus-border-color);
   background-color: var(--ht-primary-button-focus-background-color);
   color: var(--ht-primary-button-focus-foreground-color);
@@ -2035,6 +2049,14 @@
 .handsontable .htUIMultipleSelect .ht_master .wtHolder td {
   background: none;
 }
+.handsontable .htUIInput.htUIButton {
+  cursor: pointer;
+  display: inline-block;
+}
+.handsontable .htUIInput.htUIButtonOK {
+  margin-inline-start: 0;
+  margin-inline-end: calc(2 * var(--ht-gap-size, 2px));
+}
 
 .handsontable .htCommentCell {
   position: relative;
@@ -2087,7 +2109,7 @@
   padding-inline-start: calc(var(--ht-icon-size, 16px) + 2px);
   padding-inline-end: calc(var(--ht-icon-size, 16px) + 2px);
   min-width: calc(var(--ht-icon-size, 16px) + 8px);
-  max-width: calc(100% - var(--ht-icon-size, 16px) * 2 - 4px);
+  max-width: calc(100% - var(--ht-icon-size, 16px) * 2 - 5px) !important;
 }
 .handsontable .columnSorting:not(.indicatorDisabled).sortAction:hover {
   text-decoration: none;
@@ -2491,6 +2513,58 @@
   border-radius: var(--ht-dialog-content-border-radius);
   background-color: var(--ht-dialog-content-background-color);
 }
+.ht-dialog--confirm .ht-dialog__content-wrapper {
+  text-align: center;
+  padding: calc(var(--ht-gap-size) * 2);
+}
+.ht-dialog--confirm .ht-dialog__content-wrapper-inner {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  max-width: 480px;
+  padding: calc(var(--ht-gap-size) * 2);
+  border-radius: var(--ht-wrapper-border-radius);
+}
+.ht-dialog--confirm .ht-dialog__content-wrapper-inner--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--confirm .ht-dialog__content-wrapper-inner:focus {
+  outline: none;
+  box-shadow: 0 0 0 1px var(--ht-accent-color);
+}
+.ht-dialog--confirm .ht-dialog__content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--ht-gap-size);
+}
+.ht-dialog--confirm .ht-dialog__content:has(.ht-dialog__buttons) {
+  gap: calc(var(--ht-gap-size) * 2);
+}
+.ht-dialog--confirm .ht-dialog__title {
+  margin: 0;
+  font-size: var(--ht-font-size);
+  font-weight: var(--ht-font-weight);
+  line-height: var(--ht-line-height);
+}
+.ht-dialog--confirm .ht-dialog__description {
+  margin: 0;
+  color: var(--ht-foreground-secondary-color);
+  font-size: var(--ht-font-size-small);
+  line-height: var(--ht-line-height-small);
+  font-weight: var(--ht-font-weight);
+}
+.ht-dialog--confirm .ht-dialog__buttons {
+  display: flex;
+  justify-content: center;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: calc(var(--ht-gap-size) * 2);
+}
 
 .handsontable.ht-pagination {
   color: var(--ht-pagination-bar-foreground-color);
@@ -2660,3 +2734,86 @@
     transform: rotate(360deg);
   }
 }
+.ht-empty-data-state {
+  display: none;
+  position: absolute;
+  width: 100%;
+  left: 0;
+  z-index: 999;
+  overflow-y: auto;
+  border: 1px solid var(--ht-border-color);
+  border-radius: var(--ht-wrapper-border-radius);
+  box-sizing: border-box;
+  background-color: var(--ht-background-color);
+}
+.ht-empty-data-state * {
+  box-sizing: border-box !important;
+}
+.ht-empty-data-state__content-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  width: 100%;
+  min-height: 100%;
+  padding: calc(var(--ht-gap-size) * 2);
+  border-radius: var(--ht-wrapper-border-radius);
+}
+.ht-empty-data-state__content-wrapper-inner {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  max-width: 480px;
+  padding: calc(var(--ht-gap-size) * 2);
+  border-radius: var(--ht-wrapper-border-radius);
+}
+.ht-empty-data-state__content-wrapper-inner:focus {
+  outline: none;
+  box-shadow: 0 0 0 1px var(--ht-accent-color);
+}
+.ht-empty-data-state__content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--ht-gap-size);
+}
+.ht-empty-data-state__title {
+  margin: 0;
+  font-size: var(--ht-font-size);
+  font-weight: var(--ht-font-weight);
+  line-height: var(--ht-line-height);
+}
+.ht-empty-data-state__description {
+  margin: 0;
+  color: var(--ht-foreground-secondary-color);
+  font-size: var(--ht-font-size-small);
+  line-height: var(--ht-line-height-small);
+  font-weight: var(--ht-font-weight);
+}
+.ht-empty-data-state__buttons {
+  display: flex;
+  justify-content: center;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: calc(var(--ht-gap-size) * 2);
+}
+.ht-empty-data-state__buttons--has-buttons {
+  margin-top: calc(var(--ht-gap-size) * 2);
+}
+.ht-empty-data-state--disable-top-border {
+  border-start-start-radius: 0;
+  border-start-end-radius: 0;
+  border-top-width: 0;
+}
+.ht-empty-data-state--disable-inline-border {
+  border-start-start-radius: 0;
+  border-end-start-radius: 0;
+  border-inline-start-width: 0;
+}
+.ht-empty-data-state--disable-bottom-border, .ht-empty-data-state:has(~ .ht-pagination) {
+  border-end-start-radius: 0;
+  border-end-end-radius: 0;
+  border-bottom-width: 0;
+}