handsontable 16.2.0 → 17.0.0-rc1

package/utils/stylesHandler.js

@@ -1,17 +1,21 @@
 "use strict";
 
 exports.__esModule = true;
-require("core-js/modules/es.error.cause.js");
-require("core-js/modules/esnext.iterator.constructor.js");
-require("core-js/modules/esnext.iterator.for-each.js");
 var _console = require("../helpers/console");
+var _handsontableStyles = _interopRequireDefault(require("../styles/handsontableStyles"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _classPrivateMethodInitSpec(e, a) { _checkPrivateRedeclaration(e, a), a.add(e); }
 function _classPrivateFieldInitSpec(e, t, a) { _checkPrivateRedeclaration(e, t), t.set(e, a); }
 function _checkPrivateRedeclaration(e, t) { if (t.has(e)) throw new TypeError("Cannot initialize the same private elements twice on an object"); }
 function _classPrivateFieldGet(s, a) { return s.get(_assertClassBrand(s, a)); }
 function _classPrivateFieldSet(s, a, r) { return s.set(_assertClassBrand(s, a), r), r; }
 function _assertClassBrand(e, t, n) { if ("function" == typeof e ? e === t : e.has(t)) return arguments.length < 3 ? t : n; throw new TypeError("Private element is not present on this object"); }
-const CLASSIC_THEME_DEFAULT_HEIGHT = 23;
+/**
+ * The id of the core styles element injected into the document head.
+ *
+ * @type {string}
+ */
+const CORE_STYLES_ID = 'handsontable-core-styles';
 
 /**
  * Handles the theme-related style operations.
@@ -21,7 +25,6 @@ var _themeName = /*#__PURE__*/new WeakMap();
 var _rootElement = /*#__PURE__*/new WeakMap();
 var _rootComputedStyle = /*#__PURE__*/new WeakMap();
 var _rootDocument = /*#__PURE__*/new WeakMap();
-var _isClassicTheme = /*#__PURE__*/new WeakMap();
 var _cssVars = /*#__PURE__*/new WeakMap();
 var _computedStyles = /*#__PURE__*/new WeakMap();
 var _onThemeChange = /*#__PURE__*/new WeakMap();
@@ -35,19 +38,16 @@ class StylesHandler {
    * @param {HTMLElement} options.rootElement The root element of the instance.
    * @param {Document} options.rootDocument The root document of the instance.
    * @param {function(string)} options.onThemeChange The callback function to be called when the theme changes.
+   * @param {boolean} options.injectCoreCss Whether to inject the core styles into the document head.
    */
   constructor(_ref) {
     let {
       hot,
       rootElement: _rootElement2,
       rootDocument: _rootDocument2,
-      onThemeChange = () => {}
+      onThemeChange = () => {},
+      injectCoreCss = true
     } = _ref;
-    /**
-     * Calculates the row height based on the current theme and CSS variables.
-     *
-     * @returns {number|null} The calculated row height, or `null` if any required CSS variable is not found.
-     */
     _classPrivateMethodInitSpec(this, _StylesHandler_brand);
     /**
      * The instance of the Handsontable.
@@ -80,12 +80,6 @@ class StylesHandler {
      * @type {Document}
      */
     _classPrivateFieldInitSpec(this, _rootDocument, void 0);
-    /**
-     * `true` if the classic theme is enabled, `false` otherwise.
-     *
-     * @type {boolean}
-     */
-    _classPrivateFieldInitSpec(this, _isClassicTheme, true);
     /**
      * An object to store CSS variable values.
      *
@@ -108,15 +102,9 @@ class StylesHandler {
     _classPrivateFieldSet(_rootElement, this, _rootElement2);
     _classPrivateFieldSet(_rootDocument, this, _rootDocument2);
     _classPrivateFieldSet(_onThemeChange, this, onThemeChange);
-  }
-
-  /**
-   * Gets the value indicating whether the classic theme is enabled.
-   *
-   * @returns {boolean} `true` if the classic theme is enabled, `false` otherwise.
-   */
-  isClassicTheme() {
-    return _classPrivateFieldGet(_isClassicTheme, this);
+    if (injectCoreCss) {
+      _assertClassBrand(_StylesHandler_brand, this, _injectCoreStyles).call(this);
+    }
   }
 
   /**
@@ -127,9 +115,6 @@ class StylesHandler {
    */
   getCSSVariableValue(variableName) {
     var _assertClassBrand$cal;
-    if (_classPrivateFieldGet(_isClassicTheme, this)) {
-      return null;
-    }
     if (_classPrivateFieldGet(_cssVars, this)[`--ht-${variableName}`]) {
       return _classPrivateFieldGet(_cssVars, this)[`--ht-${variableName}`];
     }
@@ -148,7 +133,7 @@ class StylesHandler {
    */
   getStyleForTD(cssProperty) {
     var _classPrivateFieldGet2;
-    return (_classPrivateFieldGet2 = _classPrivateFieldGet(_computedStyles, this)) === null || _classPrivateFieldGet2 === void 0 ? void 0 : _classPrivateFieldGet2.td[cssProperty];
+    return (_classPrivateFieldGet2 = _classPrivateFieldGet(_computedStyles, this)) === null || _classPrivateFieldGet2 === void 0 || (_classPrivateFieldGet2 = _classPrivateFieldGet2.td) === null || _classPrivateFieldGet2 === void 0 ? void 0 : _classPrivateFieldGet2[cssProperty];
   }
 
   /**
@@ -158,13 +143,7 @@ class StylesHandler {
    * @returns {number} The calculated row height.
    */
   getDefaultRowHeight(visualRowIndex) {
-    if (_classPrivateFieldGet(_isClassicTheme, this)) {
-      return CLASSIC_THEME_DEFAULT_HEIGHT;
-    }
     const rowHeight = _assertClassBrand(_StylesHandler_brand, this, _calculateRowHeight).call(this);
-    if (!rowHeight) {
-      return CLASSIC_THEME_DEFAULT_HEIGHT;
-    }
     if (visualRowIndex !== undefined && visualRowIndex === _classPrivateFieldGet(_hot, this).view.getFirstRenderedVisibleRow()) {
       // add 1px border-top-width compensation for the first rendered row
       return rowHeight + 1;
@@ -187,30 +166,16 @@ class StylesHandler {
    * @param {string|undefined|boolean} [themeName] - The name of the theme to apply.
    */
   useTheme(themeName) {
-    if (!themeName) {
-      _classPrivateFieldSet(_themeName, this, undefined);
-      _classPrivateFieldSet(_isClassicTheme, this, true);
-      _classPrivateFieldGet(_onThemeChange, this).call(this, _classPrivateFieldGet(_themeName, this));
-      _assertClassBrand(_StylesHandler_brand, this, _cacheStylesheetValues).call(this);
+    if (!/ht-theme-.*/.test(themeName)) {
+      (0, _console.warn)(`${themeName} isn't a valid theme name. Please ensure it follows the format ht-theme-<theme-name>.`);
       return;
     }
+    _assertClassBrand(_StylesHandler_brand, this, _clearCachedValues).call(this);
     if (themeName && themeName !== _classPrivateFieldGet(_themeName, this)) {
-      if (!/ht-theme-.*/.test(themeName)) {
-        (0, _console.warn)(`Invalid theme name: ${themeName}. Please provide a valid theme name.`);
-        _classPrivateFieldSet(_themeName, this, undefined);
-        _classPrivateFieldSet(_isClassicTheme, this, false);
-        _classPrivateFieldGet(_onThemeChange, this).call(this, _classPrivateFieldGet(_themeName, this));
-        _assertClassBrand(_StylesHandler_brand, this, _cacheStylesheetValues).call(this);
-        return;
-      }
-      if (_classPrivateFieldGet(_themeName, this)) {
-        _assertClassBrand(_StylesHandler_brand, this, _clearCachedValues).call(this);
-      }
       _classPrivateFieldSet(_themeName, this, themeName);
-      _classPrivateFieldSet(_isClassicTheme, this, false);
-      _classPrivateFieldGet(_onThemeChange, this).call(this, _classPrivateFieldGet(_themeName, this));
-      _assertClassBrand(_StylesHandler_brand, this, _cacheStylesheetValues).call(this);
     }
+    _classPrivateFieldGet(_onThemeChange, this).call(this, _classPrivateFieldGet(_themeName, this));
+    _assertClassBrand(_StylesHandler_brand, this, _cacheStylesheetValues).call(this);
   }
 
   /**
@@ -221,8 +186,34 @@ class StylesHandler {
   getThemeName() {
     return _classPrivateFieldGet(_themeName, this);
   }
+  /**
+   * Clears all cached CSS variable values and computed styles.
+   * This should be called when theme CSS variables are dynamically updated.
+   */
+  clearCache() {
+    _assertClassBrand(_StylesHandler_brand, this, _clearCachedValues).call(this);
+    _assertClassBrand(_StylesHandler_brand, this, _cacheStylesheetValues).call(this);
+  }
 }
 exports.StylesHandler = StylesHandler;
+function _injectCoreStyles() {
+  if (!_classPrivateFieldGet(_hot, this) || !_classPrivateFieldGet(_rootDocument, this) || !_classPrivateFieldGet(_rootDocument, this).head) {
+    return;
+  }
+  const existing = _classPrivateFieldGet(_rootDocument, this).getElementById(CORE_STYLES_ID);
+  if (existing && existing instanceof HTMLStyleElement) {
+    return;
+  }
+  const baseStyles = _classPrivateFieldGet(_rootDocument, this).createElement('style');
+  baseStyles.id = CORE_STYLES_ID;
+  baseStyles.textContent = _handsontableStyles.default;
+  _classPrivateFieldGet(_rootDocument, this).head.appendChild(baseStyles);
+}
+/**
+ * Calculates the row height based on the current theme and CSS variables.
+ *
+ * @returns {number|null} The calculated row height, or `null` if any required CSS variable is not found.
+ */
 function _calculateRowHeight() {
   const lineHeightVarValue = this.getCSSVariableValue('line-height');
   const verticalPaddingVarValue = this.getCSSVariableValue('cell-vertical-padding');
@@ -236,9 +227,7 @@ function _calculateRowHeight() {
  * Caches the computed style values for the root element and `td` element.
  */
 function _cacheStylesheetValues() {
-  if (!this.isClassicTheme()) {
-    _classPrivateFieldSet(_rootComputedStyle, this, getComputedStyle(_classPrivateFieldGet(_rootElement, this)));
-  }
+  _classPrivateFieldSet(_rootComputedStyle, this, getComputedStyle(_classPrivateFieldGet(_rootElement, this)));
   const stylesForTD = _assertClassBrand(_StylesHandler_brand, this, _getStylesForTD).call(this, ['box-sizing', 'border-bottom-width']);
   _classPrivateFieldGet(_computedStyles, this).td = {
     ..._classPrivateFieldGet(_computedStyles, this).td,
@@ -298,7 +287,8 @@ function _getParsedNumericCSSValue(property) {
  * @returns {string|null} The value of the specified CSS property or `null` if non-existent.
  */
 function _getCSSValue(property) {
-  const acquiredValue = _classPrivateFieldGet(_rootComputedStyle, this).getPropertyValue(property);
+  var _classPrivateFieldGet3;
+  const acquiredValue = (_classPrivateFieldGet3 = _classPrivateFieldGet(_rootComputedStyle, this)) === null || _classPrivateFieldGet3 === void 0 ? void 0 : _classPrivateFieldGet3.getPropertyValue(property);
   return acquiredValue === '' ? null : acquiredValue;
 }
 /**
@@ -307,5 +297,4 @@ function _getCSSValue(property) {
 function _clearCachedValues() {
   _classPrivateFieldSet(_computedStyles, this, {});
   _classPrivateFieldSet(_cssVars, this, {});
-  _classPrivateFieldSet(_isClassicTheme, this, true);
 }

package/utils/stylesHandler.mjs

@@ -1,6 +1,3 @@
-import "core-js/modules/es.error.cause.js";
-import "core-js/modules/esnext.iterator.constructor.js";
-import "core-js/modules/esnext.iterator.for-each.js";
 function _classPrivateMethodInitSpec(e, a) { _checkPrivateRedeclaration(e, a), a.add(e); }
 function _classPrivateFieldInitSpec(e, t, a) { _checkPrivateRedeclaration(e, t), t.set(e, a); }
 function _checkPrivateRedeclaration(e, t) { if (t.has(e)) throw new TypeError("Cannot initialize the same private elements twice on an object"); }
@@ -8,7 +5,13 @@ function _classPrivateFieldGet(s, a) { return s.get(_assertClassBrand(s, a)); }
 function _classPrivateFieldSet(s, a, r) { return s.set(_assertClassBrand(s, a), r), r; }
 function _assertClassBrand(e, t, n) { if ("function" == typeof e ? e === t : e.has(t)) return arguments.length < 3 ? t : n; throw new TypeError("Private element is not present on this object"); }
 import { warn } from "../helpers/console.mjs";
-const CLASSIC_THEME_DEFAULT_HEIGHT = 23;
+import handsontableStyles from "../styles/handsontableStyles.mjs";
+/**
+ * The id of the core styles element injected into the document head.
+ *
+ * @type {string}
+ */
+const CORE_STYLES_ID = 'handsontable-core-styles';
 
 /**
  * Handles the theme-related style operations.
@@ -18,7 +21,6 @@ var _themeName = /*#__PURE__*/new WeakMap();
 var _rootElement = /*#__PURE__*/new WeakMap();
 var _rootComputedStyle = /*#__PURE__*/new WeakMap();
 var _rootDocument = /*#__PURE__*/new WeakMap();
-var _isClassicTheme = /*#__PURE__*/new WeakMap();
 var _cssVars = /*#__PURE__*/new WeakMap();
 var _computedStyles = /*#__PURE__*/new WeakMap();
 var _onThemeChange = /*#__PURE__*/new WeakMap();
@@ -32,19 +34,16 @@ export class StylesHandler {
    * @param {HTMLElement} options.rootElement The root element of the instance.
    * @param {Document} options.rootDocument The root document of the instance.
    * @param {function(string)} options.onThemeChange The callback function to be called when the theme changes.
+   * @param {boolean} options.injectCoreCss Whether to inject the core styles into the document head.
    */
   constructor(_ref) {
     let {
       hot,
       rootElement: _rootElement2,
       rootDocument: _rootDocument2,
-      onThemeChange = () => {}
+      onThemeChange = () => {},
+      injectCoreCss = true
     } = _ref;
-    /**
-     * Calculates the row height based on the current theme and CSS variables.
-     *
-     * @returns {number|null} The calculated row height, or `null` if any required CSS variable is not found.
-     */
     _classPrivateMethodInitSpec(this, _StylesHandler_brand);
     /**
      * The instance of the Handsontable.
@@ -77,12 +76,6 @@ export class StylesHandler {
      * @type {Document}
      */
     _classPrivateFieldInitSpec(this, _rootDocument, void 0);
-    /**
-     * `true` if the classic theme is enabled, `false` otherwise.
-     *
-     * @type {boolean}
-     */
-    _classPrivateFieldInitSpec(this, _isClassicTheme, true);
     /**
      * An object to store CSS variable values.
      *
@@ -105,15 +98,9 @@ export class StylesHandler {
     _classPrivateFieldSet(_rootElement, this, _rootElement2);
     _classPrivateFieldSet(_rootDocument, this, _rootDocument2);
     _classPrivateFieldSet(_onThemeChange, this, onThemeChange);
-  }
-
-  /**
-   * Gets the value indicating whether the classic theme is enabled.
-   *
-   * @returns {boolean} `true` if the classic theme is enabled, `false` otherwise.
-   */
-  isClassicTheme() {
-    return _classPrivateFieldGet(_isClassicTheme, this);
+    if (injectCoreCss) {
+      _assertClassBrand(_StylesHandler_brand, this, _injectCoreStyles).call(this);
+    }
   }
 
   /**
@@ -124,9 +111,6 @@ export class StylesHandler {
    */
   getCSSVariableValue(variableName) {
     var _assertClassBrand$cal;
-    if (_classPrivateFieldGet(_isClassicTheme, this)) {
-      return null;
-    }
     if (_classPrivateFieldGet(_cssVars, this)[`--ht-${variableName}`]) {
       return _classPrivateFieldGet(_cssVars, this)[`--ht-${variableName}`];
     }
@@ -145,7 +129,7 @@ export class StylesHandler {
    */
   getStyleForTD(cssProperty) {
     var _classPrivateFieldGet2;
-    return (_classPrivateFieldGet2 = _classPrivateFieldGet(_computedStyles, this)) === null || _classPrivateFieldGet2 === void 0 ? void 0 : _classPrivateFieldGet2.td[cssProperty];
+    return (_classPrivateFieldGet2 = _classPrivateFieldGet(_computedStyles, this)) === null || _classPrivateFieldGet2 === void 0 || (_classPrivateFieldGet2 = _classPrivateFieldGet2.td) === null || _classPrivateFieldGet2 === void 0 ? void 0 : _classPrivateFieldGet2[cssProperty];
   }
 
   /**
@@ -155,13 +139,7 @@ export class StylesHandler {
    * @returns {number} The calculated row height.
    */
   getDefaultRowHeight(visualRowIndex) {
-    if (_classPrivateFieldGet(_isClassicTheme, this)) {
-      return CLASSIC_THEME_DEFAULT_HEIGHT;
-    }
     const rowHeight = _assertClassBrand(_StylesHandler_brand, this, _calculateRowHeight).call(this);
-    if (!rowHeight) {
-      return CLASSIC_THEME_DEFAULT_HEIGHT;
-    }
     if (visualRowIndex !== undefined && visualRowIndex === _classPrivateFieldGet(_hot, this).view.getFirstRenderedVisibleRow()) {
       // add 1px border-top-width compensation for the first rendered row
       return rowHeight + 1;
@@ -184,30 +162,16 @@ export class StylesHandler {
    * @param {string|undefined|boolean} [themeName] - The name of the theme to apply.
    */
   useTheme(themeName) {
-    if (!themeName) {
-      _classPrivateFieldSet(_themeName, this, undefined);
-      _classPrivateFieldSet(_isClassicTheme, this, true);
-      _classPrivateFieldGet(_onThemeChange, this).call(this, _classPrivateFieldGet(_themeName, this));
-      _assertClassBrand(_StylesHandler_brand, this, _cacheStylesheetValues).call(this);
+    if (!/ht-theme-.*/.test(themeName)) {
+      warn(`${themeName} isn't a valid theme name. Please ensure it follows the format ht-theme-<theme-name>.`);
       return;
     }
+    _assertClassBrand(_StylesHandler_brand, this, _clearCachedValues).call(this);
     if (themeName && themeName !== _classPrivateFieldGet(_themeName, this)) {
-      if (!/ht-theme-.*/.test(themeName)) {
-        warn(`Invalid theme name: ${themeName}. Please provide a valid theme name.`);
-        _classPrivateFieldSet(_themeName, this, undefined);
-        _classPrivateFieldSet(_isClassicTheme, this, false);
-        _classPrivateFieldGet(_onThemeChange, this).call(this, _classPrivateFieldGet(_themeName, this));
-        _assertClassBrand(_StylesHandler_brand, this, _cacheStylesheetValues).call(this);
-        return;
-      }
-      if (_classPrivateFieldGet(_themeName, this)) {
-        _assertClassBrand(_StylesHandler_brand, this, _clearCachedValues).call(this);
-      }
       _classPrivateFieldSet(_themeName, this, themeName);
-      _classPrivateFieldSet(_isClassicTheme, this, false);
-      _classPrivateFieldGet(_onThemeChange, this).call(this, _classPrivateFieldGet(_themeName, this));
-      _assertClassBrand(_StylesHandler_brand, this, _cacheStylesheetValues).call(this);
     }
+    _classPrivateFieldGet(_onThemeChange, this).call(this, _classPrivateFieldGet(_themeName, this));
+    _assertClassBrand(_StylesHandler_brand, this, _cacheStylesheetValues).call(this);
   }
 
   /**
@@ -218,7 +182,33 @@ export class StylesHandler {
   getThemeName() {
     return _classPrivateFieldGet(_themeName, this);
   }
+  /**
+   * Clears all cached CSS variable values and computed styles.
+   * This should be called when theme CSS variables are dynamically updated.
+   */
+  clearCache() {
+    _assertClassBrand(_StylesHandler_brand, this, _clearCachedValues).call(this);
+    _assertClassBrand(_StylesHandler_brand, this, _cacheStylesheetValues).call(this);
+  }
 }
+function _injectCoreStyles() {
+  if (!_classPrivateFieldGet(_hot, this) || !_classPrivateFieldGet(_rootDocument, this) || !_classPrivateFieldGet(_rootDocument, this).head) {
+    return;
+  }
+  const existing = _classPrivateFieldGet(_rootDocument, this).getElementById(CORE_STYLES_ID);
+  if (existing && existing instanceof HTMLStyleElement) {
+    return;
+  }
+  const baseStyles = _classPrivateFieldGet(_rootDocument, this).createElement('style');
+  baseStyles.id = CORE_STYLES_ID;
+  baseStyles.textContent = handsontableStyles;
+  _classPrivateFieldGet(_rootDocument, this).head.appendChild(baseStyles);
+}
+/**
+ * Calculates the row height based on the current theme and CSS variables.
+ *
+ * @returns {number|null} The calculated row height, or `null` if any required CSS variable is not found.
+ */
 function _calculateRowHeight() {
   const lineHeightVarValue = this.getCSSVariableValue('line-height');
   const verticalPaddingVarValue = this.getCSSVariableValue('cell-vertical-padding');
@@ -232,9 +222,7 @@ function _calculateRowHeight() {
  * Caches the computed style values for the root element and `td` element.
  */
 function _cacheStylesheetValues() {
-  if (!this.isClassicTheme()) {
-    _classPrivateFieldSet(_rootComputedStyle, this, getComputedStyle(_classPrivateFieldGet(_rootElement, this)));
-  }
+  _classPrivateFieldSet(_rootComputedStyle, this, getComputedStyle(_classPrivateFieldGet(_rootElement, this)));
   const stylesForTD = _assertClassBrand(_StylesHandler_brand, this, _getStylesForTD).call(this, ['box-sizing', 'border-bottom-width']);
   _classPrivateFieldGet(_computedStyles, this).td = {
     ..._classPrivateFieldGet(_computedStyles, this).td,
@@ -294,7 +282,8 @@ function _getParsedNumericCSSValue(property) {
  * @returns {string|null} The value of the specified CSS property or `null` if non-existent.
  */
 function _getCSSValue(property) {
-  const acquiredValue = _classPrivateFieldGet(_rootComputedStyle, this).getPropertyValue(property);
+  var _classPrivateFieldGet3;
+  const acquiredValue = (_classPrivateFieldGet3 = _classPrivateFieldGet(_rootComputedStyle, this)) === null || _classPrivateFieldGet3 === void 0 ? void 0 : _classPrivateFieldGet3.getPropertyValue(property);
   return acquiredValue === '' ? null : acquiredValue;
 }
 /**
@@ -303,5 +292,4 @@ function _getCSSValue(property) {
 function _clearCachedValues() {
   _classPrivateFieldSet(_computedStyles, this, {});
   _classPrivateFieldSet(_cssVars, this, {});
-  _classPrivateFieldSet(_isClassicTheme, this, true);
 }

package/validators/autocompleteValidator/autocompleteValidator.js

@@ -3,6 +3,7 @@
 exports.__esModule = true;
 exports.autocompleteValidator = autocompleteValidator;
 var _object = require("../../helpers/object");
+var _mixed = require("../../helpers/mixed");
 const VALIDATOR_TYPE = exports.VALIDATOR_TYPE = 'autocomplete';
 
 /**
@@ -13,8 +14,15 @@ const VALIDATOR_TYPE = exports.VALIDATOR_TYPE = 'autocomplete';
  * @param {Function} callback Callback called with validation result.
  */
 function autocompleteValidator(value, callback) {
+  const isKeyValueObject = obj => (0, _object.isObject)(obj) && (0, _mixed.isDefined)(obj.key) && (0, _mixed.isDefined)(obj.value);
+  const isNullOrUndefined = val => {
+    if (isKeyValueObject(val)) {
+      return isNullOrUndefined(val.key) && isNullOrUndefined(val.value);
+    }
+    return val === null || val === undefined;
+  };
   let valueToValidate = value;
-  if (valueToValidate === null || valueToValidate === undefined) {
+  if (isNullOrUndefined(valueToValidate)) {
     valueToValidate = '';
   }
   if (this.allowEmpty && valueToValidate === '') {

package/validators/autocompleteValidator/autocompleteValidator.mjs

@@ -1,4 +1,5 @@
-import { isObjectEqual } from "../../helpers/object.mjs";
+import { isObjectEqual, isObject } from "../../helpers/object.mjs";
+import { isDefined } from "../../helpers/mixed.mjs";
 export const VALIDATOR_TYPE = 'autocomplete';
 
 /**
@@ -9,8 +10,15 @@ export const VALIDATOR_TYPE = 'autocomplete';
  * @param {Function} callback Callback called with validation result.
  */
 export function autocompleteValidator(value, callback) {
+  const isKeyValueObject = obj => isObject(obj) && isDefined(obj.key) && isDefined(obj.value);
+  const isNullOrUndefined = val => {
+    if (isKeyValueObject(val)) {
+      return isNullOrUndefined(val.key) && isNullOrUndefined(val.value);
+    }
+    return val === null || val === undefined;
+  };
   let valueToValidate = value;
-  if (valueToValidate === null || valueToValidate === undefined) {
+  if (isNullOrUndefined(valueToValidate)) {
     valueToValidate = '';
   }
   if (this.allowEmpty && valueToValidate === '') {

package/validators/dateValidator/dateValidator.js

@@ -6,7 +6,7 @@ exports.dateValidator = dateValidator;
 var _moment = _interopRequireDefault(require("moment"));
 var _registry = require("../../editors/registry");
 var _dateEditor = require("../../editors/dateEditor");
-var _date = require("../../helpers/date");
+var _dateTime = require("../../helpers/dateTime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const VALIDATOR_TYPE = exports.VALIDATOR_TYPE = 'date';
 
@@ -58,7 +58,7 @@ dateValidator.VALIDATOR_TYPE = VALIDATOR_TYPE;
  * @returns {string}
  */
 function correctFormat(value, dateFormat) {
-  const dateFromDate = (0, _moment.default)((0, _date.getNormalizedDate)(value));
+  const dateFromDate = (0, _moment.default)((0, _dateTime.getNormalizedDate)(value));
   const dateFromMoment = (0, _moment.default)(value, dateFormat);
   const isAlphanumeric = value.search(/[A-Za-z]/g) > -1;
   let date;

package/validators/dateValidator/dateValidator.mjs

@@ -1,7 +1,7 @@
 import moment from 'moment';
 import { getEditorInstance } from "../../editors/registry.mjs";
 import { EDITOR_TYPE as DATE_EDITOR_TYPE } from "../../editors/dateEditor/index.mjs";
-import { getNormalizedDate } from "../../helpers/date.mjs";
+import { getNormalizedDate } from "../../helpers/dateTime.mjs";
 export const VALIDATOR_TYPE = 'date';
 
 /**

package/validators/index.d.ts

@@ -1,5 +1,7 @@
 import { autocompleteValidator, VALIDATOR_TYPE as AUTOCOMPLETE_VALIDATOR } from './autocompleteValidator';
 import { dropdownValidator, VALIDATOR_TYPE as DROPDOWN_VALIDATOR } from './dropdownValidator';
+import { intlDateValidator, VALIDATOR_TYPE as INTL_DATE_VALIDATOR } from './intlDateValidator';
+import { intlTimeValidator, VALIDATOR_TYPE as INTL_TIME_VALIDATOR } from './intlTimeValidator';
 import { dateValidator, VALIDATOR_TYPE as DATE_VALIDATOR } from './dateValidator';
 import { numericValidator, VALIDATOR_TYPE as NUMERIC_VALIDATOR } from './numericValidator';
 import { timeValidator, VALIDATOR_TYPE as TIME_VALIDATOR } from './timeValidator';
@@ -8,6 +10,8 @@ export function registerAllValidators(): void;
 
 export interface Validators {
   autocomplete: typeof autocompleteValidator;
+  intlDate: typeof intlDateValidator;
+  intlTime: typeof intlTimeValidator;
   date: typeof dateValidator;
   numeric: typeof numericValidator;
   time: typeof timeValidator;
@@ -21,6 +25,8 @@ export type ValidatorType = keyof Validators;
 export {
   autocompleteValidator, AUTOCOMPLETE_VALIDATOR,
   dropdownValidator, DROPDOWN_VALIDATOR,
+  intlDateValidator, INTL_DATE_VALIDATOR,
+  intlTimeValidator, INTL_TIME_VALIDATOR,
   dateValidator, DATE_VALIDATOR,
   numericValidator, NUMERIC_VALIDATOR,
   timeValidator, TIME_VALIDATOR

package/validators/index.js

@@ -11,6 +11,15 @@ exports.DATE_VALIDATOR = _dateValidator.VALIDATOR_TYPE;
 var _dropdownValidator = require("./dropdownValidator");
 exports.dropdownValidator = _dropdownValidator.dropdownValidator;
 exports.DROPDOWN_VALIDATOR = _dropdownValidator.VALIDATOR_TYPE;
+var _intlDateValidator = require("./intlDateValidator");
+exports.intlDateValidator = _intlDateValidator.intlDateValidator;
+exports.INTL_DATE_VALIDATOR = _intlDateValidator.VALIDATOR_TYPE;
+var _intlTimeValidator = require("./intlTimeValidator");
+exports.intlTimeValidator = _intlTimeValidator.intlTimeValidator;
+exports.INTL_TIME_VALIDATOR = _intlTimeValidator.VALIDATOR_TYPE;
+var _multiSelectValidator = require("./multiSelectValidator");
+exports.multiSelectValidator = _multiSelectValidator.multiSelectValidator;
+exports.MULTISELECT_VALIDATOR = _multiSelectValidator.VALIDATOR_TYPE;
 var _numericValidator = require("./numericValidator");
 exports.numericValidator = _numericValidator.numericValidator;
 exports.NUMERIC_VALIDATOR = _numericValidator.VALIDATOR_TYPE;
@@ -30,6 +39,9 @@ function registerAllValidators() {
   (0, _registry.registerValidator)(_autocompleteValidator.autocompleteValidator);
   (0, _registry.registerValidator)(_dropdownValidator.dropdownValidator);
   (0, _registry.registerValidator)(_dateValidator.dateValidator);
+  (0, _registry.registerValidator)(_intlDateValidator.intlDateValidator);
+  (0, _registry.registerValidator)(_intlTimeValidator.intlTimeValidator);
+  (0, _registry.registerValidator)(_multiSelectValidator.multiSelectValidator);
   (0, _registry.registerValidator)(_numericValidator.numericValidator);
   (0, _registry.registerValidator)(_timeValidator.timeValidator);
 }

package/validators/index.mjs

@@ -1,6 +1,9 @@
 import { autocompleteValidator, VALIDATOR_TYPE as AUTOCOMPLETE_VALIDATOR } from "./autocompleteValidator/index.mjs";
 import { dateValidator, VALIDATOR_TYPE as DATE_VALIDATOR } from "./dateValidator/index.mjs";
 import { dropdownValidator, VALIDATOR_TYPE as DROPDOWN_VALIDATOR } from "./dropdownValidator/index.mjs";
+import { intlDateValidator, VALIDATOR_TYPE as INTL_DATE_VALIDATOR } from "./intlDateValidator/index.mjs";
+import { intlTimeValidator, VALIDATOR_TYPE as INTL_TIME_VALIDATOR } from "./intlTimeValidator/index.mjs";
+import { multiSelectValidator, VALIDATOR_TYPE as MULTISELECT_VALIDATOR } from "./multiSelectValidator/index.mjs";
 import { numericValidator, VALIDATOR_TYPE as NUMERIC_VALIDATOR } from "./numericValidator/index.mjs";
 import { timeValidator, VALIDATOR_TYPE as TIME_VALIDATOR } from "./timeValidator/index.mjs";
 import { registerValidator } from "./registry.mjs";
@@ -11,8 +14,11 @@ export function registerAllValidators() {
   registerValidator(autocompleteValidator);
   registerValidator(dropdownValidator);
   registerValidator(dateValidator);
+  registerValidator(intlDateValidator);
+  registerValidator(intlTimeValidator);
+  registerValidator(multiSelectValidator);
   registerValidator(numericValidator);
   registerValidator(timeValidator);
 }
-export { autocompleteValidator, AUTOCOMPLETE_VALIDATOR, dropdownValidator, DROPDOWN_VALIDATOR, dateValidator, DATE_VALIDATOR, numericValidator, NUMERIC_VALIDATOR, timeValidator, TIME_VALIDATOR };
+export { autocompleteValidator, AUTOCOMPLETE_VALIDATOR, dropdownValidator, DROPDOWN_VALIDATOR, dateValidator, DATE_VALIDATOR, intlDateValidator, INTL_DATE_VALIDATOR, intlTimeValidator, INTL_TIME_VALIDATOR, multiSelectValidator, MULTISELECT_VALIDATOR, numericValidator, NUMERIC_VALIDATOR, timeValidator, TIME_VALIDATOR };
 export { getRegisteredValidatorNames, getRegisteredValidators, getValidator, hasValidator, registerValidator } from "./registry.mjs";

package/validators/intlDateValidator/index.d.ts

@@ -0,0 +1 @@
+export { VALIDATOR_TYPE, intlDateValidator, sourceDataValidator } from './intlDateValidator';

package/validators/intlDateValidator/index.js

@@ -0,0 +1,8 @@
+"use strict";
+
+exports.__esModule = true;
+var _intlDateValidator = require("./intlDateValidator");
+exports.VALIDATOR_TYPE = _intlDateValidator.VALIDATOR_TYPE;
+exports.SOURCE_DATA_WARNING_MESSAGE = _intlDateValidator.SOURCE_DATA_WARNING_MESSAGE;
+exports.intlDateValidator = _intlDateValidator.intlDateValidator;
+exports.sourceDataValidator = _intlDateValidator.sourceDataValidator;

package/validators/intlDateValidator/index.mjs

@@ -0,0 +1 @@
+export { VALIDATOR_TYPE, SOURCE_DATA_WARNING_MESSAGE, intlDateValidator, sourceDataValidator } from "./intlDateValidator.mjs";

package/validators/intlDateValidator/intlDateValidator.d.ts

@@ -0,0 +1,6 @@
+import { CellProperties } from '../../settings';
+import { CellValue } from '../../common';
+
+export const VALIDATOR_TYPE: 'intl-date';
+export function sourceDataValidator(value: CellValue, cellProperties: CellProperties): boolean;
+export function intlDateValidator(this: CellProperties, value: CellValue, callback: (valid: boolean) => void): void;

package/validators/intlDateValidator/intlDateValidator.js

@@ -0,0 +1,39 @@
+"use strict";
+
+exports.__esModule = true;
+exports.intlDateValidator = intlDateValidator;
+exports.sourceDataValidator = sourceDataValidator;
+var _dateTime = require("../../helpers/dateTime");
+var _mixed = require("../../helpers/mixed");
+const VALIDATOR_TYPE = exports.VALIDATOR_TYPE = 'intl-date';
+const SOURCE_DATA_WARNING_MESSAGE = exports.SOURCE_DATA_WARNING_MESSAGE = 'Source data warning ([itemsCount]). ' + 'Invalid value for "intl-date" cell type.\n\n' + '[affectedCells]\n\n' + 'Expected a value compatible with the ISO 8601 date format ("YYYY-MM-DD").';
+
+/**
+ * Source data validator.
+ *
+ * @param {*} value Value of the source data of the cell.
+ * @param {CellMeta} cellMeta Cell meta object.
+ * @returns {boolean} True if valid, false otherwise.
+ */
+function sourceDataValidator(value, cellMeta) {
+  if (cellMeta.allowEmpty && (0, _mixed.isEmpty)(value)) {
+    return true;
+  }
+  return (0, _dateTime.isValidISODate)(value);
+}
+
+/**
+ * The Date cell validator.
+ *
+ * @private
+ * @param {*} value Value of edited cell.
+ * @param {Function} callback Callback called with validation result.
+ */
+function intlDateValidator(value, callback) {
+  if (this.allowEmpty && (0, _mixed.isEmpty)(value)) {
+    callback(true);
+    return;
+  }
+  callback((0, _dateTime.isValidISODate)(value));
+}
+intlDateValidator.VALIDATOR_TYPE = VALIDATOR_TYPE;