handsontable 0.0.0-next-14118b6-20240131 → 0.0.0-next-817afa4-20240202

package/helpers/dom/element.js

@@ -50,6 +50,7 @@ exports.removeClass = removeClass;
 exports.removeContentEditableFromElementAndDeselect = removeContentEditableFromElementAndDeselect;
 exports.removeEvent = removeEvent;
 exports.removeTextNodes = removeTextNodes;
+exports.renderMockCell = renderMockCell;
 exports.resetCssTransform = resetCssTransform;
 exports.runWithSelectedContendEditableElement = runWithSelectedContendEditableElement;
 exports.selectElementIfAllowed = selectElementIfAllowed;
@@ -1135,4 +1136,19 @@ function runWithSelectedContendEditableElement(element, callback) {
   makeElementContentEditableAndSelectItsContent(element, invisibleSelection);
   callback();
   removeContentEditableFromElementAndDeselect(element, invisibleSelection);
+}
+
+/**
+ * Return a `td` element rendered outside of the table with the provided renderer function.
+ *
+ * @param {Document} rootDocument Root document element.
+ * @param {Function} renderFunction The renderer function.
+ * @param {Array} renderArgs The renderer arguments.
+ * @returns {HTMLElement} The rendered `td` element.
+ */
+function renderMockCell(rootDocument, renderFunction, renderArgs) {
+  const cell = rootDocument.createElement('td');
+  renderArgs.splice(1, 0, cell);
+  renderFunction.call(renderArgs.instance, ...renderArgs);
+  return cell;
 }

package/helpers/dom/element.mjs

@@ -1077,4 +1077,19 @@ export function runWithSelectedContendEditableElement(element, callback) {
   makeElementContentEditableAndSelectItsContent(element, invisibleSelection);
   callback();
   removeContentEditableFromElementAndDeselect(element, invisibleSelection);
+}
+
+/**
+ * Return a `td` element rendered outside of the table with the provided renderer function.
+ *
+ * @param {Document} rootDocument Root document element.
+ * @param {Function} renderFunction The renderer function.
+ * @param {Array} renderArgs The renderer arguments.
+ * @returns {HTMLElement} The rendered `td` element.
+ */
+export function renderMockCell(rootDocument, renderFunction, renderArgs) {
+  const cell = rootDocument.createElement('td');
+  renderArgs.splice(1, 0, cell);
+  renderFunction.call(renderArgs.instance, ...renderArgs);
+  return cell;
 }

package/helpers/mixed.js

