Merge branch 'release/12.4.0'

.github/workflows/code-examples.yml

@@ -337,7 +337,9 @@ jobs:
       fail-fast: false
       matrix:
         version: ${{fromJson(needs.prepare-matrix.outputs.versions)}}
-        framework: [angular, angular-9, angular-10, angular-11, angular-12, angular-13, js, react, vue, vue3, ts]
+        # TODO: IMPORTANT! Add `angular` to the list below after fixing the issue described in
+        # https://github.com/handsontable/dev-handsontable/issues/1292
+        framework: [angular-9, angular-10, angular-11, angular-12, angular-13, js, react, vue, vue3, ts]
 
     env:
       FRAMEWORK_EXAMPLES_PATH: examples/${{ matrix.version }}/docs/${{ matrix.framework }}

.github/workflows/docs-staging.yml

@@ -35,7 +35,13 @@ jobs:
         run: |
           echo "${{ secrets.GITHUB_TOKEN }}" | docker login -u ${GITHUB_ACTOR} --password-stdin https://docker.pkg.github.com
 
-      - name: Dependencies
+      - name: Install the monorepo dependencies and build the packages
+        run: |
+          cd ..
+          npm ci
+          npm run all build -- --e examples visual-tests
+
+      - name: Install the documentation dependencies
         run: |
           npm ci
 

CHANGELOG.md

@@ -9,6 +9,31 @@ adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 <!-- UNVERSIONED -->
 
+## [12.4.0] - 2023-05-23
+
+### Added
+
+- Added two new Handsontable hooks, `afterColumnSequenceChange` and `afterRowSequenceChange`, which are fired after changing the order of columns or rows, respectively. [#10215](https://github.com/handsontable/handsontable/pull/10215)
+
+### Fixed
+
+- Fixed numerous issues related to syncing Handsontable with HyperFormula. Now, formulas work properly with all the Handsontable features. [#10215](https://github.com/handsontable/handsontable/pull/10215)
+- Fixed na issue where formulas didn't recalculate after rows or columns were moved. [#4668](https://github.com/handsontable/handsontable/issues/4668)
+- Fixed an issue where Handsontable's dates didn't sync correctly with HyperFormula's dates. [#10085](https://github.com/handsontable/handsontable/issues/10085)
+- Fixed an issue where calling `updateSettings()` would reset HyperFormula's undo/redo actions stack. [#10326](https://github.com/handsontable/handsontable/pull/10326)
+- Fixed an issue where the `Autofill`, `TrimRows` and `Formulas` plugins didn't work properly together. [#10200](https://github.com/handsontable/handsontable/issues/10200)
+- Fixed an issue where the `modifySourceData` hook used the wrong type of indexes. [#10215](https://github.com/handsontable/handsontable/pull/10215)
+- Fixed an issue where text copied from Handsontable to Excel included wrong types of spaces. [#10017](https://github.com/handsontable/handsontable/issues/10017)
+- Fixed an issue where mousing over the same cell twice didn't trigger the `beforeOnCellMouseOver` and `afterOnCellMouseOver` hooks. [#10321](https://github.com/handsontable/handsontable/pull/10321)
+- Updated TypeScript definition files related to the `CustomBorders` plugin. [#10360](https://github.com/handsontable/handsontable/pull/10360)
+- Fixed an issue where moving rows manually to the bottom was difficult due the misalignment between the backlight and guideline elements. [#9556](https://github.com/handsontable/handsontable/issues/9556)
+
+For more information on Handsontable 12.4.0, see:
+
+- [Blog post (12.4.0)](https://handsontable.com/blog/handsontable-12-4-0-auto-updating-formulas)
+- [Documentation (12.4)](https://handsontable.com/docs/12.4)
+- [Release notes (12.4.0)](https://handsontable.com/docs/release-notes/#_12-4-0)
+
 ## [12.3.3] - 2023-03-28
 
 ### Added

docs/.gitignore

@@ -15,6 +15,7 @@ report-check-links.xlsx
 ~$*.xlsx
 
 /.vuepress/public/handsontable
+/.vuepress/public/@handsontable
 /.vuepress/public/data/
 /.build-tmp/
 

docs/.vuepress/handsontable-manager/dependencies.js

@@ -2,23 +2,52 @@
 const isBrowser = (typeof window !== 'undefined');
 
 const formatVersion = version => (/^\d+\.\d+$/.test(version) ? version : 'latest');
-const getHotUrls = (version) => {
+
+/**
+ * Gets the local/remote package url for the required file type.
+ *
+ * @param {string} packageName The package name.
+ * @param {string} version The package version. If specified as 'next', the local urls will be returned.
+ * @param {'js'|'css'|string} fileSelection If set to `js` or `css`, it will return the urls of the default js/css
+ * files. If any other value is provided, it will be treated as a path the required file.
+ * @returns {string} Url to the required file.
+ */
+const getPackageUrls = (packageName, version, fileSelection) => {
+  const subDirs = {
+    handsontable: {
+      js: 'handsontable.full.min.js',
+      css: 'handsontable.full.min.css'
+    },
+    '@handsontable/react': {
+      js: 'react-handsontable.min.js'
+    },
+    '@handsontable/angular': {
+      js: 'handsontable-angular.umd.min.js',
+      subDir: 'bundles/'
+    },
+    '@handsontable/vue': {
+      js: 'vue-handsontable.min.js'
+    },
+    '@handsontable/vue3': {
+      js: 'vue-handsontable.min.js'
+    }
+  };
+
+  const urlSet = subDirs[packageName];
+
   if (version === 'next' && isBrowser) {
-    return {
-      handsontableJs: '/docs/handsontable/handsontable.full.js',
-      handsontableCss: '/docs/handsontable/handsontable.full.css',
-      languagesJs: '/docs/handsontable/languages/all.js'
-    };
+    return urlSet[fileSelection] ?
+      `/docs/${packageName}/${urlSet[fileSelection]}` :
+      `/docs/${packageName}/${fileSelection}`;
   }
 
   const mappedVersion = formatVersion(version);
 
-  return {
-    handsontableJs: `https://cdn.jsdelivr.net/npm/handsontable@${mappedVersion}/dist/handsontable.full.min.js`,
-    handsontableCss: `https://cdn.jsdelivr.net/npm/handsontable@${mappedVersion}/dist/handsontable.full.min.css`,
-    languagesJs: `https://cdn.jsdelivr.net/npm/handsontable@${mappedVersion}/dist/languages/all.js`
-  };
+  return urlSet[fileSelection] ?
+    `https://cdn.jsdelivr.net/npm/${packageName}@${mappedVersion}/${urlSet.subDir || 'dist/'}${urlSet[fileSelection]}` :
+    `https://cdn.jsdelivr.net/npm/${packageName}@${mappedVersion}/${fileSelection}`;
 };
+
 const getCommonScript = (scriptName, version) => {
   if (isBrowser) {
     // eslint-disable-next-line no-restricted-globals
@@ -43,8 +72,6 @@ const getCommonScript = (scriptName, version) => {
  *                     `{function(dependency: string): [string,string[],string]} [jsUrl, dependentVars[]?, cssUrl?]`.
  */
 const buildDependencyGetter = (version) => {
-  const { handsontableJs, handsontableCss, languagesJs } = getHotUrls(version);
-  const mappedVersion = formatVersion(version);
   const fixer = getCommonScript('fixer', version);
   const helpers = getCommonScript('helpers', version);
 
@@ -53,10 +80,10 @@ const buildDependencyGetter = (version) => {
     const dependencies = {
       fixer,
       helpers,
-      hot: [handsontableJs, ['Handsontable'], handsontableCss],
+      hot: [getPackageUrls('handsontable', version, 'js'), ['Handsontable'], getPackageUrls('handsontable', version, 'css')],
       react: ['https://cdn.jsdelivr.net/npm/react@17/umd/react.production.min.js', ['React']],
       'react-dom': ['https://cdn.jsdelivr.net/npm/react-dom@17/umd/react-dom.production.min.js', ['ReactDOM']],
-      'hot-react': [`https://cdn.jsdelivr.net/npm/@handsontable/react@${mappedVersion}/dist/react-handsontable.js`, ['Handsontable.react']],
+      'hot-react': [getPackageUrls('@handsontable/react', version, 'js'), ['Handsontable.react']],
       'react-redux': ['https://cdnjs.cloudflare.com/ajax/libs/react-redux/7.2.4/react-redux.min.js'],
       'react-colorful': ['https://cdn.jsdelivr.net/npm/react-colorful@5.5.1/dist/index.min.js'],
       'react-star-rating-component': ['https://cdn.jsdelivr.net/npm/react-star-rating-component@1.4.1/dist/react-star-rating-component.min.js'],
@@ -71,17 +98,17 @@ const buildDependencyGetter = (version) => {
       'angular-forms': ['https://cdn.jsdelivr.net/npm/@angular/forms@7/bundles/forms.umd.min.js', [/* todo */]],
       'angular-platform-browser': ['https://cdn.jsdelivr.net/npm/@angular/platform-browser@8/bundles/platform-browser.umd.min.js', [/* todo */]],
       'angular-platform-browser-dynamic': ['https://cdn.jsdelivr.net/npm/@angular/platform-browser-dynamic@8/bundles/platform-browser-dynamic.umd.min.js', [/* todo */]],
-      'hot-angular': [`https://cdn.jsdelivr.net/npm/@handsontable/angular@${mappedVersion}/bundles/handsontable-angular.umd.min.js`, [/* todo */]],
-      'hot-vue': [`https://cdn.jsdelivr.net/npm/@handsontable/vue@${mappedVersion}/dist/vue-handsontable.min.js`, [/* todo */], null, 'hot-vue3'],
-      'hot-vue3': [`https://cdn.jsdelivr.net/npm/@handsontable/vue3@${mappedVersion}/dist/vue-handsontable.min.js`, [/* todo */], null, 'hot-vue'],
+      'hot-angular': [getPackageUrls('@handsontable/angular', version, 'js'), [/* todo */]],
+      'hot-vue': [getPackageUrls('@handsontable/vue', version, 'js'), [/* todo */], null, 'hot-vue3'],
+      'hot-vue3': [getPackageUrls('@handsontable/vue3', version, 'js'), [/* todo */], null, 'hot-vue'],
       vue: ['https://cdn.jsdelivr.net/npm/vue@2/dist/vue.min.js', [/* todo */], null, 'vue3'],
       vuex: ['https://cdn.jsdelivr.net/npm/vuex@3/dist/vuex.min.js', [/* todo */], null, 'vuex4'],
       'vue-color': ['https://cdn.jsdelivr.net/npm/vue-color@2/dist/vue-color.min.js', [/* todo */]],
       'vue-class-component': ['https://cdn.jsdelivr.net/npm/vue-class-component@7.1.0/dist/vue-class-component.min.js', [/* todo */]],
       'vue-star-rating': ['https://cdn.jsdelivr.net/npm/vue-star-rating@1/dist/VueStarRating.umd.min.js', [/* todo */]],
       vue3: ['https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js', [/* todo */], null, 'vue'],
       vuex4: ['https://cdn.jsdelivr.net/npm/vuex@4/dist/vuex.global.min.js', [/* todo */], null, 'vuex'],
-      languages: [languagesJs, [/* todo */]],
+      languages: [getPackageUrls('handsontable', version, 'languages/all.js'), [/* todo */]],
     };
     /* eslint-enable max-len */
 

docs/.vuepress/tools/example-checker/index.js

@@ -47,14 +47,14 @@ const FILE_SERVE_TIMEOUT = 300;
  *
  * @type {number}
  */
-const EXAMPLE_INIT_TIMEOUT = 100;
+const EXAMPLE_INIT_TIMEOUT = 300;
 
 /**
  * Number of tries to perform if the number of the rendered examples differs from the expected count.
  *
  * @type {number}
  */
-const CHECK_TRIES = 15;
+const CHECK_TRIES = 20;
 
 (async() => {
   const FRAMEWORKS_TO_CHECK = getFrameworks();

docs/.vuepress/tools/link-assets.mjs

@@ -7,25 +7,41 @@ const { logger } = utils;
 
 const docsBasePath = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '../..');
 
-const SOURCE_PATH = path.resolve('../handsontable/dist/');
-const TARGET_PATH = path.resolve('./.vuepress/public/handsontable/');
+const SYMLINK_PATHS = [
+  { source: '../handsontable/dist/', target: './.vuepress/public/handsontable/' },
+  { source: '../wrappers/react/dist/', target: './.vuepress/public/@handsontable/react/' },
+  { source: '../wrappers/angular/dist/hot-table/bundles/', target: './.vuepress/public/@handsontable/angular/' },
+  { source: '../wrappers/vue/dist/', target: './.vuepress/public/@handsontable/vue/' },
+  { source: '../wrappers/vue3/dist/', target: './.vuepress/public/@handsontable/vue3/' },
+];
+
+if (!fs.existsSync(path.resolve('./.vuepress/public/@handsontable'))) {
+  fs.mkdirSync(path.resolve('./.vuepress/public/@handsontable'));
+}
 
-const relativeFrom = path.relative(docsBasePath, SOURCE_PATH);
-const relativeTo = path.relative(docsBasePath, TARGET_PATH);
+SYMLINK_PATHS.forEach((paths) => {
+  let { source, target } = paths;
 
-if (fs.existsSync(SOURCE_PATH)) {
-  if (fs.existsSync(TARGET_PATH)) {
-    fs.unlinkSync(TARGET_PATH);
-  }
+  source = path.resolve(source);
+  target = path.resolve(target);
 
-  fs.symlinkSync(
-    SOURCE_PATH,
-    TARGET_PATH,
-    'junction',
-  );
+  const relativeFrom = path.relative(docsBasePath, source);
+  const relativeTo = path.relative(docsBasePath, target);
 
-  logger.success(`Symlink created ${relativeFrom} -> ${relativeTo}.`);
+  if (fs.existsSync(source)) {
+    if (fs.existsSync(target)) {
+      fs.unlinkSync(target);
+    }
 
-} else {
-  logger.error(`Cannot create symlink from ${relativeFrom} - the path doesn't exist.`);
-}
+    fs.symlinkSync(
+      source,
+      target,
+      'junction',
+    );
+
+    logger.success(`Symlink created ${relativeFrom} -> ${relativeTo}.`);
+
+  } else {
+    logger.error(`Cannot create symlink from ${relativeFrom} - the path doesn't exist.`);
+  }
+});

docs/content/guides/accessories-and-menus/export-to-csv.md

@@ -2,7 +2,7 @@
 id: 51aacis1
 title: Export to CSV
 metaTitle: Export to CSV - JavaScript Data Grid | Handsontable
-description: Export your grid's data to the CSV format, as a downloadable file, a blob, or a string. Customize your export using Handsontable's configuration options.
+description: Export your grid's raw data to the CSV format, as a downloadable file, a blob, or a string. Customize your export using Handsontable's configuration options.
 permalink: /export-to-csv
 canonicalUrl: /export-to-csv
 tags:
@@ -16,12 +16,14 @@ searchCategory: Guides
 
 # Export to CSV
 
-Export your grid's data to the CSV format, as a downloadable file, a blob, or a string. Customize your export using Handsontable's configuration options.
+Export your grid's raw data to the CSV format, as a downloadable file, a blob, or a string. Customize your export using Handsontable's configuration options.
 
 [[toc]]
 
 ## Examples
 
+Mind that CSV exports contain only raw data, and don't include formulas, styling, or formatting information.
+
 ### Export to file
 
 ::: only-for javascript

docs/content/guides/cell-types/date-cell-type.md

@@ -87,6 +87,8 @@ correctFormat={true}
 
 ## Basic example
 
+Click on one of the ▼ icons to open an interactive date editor.
+
 ::: only-for javascript
 ::: example #example1
 ```js
@@ -123,7 +125,6 @@ const hot = new Handsontable(container, {
         // First day of the week (0: Sunday, 1: Monday, etc)
         firstDay: 0,
         showWeekNumber: true,
-        numberOfMonths: 3,
         disableDayFn(date) {
           // Disable Sunday and Saturday
           return date.getDay() === 0 || date.getDay() === 6;
@@ -182,7 +183,6 @@ export const ExampleComponent = () => {
             // First day of the week (0: Sunday, 1: Monday, etc)
             firstDay: 0,
             showWeekNumber: true,
-            numberOfMonths: 3,
             licenseKey: 'non-commercial-and-evaluation',
             disableDayFn(date) {
               // Disable Sunday and Saturday
@@ -208,7 +208,6 @@ ReactDOM.render(<ExampleComponent />, document.getElementById('example1'));
 :::
 :::
 
-
 ## Related articles
 
 ### Related guides