@@ -134,7 +134,7 @@ const domMessages = {
 function _injectProductInfo(key, element) {
   const hasValidType = !isEmpty(key);
   const isNonCommercial = typeof key === 'string' && key.toLowerCase() === 'non-commercial-and-evaluation';
-  const hotVersion = "0.0.0-next-14118b6-20240131";
+  const hotVersion = "0.0.0-next-817afa4-20240202";
   let keyValidityDate;
   let consoleMessageState = 'invalid';
   let domMessageState = 'invalid';

package/helpers/mixed.mjs

@@ -124,7 +124,7 @@ const domMessages = {
 export function _injectProductInfo(key, element) {
   const hasValidType = !isEmpty(key);
   const isNonCommercial = typeof key === 'string' && key.toLowerCase() === 'non-commercial-and-evaluation';
-  const hotVersion = "0.0.0-next-14118b6-20240131";
+  const hotVersion = "0.0.0-next-817afa4-20240202";
   let keyValidityDate;
   let consoleMessageState = 'invalid';
   let domMessageState = 'invalid';

package/package.json

@@ -10,7 +10,7 @@
     "url": "https://github.com/handsontable/handsontable/issues"
   },
   "author": "Handsoncode <hello@handsontable.com>",
-  "version": "0.0.0-next-14118b6-20240131",
+  "version": "0.0.0-next-817afa4-20240202",
   "main": "index",
   "module": "index.mjs",
   "jsnext:main": "index.mjs",

package/pluginHooks.js

@@ -414,7 +414,7 @@ const REGISTERED_HOOKS = [/* eslint-disable jsdoc/require-description-complete-s
  */
 'afterUpdateData',
 /**
- * Fired after a scroll event, which is identified as a momentum scroll.
+ * Fired after a scroll event, which is identified as a momentum scroll (e.g. On an iPad).
  *
  * @event Hooks#afterMomentumScroll
  */

package/pluginHooks.mjs

@@ -410,7 +410,7 @@ const REGISTERED_HOOKS = [/* eslint-disable jsdoc/require-description-complete-s
  */
 'afterUpdateData',
 /**
- * Fired after a scroll event, which is identified as a momentum scroll.
+ * Fired after a scroll event, which is identified as a momentum scroll (e.g. On an iPad).
  *
  * @event Hooks#afterMomentumScroll
  */

package/plugins/filters/component/value.js

@@ -108,17 +108,23 @@ class ValueComponent extends _base.BaseComponent {
    * `editedConditionStack`, `dependentConditionStacks`, `visibleDataFactory` and `conditionArgsChange`.
    */
   updateState(stateInfo) {
+    const multipleSelectComponent = this.getMultipleSelectElement();
     const updateColumnState = (physicalColumn, conditions, conditionArgsChange, filteredRowsFactory, conditionsStack) => {
       const [firstByValueCondition] = (0, _array.arrayFilter)(conditions, condition => condition.name === _constants2.CONDITION_BY_VALUE);
       const state = {};
       const defaultBlankCellValue = this.hot.getTranslatedPhrase(C.FILTERS_VALUES_BLANK_CELLS);
       if (firstByValueCondition) {
-        const rowValues = (0, _utils.unifyColumnValues)((0, _array.arrayMap)(filteredRowsFactory(physicalColumn, conditionsStack), row => row.value));
+        const filteredRows = filteredRowsFactory(physicalColumn, conditionsStack);
+        const rowValues = (0, _array.arrayMap)(filteredRows, row => row.value);
+        const rowIndexes = (0, _array.arrayMap)(filteredRows, row => row.meta.visualRow);
+        const unifiedRowValues = (0, _utils.unifyColumnValues)(rowValues);
+        const displayValues = (multipleSelectComponent.getDisplayValuesAtCol(this.hot.toVisualColumn(physicalColumn)) || []).filter((value, index) => rowIndexes.includes(index));
+        const displayValuesSyncedWithUnifiedValues = (0, _utils.syncDisplayValuesToUnifiedValues)(displayValues, rowValues, unifiedRowValues);
         if (conditionArgsChange) {
           firstByValueCondition.args[0] = conditionArgsChange;
         }
         const selectedValues = [];
-        const itemsSnapshot = (0, _utils.intersectValues)(rowValues, firstByValueCondition.args[0], defaultBlankCellValue, item => {
+        const itemsSnapshot = (0, _utils.intersectValues)(unifiedRowValues, firstByValueCondition.args[0], defaultBlankCellValue, displayValuesSyncedWithUnifiedValues, item => {
           if (item.checked) {
             selectedValues.push(item.value);
           }
@@ -181,13 +187,17 @@ class ValueComponent extends _base.BaseComponent {
    * Reset elements to their initial state.
    */
   reset() {
+    const multiSelectComponent = this.getMultipleSelectElement();
+    const selectedColumn = this.hot.getPlugin('filters').getSelectedColumn();
     const defaultBlankCellValue = this.hot.getTranslatedPhrase(C.FILTERS_VALUES_BLANK_CELLS);
-    const values = (0, _utils.unifyColumnValues)(this._getColumnVisibleValues());
-    const items = (0, _utils.intersectValues)(values, values, defaultBlankCellValue);
+    const values = this._getColumnVisibleValues();
+    const unifiedValues = (0, _utils.unifyColumnValues)(values);
+    const displayValues = multiSelectComponent.getDisplayValuesAtCol(selectedColumn === null || selectedColumn === void 0 ? void 0 : selectedColumn.visualIndex) || [];
+    const displayValuesSyncedWithUnifiedValues = (0, _utils.syncDisplayValuesToUnifiedValues)(displayValues, values, unifiedValues);
+    const items = (0, _utils.intersectValues)(unifiedValues, unifiedValues, defaultBlankCellValue, displayValuesSyncedWithUnifiedValues || []);
     this.getMultipleSelectElement().setItems(items);
     super.reset();
-    this.getMultipleSelectElement().setValue(values);
-    const selectedColumn = this.hot.getPlugin('filters').getSelectedColumn();
+    this.getMultipleSelectElement().setValue(unifiedValues);
     if (selectedColumn !== null) {
       this.getMultipleSelectElement().setLocale(this.hot.getCellMeta(0, selectedColumn.visualIndex).locale);
     }

package/plugins/filters/component/value.mjs

@@ -11,7 +11,7 @@ import { stopImmediatePropagation } from "../../../helpers/dom/event.mjs";
 import { arrayEach, arrayFilter, arrayMap } from "../../../helpers/array.mjs";
 import { isKey } from "../../../helpers/unicode.mjs";
 import * as C from "../../../i18n/constants.mjs";
-import { unifyColumnValues, intersectValues, toEmptyString } from "../utils.mjs";
+import { unifyColumnValues, intersectValues, toEmptyString, syncDisplayValuesToUnifiedValues } from "../utils.mjs";
 import { BaseComponent } from "./_base.mjs";
 import { MultipleSelectUI } from "../ui/multipleSelect.mjs";
 import { CONDITION_BY_VALUE, CONDITION_NONE } from "../constants.mjs";
@@ -103,17 +103,23 @@ export class ValueComponent extends BaseComponent {
    * `editedConditionStack`, `dependentConditionStacks`, `visibleDataFactory` and `conditionArgsChange`.
    */
   updateState(stateInfo) {
+    const multipleSelectComponent = this.getMultipleSelectElement();
     const updateColumnState = (physicalColumn, conditions, conditionArgsChange, filteredRowsFactory, conditionsStack) => {
       const [firstByValueCondition] = arrayFilter(conditions, condition => condition.name === CONDITION_BY_VALUE);
       const state = {};
       const defaultBlankCellValue = this.hot.getTranslatedPhrase(C.FILTERS_VALUES_BLANK_CELLS);
       if (firstByValueCondition) {
-        const rowValues = unifyColumnValues(arrayMap(filteredRowsFactory(physicalColumn, conditionsStack), row => row.value));
+        const filteredRows = filteredRowsFactory(physicalColumn, conditionsStack);
+        const rowValues = arrayMap(filteredRows, row => row.value);
+        const rowIndexes = arrayMap(filteredRows, row => row.meta.visualRow);
+        const unifiedRowValues = unifyColumnValues(rowValues);
+        const displayValues = (multipleSelectComponent.getDisplayValuesAtCol(this.hot.toVisualColumn(physicalColumn)) || []).filter((value, index) => rowIndexes.includes(index));
+        const displayValuesSyncedWithUnifiedValues = syncDisplayValuesToUnifiedValues(displayValues, rowValues, unifiedRowValues);
         if (conditionArgsChange) {
           firstByValueCondition.args[0] = conditionArgsChange;
         }
         const selectedValues = [];
-        const itemsSnapshot = intersectValues(rowValues, firstByValueCondition.args[0], defaultBlankCellValue, item => {
+        const itemsSnapshot = intersectValues(unifiedRowValues, firstByValueCondition.args[0], defaultBlankCellValue, displayValuesSyncedWithUnifiedValues, item => {
           if (item.checked) {
             selectedValues.push(item.value);
           }
@@ -176,13 +182,17 @@ export class ValueComponent extends BaseComponent {
    * Reset elements to their initial state.
    */
   reset() {
+    const multiSelectComponent = this.getMultipleSelectElement();
+    const selectedColumn = this.hot.getPlugin('filters').getSelectedColumn();
     const defaultBlankCellValue = this.hot.getTranslatedPhrase(C.FILTERS_VALUES_BLANK_CELLS);
-    const values = unifyColumnValues(this._getColumnVisibleValues());
-    const items = intersectValues(values, values, defaultBlankCellValue);
+    const values = this._getColumnVisibleValues();
+    const unifiedValues = unifyColumnValues(values);
+    const displayValues = multiSelectComponent.getDisplayValuesAtCol(selectedColumn === null || selectedColumn === void 0 ? void 0 : selectedColumn.visualIndex) || [];
+    const displayValuesSyncedWithUnifiedValues = syncDisplayValuesToUnifiedValues(displayValues, values, unifiedValues);
+    const items = intersectValues(unifiedValues, unifiedValues, defaultBlankCellValue, displayValuesSyncedWithUnifiedValues || []);
     this.getMultipleSelectElement().setItems(items);
     super.reset();
-    this.getMultipleSelectElement().setValue(values);
-    const selectedColumn = this.hot.getPlugin('filters').getSelectedColumn();
+    this.getMultipleSelectElement().setValue(unifiedValues);
     if (selectedColumn !== null) {
       this.getMultipleSelectElement().setLocale(this.hot.getCellMeta(0, selectedColumn.visualIndex).locale);
     }

package/plugins/filters/ui/multipleSelect.js

@@ -380,6 +380,44 @@ class MultipleSelectUI extends _base.BaseUI {
     _classPrivateFieldSet(this, _items, null);
     super.destroy();
   }
+
+  /**
+   * Returns the display values for all the cells at the given `column` visual index.
+   * If no display values are defined, the `source data` values will be returned instead.
+   *
+   * If the provided column index is not a valid integer, the method will return `null`.
+   *
+   * @param {number} column From visual column index.
+   * @returns {Array[]|null} Array containing the display values of all the cells in the column.
+   */
+  getDisplayValuesAtCol(column) {
+    if (!Number.isInteger(column)) {
+      return null;
+    }
+    const sourceRowCount = this.hot.countSourceRows();
+    const columnData = [];
+    let returnValue;
+    for (let row = 0; row < sourceRowCount; row += 1) {
+      const cellMeta = this.hot.getCellMeta(row, column);
+      const {
+        prop,
+        displayValue
+      } = cellMeta;
+      const cellSourceData = this.hot.getSourceDataAtCell(row, column);
+      if (displayValue) {
+        returnValue = displayValue;
+      } else {
+        var _cellMeta$displayValu;
+        // Render the cell in a mock element to try to get the display value (possibly applied in the renderer).
+        (0, _element.renderMockCell)(this.hot.rootDocument, this.hot.getCellRenderer(row, column), [this.hot, row, column, prop, cellSourceData, cellMeta]);
+
+        // Retry getting the display value.
+        returnValue = (_cellMeta$displayValu = cellMeta.displayValue) !== null && _cellMeta$displayValu !== void 0 ? _cellMeta$displayValu : cellSourceData;
+      }
+      columnData.push(returnValue);
+    }
+    return columnData;
+  }
 }
 exports.MultipleSelectUI = MultipleSelectUI;
 function _onInput2(event) {

package/plugins/filters/ui/multipleSelect.mjs

@@ -9,7 +9,7 @@ function _classApplyDescriptorGet(receiver, descriptor) { if (descriptor.get) {
 function _classPrivateFieldSet(receiver, privateMap, value) { var descriptor = _classExtractFieldDescriptor(receiver, privateMap, "set"); _classApplyDescriptorSet(receiver, descriptor, value); return value; }
 function _classExtractFieldDescriptor(receiver, privateMap, action) { if (!privateMap.has(receiver)) { throw new TypeError("attempted to " + action + " private field on non-instance"); } return privateMap.get(receiver); }
 function _classApplyDescriptorSet(receiver, descriptor, value) { if (descriptor.set) { descriptor.set.call(receiver, value); } else { if (!descriptor.writable) { throw new TypeError("attempted to set read only private field"); } descriptor.value = value; } }
-import { addClass, getScrollbarWidth } from "../../../helpers/dom/element.mjs";
+import { addClass, getScrollbarWidth, renderMockCell } from "../../../helpers/dom/element.mjs";
 import { clone, extend } from "../../../helpers/object.mjs";
 import { arrayFilter, arrayMap, arrayEach } from "../../../helpers/array.mjs";
 import { isKey } from "../../../helpers/unicode.mjs";
@@ -375,6 +375,44 @@ export class MultipleSelectUI extends BaseUI {
     _classPrivateFieldSet(this, _items, null);
     super.destroy();
   }
+
+  /**
+   * Returns the display values for all the cells at the given `column` visual index.
+   * If no display values are defined, the `source data` values will be returned instead.
+   *
+   * If the provided column index is not a valid integer, the method will return `null`.
+   *
+   * @param {number} column From visual column index.
+   * @returns {Array[]|null} Array containing the display values of all the cells in the column.
+   */
+  getDisplayValuesAtCol(column) {
+    if (!Number.isInteger(column)) {
+      return null;
+    }
+    const sourceRowCount = this.hot.countSourceRows();
+    const columnData = [];
+    let returnValue;
+    for (let row = 0; row < sourceRowCount; row += 1) {
+      const cellMeta = this.hot.getCellMeta(row, column);
+      const {
+        prop,
+        displayValue
+      } = cellMeta;
+      const cellSourceData = this.hot.getSourceDataAtCell(row, column);
+      if (displayValue) {
+        returnValue = displayValue;
+      } else {
+        var _cellMeta$displayValu;
+        // Render the cell in a mock element to try to get the display value (possibly applied in the renderer).
+        renderMockCell(this.hot.rootDocument, this.hot.getCellRenderer(row, column), [this.hot, row, column, prop, cellSourceData, cellMeta]);
+
+        // Retry getting the display value.
+        returnValue = (_cellMeta$displayValu = cellMeta.displayValue) !== null && _cellMeta$displayValu !== void 0 ? _cellMeta$displayValu : cellSourceData;
+      }
+      columnData.push(returnValue);
+    }
+    return columnData;
+  }
 }
 function _onInput2(event) {
   const value = event.target.value.toLocaleLowerCase(this.getLocale());

package/plugins/filters/utils.js

@@ -4,6 +4,7 @@ exports.__esModule = true;
 exports.createArrayAssertion = createArrayAssertion;
 exports.intersectValues = intersectValues;
 exports.sortComparison = sortComparison;
+exports.syncDisplayValuesToUnifiedValues = syncDisplayValuesToUnifiedValues;
 exports.toEmptyString = toEmptyString;
 exports.toVisualValue = toVisualValue;
 exports.unifyColumnValues = unifyColumnValues;
@@ -31,12 +32,15 @@ function sortComparison(a, b) {
  *
  * @param {*} value The value to convert.
  * @param {string} defaultEmptyValue Default value for empty cells.
+ * @param {string} [displayValue] The display value.
  * @returns {*}
  */
-function toVisualValue(value, defaultEmptyValue) {
+function toVisualValue(value, defaultEmptyValue, displayValue) {
   let visualValue = value;
   if (visualValue === '') {
     visualValue = `(${defaultEmptyValue})`;
+  } else if (displayValue) {
+    visualValue = displayValue;
   }
   return visualValue;
 }
@@ -77,7 +81,7 @@ function toEmptyString(value) {
 }
 
 /**
- * Unify column values (replace `null` and `undefined` values into empty string, unique values and sort them).
+ * Unify column values (remove duplicated values and sort them).
  *
  * @param {Array} values An array of values.
  * @returns {Array}
@@ -101,23 +105,43 @@ function unifyColumnValues(values) {
   return unifiedValues;
 }
 
+/**
+ * Synchronize display values with the provided unified values.
+ *
+ * @param {Array} displayValues An array of display values.
+ * @param {Array} values An array of source values.
+ * @param {Array} unifiedValues An array of unified values.
+ *
+ * @returns {Array} An array of synchronized display values.
+ */
+function syncDisplayValuesToUnifiedValues(displayValues, values, unifiedValues) {
+  const syncedDisplayValues = [];
+  (0, _array.arrayEach)(unifiedValues, unifiedValue => {
+    const index = values.indexOf(unifiedValue);
+    const displayValue = displayValues[index];
+    syncedDisplayValues.push(displayValue);
+  });
+  return syncedDisplayValues;
+}
+
 /**
  * Intersect 'base' values with 'selected' values and return an array of object.
  *
  * @param {Array} base An array of base values.
  * @param {Array} selected An array of selected values.
  * @param {string} defaultEmptyValue Default value for empty cells.
+ * @param {string[]} [displayValues] An array of display values.
  * @param {Function} [callback] A callback function which is invoked for every item in an array.
  * @returns {Array}
  */
-function intersectValues(base, selected, defaultEmptyValue, callback) {
+function intersectValues(base, selected, defaultEmptyValue, displayValues, callback) {
   const result = [];
   const same = base === selected;
   let selectedItemsAssertion;
   if (!same) {
     selectedItemsAssertion = createArrayAssertion(selected);
   }
-  (0, _array.arrayEach)(base, value => {
+  (0, _array.arrayEach)(base, (value, index) => {
     let checked = false;
     if (same || selectedItemsAssertion(value)) {
       checked = true;
@@ -125,7 +149,7 @@ function intersectValues(base, selected, defaultEmptyValue, callback) {
     const item = {
       checked,
       value,
-      visualValue: toVisualValue(value, defaultEmptyValue)
+      visualValue: toVisualValue(value, defaultEmptyValue, displayValues[index])
     };
     if (callback) {
       callback(item);

package/plugins/filters/utils.mjs

@@ -22,12 +22,15 @@ export function sortComparison(a, b) {
  *
  * @param {*} value The value to convert.
  * @param {string} defaultEmptyValue Default value for empty cells.
+ * @param {string} [displayValue] The display value.
  * @returns {*}
  */
-export function toVisualValue(value, defaultEmptyValue) {
+export function toVisualValue(value, defaultEmptyValue, displayValue) {
   let visualValue = value;
   if (visualValue === '') {
     visualValue = `(${defaultEmptyValue})`;
+  } else if (displayValue) {
+    visualValue = displayValue;
   }
   return visualValue;
 }
@@ -68,7 +71,7 @@ export function toEmptyString(value) {
 }
 
 /**
- * Unify column values (replace `null` and `undefined` values into empty string, unique values and sort them).
+ * Unify column values (remove duplicated values and sort them).
  *
  * @param {Array} values An array of values.
  * @returns {Array}
@@ -92,23 +95,43 @@ export function unifyColumnValues(values) {
   return unifiedValues;
 }
 
+/**
+ * Synchronize display values with the provided unified values.
+ *
+ * @param {Array} displayValues An array of display values.
+ * @param {Array} values An array of source values.
+ * @param {Array} unifiedValues An array of unified values.
+ *
+ * @returns {Array} An array of synchronized display values.
+ */
+export function syncDisplayValuesToUnifiedValues(displayValues, values, unifiedValues) {
+  const syncedDisplayValues = [];
+  arrayEach(unifiedValues, unifiedValue => {
+    const index = values.indexOf(unifiedValue);
+    const displayValue = displayValues[index];
+    syncedDisplayValues.push(displayValue);
+  });
+  return syncedDisplayValues;
+}
+
 /**
  * Intersect 'base' values with 'selected' values and return an array of object.
  *
  * @param {Array} base An array of base values.
  * @param {Array} selected An array of selected values.
  * @param {string} defaultEmptyValue Default value for empty cells.
+ * @param {string[]} [displayValues] An array of display values.
  * @param {Function} [callback] A callback function which is invoked for every item in an array.
  * @returns {Array}
  */
-export function intersectValues(base, selected, defaultEmptyValue, callback) {
+export function intersectValues(base, selected, defaultEmptyValue, displayValues, callback) {
   const result = [];
   const same = base === selected;
   let selectedItemsAssertion;
   if (!same) {
     selectedItemsAssertion = createArrayAssertion(selected);
   }
-  arrayEach(base, value => {
+  arrayEach(base, (value, index) => {
     let checked = false;
     if (same || selectedItemsAssertion(value)) {
       checked = true;
@@ -116,7 +139,7 @@ export function intersectValues(base, selected, defaultEmptyValue, callback) {
     const item = {
       checked,
       value,
-      visualValue: toVisualValue(value, defaultEmptyValue)
+      visualValue: toVisualValue(value, defaultEmptyValue, displayValues[index])
     };
     if (callback) {
       callback(item);

package/renderers/numericRenderer/numericRenderer.js

@@ -47,6 +47,7 @@ function numericRenderer(hotInstance, TD, row, col, prop, value, cellProperties)
     cellProperties.className = classArr.join(' ');
     TD.dir = 'ltr';
   }
+  cellProperties.displayValue = newValue;
   (0, _textRenderer.textRenderer)(hotInstance, TD, row, col, prop, newValue, cellProperties);
 }
 numericRenderer.RENDERER_TYPE = RENDERER_TYPE;

package/renderers/numericRenderer/numericRenderer.mjs

@@ -42,6 +42,7 @@ export function numericRenderer(hotInstance, TD, row, col, prop, value, cellProp
     cellProperties.className = classArr.join(' ');
     TD.dir = 'ltr';
   }
+  cellProperties.displayValue = newValue;
   textRenderer(hotInstance, TD, row, col, prop, newValue, cellProperties);
 }
 numericRenderer.RENDERER_TYPE = RENDERER_TYPE;