From d173b6821056fdfb1f66481f73b2776cd2c484ce Mon Sep 17 00:00:00 2001
From: Krzysztof Budnik <571316+budnix@users.noreply.github.com>
Date: Mon, 27 Mar 2023 09:15:54 +0200
Subject: [PATCH 1/4] Fix error that disallow getting the HoT instance using
 useRef within useEffect hooks (#10307)

---
 wrappers/react/src/editorsPortalManager.tsx |  18 ----
 wrappers/react/src/hotColumn.tsx            |  51 ++-------
 wrappers/react/src/hotTable.tsx             | 114 +++++++-------------
 wrappers/react/test/hotTable.spec.tsx       |  21 ++++
 wrappers/react/test/reactUseRef.spec.tsx    |  47 ++++++++
 5 files changed, 113 insertions(+), 138 deletions(-)
 delete mode 100644 wrappers/react/src/editorsPortalManager.tsx
 create mode 100644 wrappers/react/test/reactUseRef.spec.tsx

diff --git a/wrappers/react/src/editorsPortalManager.tsx b/wrappers/react/src/editorsPortalManager.tsx
deleted file mode 100644
index d4fddde375f..00000000000
--- a/wrappers/react/src/editorsPortalManager.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import React from 'react';
-
-/**
- * Component class used to manage the editor component portals.
- */
-export class EditorsPortalManager extends React.Component<{}, { portals?: React.ReactElement[] }> {
-  state = {
-    portals: []
-  };
-
-  render() {
-    return (
-      <React.Fragment>
-        {this.state.portals}
-      </React.Fragment>
-    )
-  }
-}
diff --git a/wrappers/react/src/hotColumn.tsx b/wrappers/react/src/hotColumn.tsx
index 793d3f1a42c..b0bd1291470 100644
--- a/wrappers/react/src/hotColumn.tsx
+++ b/wrappers/react/src/hotColumn.tsx
@@ -1,33 +1,16 @@
-import React, { ReactPortal } from 'react';
+import React from 'react';
 import { HotTableProps, HotColumnProps } from './types';
 import {
   createEditorPortal,
   getExtendedEditorElement,
 } from './helpers';
 import { SettingsMapper } from './settingsMapper';
-import { EditorsPortalManager } from './editorsPortalManager';
 import Handsontable from 'handsontable/base';
 
 class HotColumn extends React.Component<HotColumnProps, {}> {
   internalProps: string[];
   columnSettings: Handsontable.ColumnSettings;
 
-  /**
-   * Component used to manage the editor portals.
-   *
-   * @type {React.Component}
-   */
-  private editorsPortalManager: EditorsPortalManager = null;
-
-  /**
-   * Set the editors portal manager ref.
-   *
-   * @param {React.ReactComponent} pmComponent The PortalManager component.
-   */
-  private setEditorsPortalManagerRef(pmComponent: EditorsPortalManager): void {
-    this.editorsPortalManager = pmComponent;
-  }
-
   /**
    * Filter out all the internal properties and return an object with just the Handsontable-related props.
    *
@@ -76,21 +59,6 @@ class HotColumn extends React.Component<HotColumnProps, {}> {
     }
   }
 
-  /**
-   * Creates the local editor portal and renders it within the editors portal manager component.
-   *
-   * @param {Function} callback Callback to call which is triggered after the editors portal is rendered.
-   */
-  renderLocalEditorPortal(callback: () => void): void {
-    const editorCache = this.props._getEditorCache();
-    const localEditorElement = getExtendedEditorElement(this.props.children, editorCache, this.props._columnIndex);
-    const editorPortal = createEditorPortal(this.props._getOwnerDocument(), localEditorElement);
-
-    this.editorsPortalManager.setState({
-      portals: [editorPortal]
-    }, callback);
-  }
-
   /**
    * Emit the column settings to the parent using a prop passed from the parent.
    */
@@ -108,20 +76,16 @@ class HotColumn extends React.Component<HotColumnProps, {}> {
    * Logic performed after the mounting of the HotColumn component.
    */
   componentDidMount(): void {
-    this.renderLocalEditorPortal(() => {
-      this.createColumnSettings();
-      this.emitColumnSettings();
-    });
+    this.createColumnSettings();
+    this.emitColumnSettings();
   }
 
   /**
    * Logic performed after the updating of the HotColumn component.
    */
   componentDidUpdate(): void {
-    this.renderLocalEditorPortal(() => {
-      this.createColumnSettings();
-      this.emitColumnSettings();
-    });
+    this.createColumnSettings();
+    this.emitColumnSettings();
   }
 
   /**
@@ -130,9 +94,12 @@ class HotColumn extends React.Component<HotColumnProps, {}> {
    * @returns {React.ReactElement}
    */
   render(): React.ReactElement {
+    const ownerDocument = this.props._getOwnerDocument();
+    const editorPortal = createEditorPortal(ownerDocument, this.getLocalEditorElement());
+
     return (
       <React.Fragment>
-        <EditorsPortalManager ref={this.setEditorsPortalManagerRef.bind(this)} />
+        {editorPortal}
       </React.Fragment>
     )
   }
diff --git a/wrappers/react/src/hotTable.tsx b/wrappers/react/src/hotTable.tsx
index df12c0a2e4a..34e19579ec9 100644
--- a/wrappers/react/src/hotTable.tsx
+++ b/wrappers/react/src/hotTable.tsx
@@ -2,7 +2,6 @@ import React from 'react';
 import Handsontable from 'handsontable/base';
 import { SettingsMapper } from './settingsMapper';
 import { RenderersPortalManager } from './renderersPortalManager';
-import { EditorsPortalManager } from './editorsPortalManager';
 import { HotColumn } from './hotColumn';
 import * as packageJson from '../package.json';
 import {
@@ -93,12 +92,6 @@ class HotTable extends React.Component<HotTableProps, {}> {
    * @type {React.Component}
    */
   renderersPortalManager: RenderersPortalManager = null;
-  /**
-   * Component used to manage the editor portals.
-   *
-   * @type {React.Component}
-   */
-  private editorsPortalManager: EditorsPortalManager = null;
 
   /**
    * Array containing the portals cashed to be rendered in bulk after Handsontable's render cycle.
@@ -194,7 +187,6 @@ class HotTable extends React.Component<HotTableProps, {}> {
    * Clear both the editor and the renderer cache.
    */
   clearCache(): void {
-    this.getEditorCache().clear();
     this.getRenderedCellCache().clear();
     this.componentRendererColumns.clear();
   }
@@ -342,20 +334,6 @@ class HotTable extends React.Component<HotTableProps, {}> {
     return getExtendedEditorElement(this.props.children, this.getEditorCache());
   }
 
-  /**
-   * Creates the global editor portal and renders it within the editors portal manager component.
-   *
-   * @param {Function} callback Callback to call which is triggered after the editors portal is rendered.
-   */
-  renderGlobalEditorPortal(callback: () => void): void {
-    const globalEditorElement = this.getGlobalEditorElement();
-    const editorPortal = createEditorPortal(this.getOwnerDocument(), globalEditorElement)
-
-    this.editorsPortalManager.setState({
-      portals: [editorPortal]
-    }, callback);
-  }
-
   /**
    * Create a new settings object containing the column settings and global editors and renderers.
    *
@@ -426,13 +404,10 @@ class HotTable extends React.Component<HotTableProps, {}> {
    * Handsontable's `afterViewRender` hook callback.
    */
   handsontableAfterViewRender(): void {
-    this.renderersPortalManager.setState(() => {
-      return Object.assign({}, {
-        portals: this.portalCacheArray
-      });
-
+    this.renderersPortalManager.setState({
+      portals: [...this.portalCacheArray]
     }, () => {
-      this.portalCacheArray.length = 0;
+      this.portalCacheArray = [];
     });
   }
 
@@ -455,14 +430,6 @@ class HotTable extends React.Component<HotTableProps, {}> {
   private setRenderersPortalManagerRef(pmComponent: RenderersPortalManager): void {
     this.renderersPortalManager = pmComponent;
   }
-  /**
-   * Set the editors portal manager ref.
-   *
-   * @param {React.ReactComponent} pmComponent The PortalManager component.
-   */
-  private setEditorsPortalManagerRef(pmComponent: EditorsPortalManager): void {
-    this.editorsPortalManager = pmComponent;
-  }
 
   /*
   ---------------------------------------
@@ -474,26 +441,17 @@ class HotTable extends React.Component<HotTableProps, {}> {
    * Initialize Handsontable after the component has mounted.
    */
   componentDidMount(): void {
-    this.clearCache();
-    this.renderGlobalEditorPortal(() => {
-      // In React strict mode the mount/unmount is triggered twice. The `if` prevents
-      // creating two Handsontable instances for the same component in that mode.
-      if (this.hotInstance) {
-        return;
-      }
+    const newGlobalSettings = this.createNewGlobalSettings();
 
-      const newGlobalSettings = this.createNewGlobalSettings();
+    this.hotInstance = new Handsontable.Core(this.hotElementRef, newGlobalSettings);
 
-      this.hotInstance = new Handsontable.Core(this.hotElementRef, newGlobalSettings);
+    this.hotInstance.addHook('beforeViewRender', () => this.handsontableBeforeViewRender());
+    this.hotInstance.addHook('afterViewRender', () => this.handsontableAfterViewRender());
 
-      this.hotInstance.addHook('beforeViewRender', () => this.handsontableBeforeViewRender());
-      this.hotInstance.addHook('afterViewRender', () => this.handsontableAfterViewRender());
+    // `init` missing in Handsontable's type definitions.
+    (this.hotInstance as any).init();
 
-      // `init` missing in Handsontable's type definitions.
-      (this.hotInstance as any).init();
-
-      this.displayAutoSizeWarning(newGlobalSettings);
-    });
+    this.displayAutoSizeWarning(newGlobalSettings);
   }
 
   /**
@@ -501,18 +459,19 @@ class HotTable extends React.Component<HotTableProps, {}> {
    */
   componentDidUpdate(): void {
     this.clearCache();
-    this.renderGlobalEditorPortal(() => {
-      const newGlobalSettings = this.createNewGlobalSettings();
 
-      this.updateHot(newGlobalSettings);
-      this.displayAutoSizeWarning(newGlobalSettings);
-    });
+    const newGlobalSettings = this.createNewGlobalSettings();
+
+    this.updateHot(newGlobalSettings);
+    this.displayAutoSizeWarning(newGlobalSettings);
   }
 
   /**
    * Destroy the Handsontable instance when the parent component unmounts.
    */
   componentWillUnmount(): void {
+    this.clearCache();
+
     if (this.hotInstance) {
       this.hotInstance.destroy();
     }
@@ -524,35 +483,34 @@ class HotTable extends React.Component<HotTableProps, {}> {
   render(): React.ReactElement {
     const containerProps = getContainerAttributesProps(this.props);
     const isHotColumn = (childNode: any) => childNode.type === HotColumn;
-    let children = React.Children.toArray(this.props.children);
-
-    // filter out anything that's not a HotColumn
-    children = children.filter(function (childNode: any) {
-      return isHotColumn(childNode);
-    });
+    const children = React.Children.toArray(this.props.children);
 
     // clone the HotColumn nodes and extend them with the callbacks
-    let childClones = children.map((childNode: React.ReactElement, columnIndex: number) => {
-      return React.cloneElement(childNode, {
-        _componentRendererColumns: this.componentRendererColumns,
-        _emitColumnSettings: this.setHotColumnSettings.bind(this),
-        _columnIndex: columnIndex,
-        _getChildElementByType: getChildElementByType.bind(this),
-        _getRendererWrapper: this.getRendererWrapper.bind(this),
-        _getEditorClass: this.getEditorClass.bind(this),
-        _getOwnerDocument: this.getOwnerDocument.bind(this),
-        _getEditorCache: this.getEditorCache.bind(this),
-        children: childNode.props.children
-      } as object);
-    });
+    const hotColumnClones = children
+      .filter((childNode: any) => isHotColumn(childNode))
+      .map((childNode: React.ReactElement, columnIndex: number) => {
+        return React.cloneElement(childNode, {
+          _componentRendererColumns: this.componentRendererColumns,
+          _emitColumnSettings: this.setHotColumnSettings.bind(this),
+          _columnIndex: columnIndex,
+          _getChildElementByType: getChildElementByType.bind(this),
+          _getRendererWrapper: this.getRendererWrapper.bind(this),
+          _getEditorClass: this.getEditorClass.bind(this),
+          _getOwnerDocument: this.getOwnerDocument.bind(this),
+          _getEditorCache: this.getEditorCache.bind(this),
+          children: childNode.props.children
+        } as object);
+      });
+
+    const editorPortal = createEditorPortal(this.getOwnerDocument(), this.getGlobalEditorElement());
 
     return (
       <React.Fragment>
         <div ref={this.setHotElementRef.bind(this)} {...containerProps}>
-          {childClones}
+          {hotColumnClones}
         </div>
         <RenderersPortalManager ref={this.setRenderersPortalManagerRef.bind(this)} />
-        <EditorsPortalManager ref={this.setEditorsPortalManagerRef.bind(this)} />
+        {editorPortal}
       </React.Fragment>
     )
   }
diff --git a/wrappers/react/test/hotTable.spec.tsx b/wrappers/react/test/hotTable.spec.tsx
index 5b45eb53711..89a5a4b059b 100644
--- a/wrappers/react/test/hotTable.spec.tsx
+++ b/wrappers/react/test/hotTable.spec.tsx
@@ -164,6 +164,27 @@ describe('Renderer configuration using React components', () => {
 });
 
 describe('Editor configuration using React components', () => {
+  it('should use the editor component as Handsontable editor and mount it in the root tree of the document', async () => {
+    mountComponent((
+      <HotTable licenseKey="non-commercial-and-evaluation"
+                id="test-hot"
+                data={createSpreadsheetData(3, 3)}
+                width={300}
+                height={300}
+                rowHeights={23}
+                colWidths={50}
+                init={function () {
+                  mockElementDimensions(this.rootElement, 300, 300);
+                }}>
+        <EditorComponent hot-editor></EditorComponent>
+      </HotTable>
+    )).hotInstance;
+
+    const editorElement = document.querySelector('#editorComponentContainer');
+
+    expect(editorElement.parentElement.parentElement).toBe(document.body);
+  });
+
   it('should use the editor component as Handsontable editor, when it\'s nested under HotTable and assigned the \'hot-editor\' attribute', async () => {
     const hotInstance = mountComponent((
       <HotTable licenseKey="non-commercial-and-evaluation"
diff --git a/wrappers/react/test/reactUseRef.spec.tsx b/wrappers/react/test/reactUseRef.spec.tsx
new file mode 100644
index 00000000000..0f2c1fa82e9
--- /dev/null
+++ b/wrappers/react/test/reactUseRef.spec.tsx
@@ -0,0 +1,47 @@
+import React, { useEffect, useRef } from 'react';
+import {
+  HotTable
+} from '../src/hotTable';
+import {
+  createSpreadsheetData,
+  mockElementDimensions,
+  mountComponent
+} from './_helpers';
+
+describe('Using useRef hooks within HotTable', () => {
+  it('should be possible the get Handsontable instance', async () => {
+    const refData = createSpreadsheetData(3, 3);
+    let data;
+
+    function ExampleComponent() {
+      const hotRef = useRef(null);
+
+      useEffect(() => {
+        const hot = hotRef.current.hotInstance;
+
+        data = hot.getData();
+      });
+
+      return (
+        <HotTable licenseKey="non-commercial-and-evaluation"
+          ref={hotRef}
+          id="test-hot"
+          data={refData}
+          width={300}
+          height={300}
+          rowHeights={23}
+          colWidths={50}
+          init={function () {
+            mockElementDimensions(this.rootElement, 300, 300);
+          }}
+        ></HotTable>
+      )
+    }
+
+    mountComponent((
+      <ExampleComponent/>
+    ));
+
+    expect(data).toEqual(refData);
+  });
+});

From a3244c81bb88019a22daf4cb6d6dcf7bf7917a90 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakub=20Wi=C5=9Bniewski?=
 <jakub.wisniewski@handsontable.com>
Date: Mon, 27 Mar 2023 12:55:00 +0200
Subject: [PATCH 2/4] Docs: Add Rows sorting redirects for frameworks (#10308)

---
 CHANGELOG.md                                   |  3 ++-
 docs/content/guides/rows/rows-sorting.md       | 18 +++++++++---------
 .../upgrade-and-migration/release-notes.md     |  2 ++
 docs/docker/redirects.conf                     |  2 ++
 4 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f1ed8de52f5..6e2c6ccfe67 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -12,9 +12,9 @@ adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 ## [12.3.2] - 2023-03-23
 
 ### Added
-
 - Added a Chinese (zh-CN) translation of the "Copy with headers" feature.
   [#10273](https://github.com/handsontable/handsontable/pull/10273)
+- Added a new "Rows sorting" guide. [#10183](https://github.com/handsontable/handsontable/pull/10183)
 
 ### Fixed
 
@@ -27,6 +27,7 @@ adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
   [`getDataAtCol()`](https://handsontable.com/docs/javascript-data-grid/api/core/#getdataatcol) or
   [`getDataAtProp()`](https://handsontable.com/docs/javascript-data-grid/api/core/#getdataatprop) caused an error when the data set had more than 125 000 rows.
   [#10226](https://github.com/handsontable/handsontable/pull/10226)
+- 
 
 ## [12.3.1] - 2023-02-06
 
diff --git a/docs/content/guides/rows/rows-sorting.md b/docs/content/guides/rows/rows-sorting.md
index d64bdd968ae..e801055b60b 100644
--- a/docs/content/guides/rows/rows-sorting.md
+++ b/docs/content/guides/rows/rows-sorting.md
@@ -47,10 +47,10 @@ patterns and trends.
 
 You can sort data in different ways:
 
-- Alphabetically, numerically, or based on a [custom sorting logic](#sort-different-types-of-data)
-- In ascending, descending, or a [custom order](#add-a-custom-comparator)
-- By a single column, or by [multiple columns](#sort-by-multiple-columns)
-- Using Handsontable's [UI](#demo) or [API](#control-sorting-programmatically)
+- Alphabetically, numerically, or based on a custom sorting logic
+- In ascending, descending, or a custom order
+- By a single column, or by multiple columns
+- Using Handsontable's UI or API
 
 Handsontable sorts data only visually, so your source data remains in the original order. To save
 your sorting changes in the data source, see this guide:
@@ -176,7 +176,7 @@ const handsontableInstance = new Handsontable(container, {
 ::: example #example1 :react
 
 ```jsx
-// to import just individual modules, see the 'Import the sorting module' section of this page
+// to import sorting as an individual module, see the 'Import the sorting module' section of this page
 
 import { HotTable } from '@handsontable/react';
 import { registerAllModules } from 'handsontable/registry';
@@ -3831,11 +3831,11 @@ ReactDOM.render(<HandsontableComponent />, document.getElementById('example11'))
 You can run your code before or after sorting, using the following
 [Handsontable hooks](@/guides/getting-started/events-and-hooks.md):
 
-- [`beforeColumnSort`](@/api/hooks.md#beforecolumnsort)
-- [`afterColumnSort`](@/api/hooks.md#aftercolumnsort)
+- [`beforeColumnSort()`](@/api/hooks.md#beforecolumnsort)
+- [`afterColumnSort()`](@/api/hooks.md#aftercolumnsort)
 
-For example, you can use [`beforeColumnSort`](@/api/hooks.md#beforecolumnsort) for server-side
-sorting, or use [`afterColumnSort`](@/api/hooks.md#aftercolumnsort) to
+For example, you can use [`beforeColumnSort()`](@/api/hooks.md#beforecolumnsort) for server-side
+sorting, or use [`afterColumnSort()`](@/api/hooks.md#aftercolumnsort) to
 [exclude rows from sorting](#exclude-rows-from-sorting).
 
 ::: only-for javascript
diff --git a/docs/content/guides/upgrade-and-migration/release-notes.md b/docs/content/guides/upgrade-and-migration/release-notes.md
index 4acbc337d55..1291a07ddb9 100644
--- a/docs/content/guides/upgrade-and-migration/release-notes.md
+++ b/docs/content/guides/upgrade-and-migration/release-notes.md
@@ -37,6 +37,8 @@ For more information on this release, see:
 
 - Added a Chinese (zh-CN) translation of the "Copy with headers" feature.
   [#10273](https://github.com/handsontable/handsontable/pull/10273)
+- Added a new "[Rows sorting](https://handsontable.com/docs/rows-sorting)" guide.
+  [#10183](https://github.com/handsontable/handsontable/pull/10183)
 
 #### Fixed
 
diff --git a/docs/docker/redirects.conf b/docs/docker/redirects.conf
index a964f2e7bd6..fde967607fe 100644
--- a/docs/docker/redirects.conf
+++ b/docs/docker/redirects.conf
@@ -116,6 +116,8 @@ rewrite ^/docs/vue3-simple-example/?$ /docs/javascript-data-grid/vue3-basic-exam
 rewrite ^/docs/vue3-setting-up-a-language/?$ /docs/javascript-data-grid/vue3-setting-up-a-translation/ permanent;
 rewrite ^/docs/row-sorting/?$ /docs/$framework/rows-sorting/ permanent;
 rewrite ^/docs/column-sorting/?$ /docs/$framework/rows-sorting/ permanent;
+rewrite ^/docs/(javascript|react)-data-grid/row-sorting/?$ /docs/$framework/rows-sorting/ permanent;
+rewrite ^/docs/(javascript|react)-data-grid/column-sorting/?$ /docs/$framework/rows-sorting/ permanent;
 
 # --- demos ---
 rewrite ^/docs/((\d+\.\d+|next)/)?demo-scrolling/?$ /docs/$1$framework/row-virtualization/ permanent;

From 4450490bb230ae983c1d889ac0e03a19ddce0493 Mon Sep 17 00:00:00 2001
From: Wojciech Szymanski <141330+wszymanski@users.noreply.github.com>
Date: Mon, 27 Mar 2023 13:47:42 +0200
Subject: [PATCH 3/4] Updated wrapper types definition to 18.x

---
 wrappers/react/package.json | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/wrappers/react/package.json b/wrappers/react/package.json
index 8e61b5c1eb4..1b8ac4e9699 100644
--- a/wrappers/react/package.json
+++ b/wrappers/react/package.json
@@ -11,8 +11,8 @@
   "unpkg": "./dist/react-handsontable.min.js",
   "types": "./index.d.ts",
   "exports": {
-    "./dist/react-handsontable.js" : "./dist/react-handsontable.js",
-    "./dist/react-handsontable.min.js" : "./dist/react-handsontable.min.js",
+    "./dist/react-handsontable.js": "./dist/react-handsontable.js",
+    "./dist/react-handsontable.min.js": "./dist/react-handsontable.min.js",
     ".": {
       "import": "./es/react-handsontable.mjs",
       "require": "./commonjs/react-handsontable.js"
@@ -60,20 +60,21 @@
     "@babel/preset-react": "^7.9.4",
     "@babel/preset-typescript": "^7.9.0",
     "@babel/runtime": "^7.9.2",
-    "@types/react-dom": "^16.9.1",
+    "@types/react": "^18.0.29",
+    "@types/react-dom": "^18.0.11",
     "@types/react-redux": "^7.1.7",
-    "@types/react": "^16.9.5",
     "babel-core": "^7.0.0-bridge.0",
     "cpy-cli": "^3.1.1",
     "cross-env": "^7.0.3",
     "handsontable": "^12.0.0",
     "jest": "^25.1.0",
     "prop-types": "^15.7.2",
+    "react": "^16.10.2",
     "react-dom": "^16.10.2",
     "react-redux": "^7.1.1",
-    "react": "^16.10.2",
     "redux": "^4.0.4",
     "rimraf": "^3.0.2",
+    "rollup": "^2.58.0",
     "rollup-plugin-alias": "^1.5.2",
     "rollup-plugin-babel": "^4.3.3",
     "rollup-plugin-commonjs": "^10.0.1",
@@ -82,7 +83,6 @@
     "rollup-plugin-replace": "^2.2.0",
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-typescript2": "^0.22.1",
-    "rollup": "^2.58.0",
     "typescript": "3.8.2",
     "uglify-js": "^3.4.9"
   },

From 9bf0a216c2e42944dc3677b75b26561ad9e3d492 Mon Sep 17 00:00:00 2001
From: Wojciech Szymanski <141330+wszymanski@users.noreply.github.com>
Date: Mon, 27 Mar 2023 14:12:21 +0200
Subject: [PATCH 4/4] WIP: Updated package-lock.json after updating
 package.json file

---
 package-lock.json | 71 +++++++++++++++++++++++++++++++----------------
 1 file changed, 47 insertions(+), 24 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index b9264a500c7..2d8fc4c3aa1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -135,6 +135,7 @@
       }
     },
     "handsontable/.config/plugin/eslint": {
+      "name": "eslint-plugin-handsontable",
       "version": "1.0.0",
       "dev": true
     },
@@ -6156,15 +6157,6 @@
         "csstype": "^3.0.2"
       }
     },
-    "node_modules/@types/react-dom": {
-      "version": "16.9.18",
-      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-16.9.18.tgz",
-      "integrity": "sha512-lmNARUX3+rNF/nmoAFqasG0jAA7q6MeGZK/fdeLwY3kAA4NPgHHrG5bNQe2B5xmD4B+x6Z6h0rEJQ7MEEgQxsw==",
-      "dev": true,
-      "dependencies": {
-        "@types/react": "^16"
-      }
-    },
     "node_modules/@types/react-redux": {
       "version": "7.1.25",
       "resolved": "https://registry.npmjs.org/@types/react-redux/-/react-redux-7.1.25.tgz",
@@ -37610,7 +37602,7 @@
     },
     "visual-tests": {
       "name": "handsontable-visual-tests",
-      "version": "12.3.2",
+      "version": "0.0.0",
       "license": "CC BY 4.0",
       "devDependencies": {
         "@argos-ci/cli": "^0.3.1",
@@ -37777,8 +37769,8 @@
         "@babel/preset-react": "^7.9.4",
         "@babel/preset-typescript": "^7.9.0",
         "@babel/runtime": "^7.9.2",
-        "@types/react": "^16.9.5",
-        "@types/react-dom": "^16.9.1",
+        "@types/react": "^18.0.29",
+        "@types/react-dom": "^18.0.11",
         "@types/react-redux": "^7.1.7",
         "babel-core": "^7.0.0-bridge.0",
         "cpy-cli": "^3.1.1",
@@ -38047,6 +38039,26 @@
       "integrity": "sha512-5qOlnZscTn4xxM5MeGXAMOsIOIKIbh9e85zJWfBRVPlRMEVawzoPhINYbRGkBZCI8LxvBe7tJCdWiarA99OZfQ==",
       "dev": true
     },
+    "wrappers/react/node_modules/@types/react": {
+      "version": "18.0.29",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.29.tgz",
+      "integrity": "sha512-wXHktgUABxplw1+UnljseDq4+uztQyp2tlWZRIxHlpchsCFqiYkvaDS8JR7eKOQm8wziTH/el5qL7D6gYNkYcw==",
+      "dev": true,
+      "dependencies": {
+        "@types/prop-types": "*",
+        "@types/scheduler": "*",
+        "csstype": "^3.0.2"
+      }
+    },
+    "wrappers/react/node_modules/@types/react-dom": {
+      "version": "18.0.11",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.0.11.tgz",
+      "integrity": "sha512-O38bPbI2CWtgw/OoQoY+BRelw7uysmXbWvw3nLWO21H1HSh+GOlqPuXshJfjmpNlKiiSDG9cc1JZAaMmVdcTlw==",
+      "dev": true,
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
     "wrappers/react/node_modules/@types/stack-utils": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-1.0.1.tgz",
@@ -43358,8 +43370,8 @@
         "@babel/preset-react": "^7.9.4",
         "@babel/preset-typescript": "^7.9.0",
         "@babel/runtime": "^7.9.2",
-        "@types/react": "^16.9.5",
-        "@types/react-dom": "^16.9.1",
+        "@types/react": "^18.0.29",
+        "@types/react-dom": "^18.0.11",
         "@types/react-redux": "^7.1.7",
         "babel-core": "^7.0.0-bridge.0",
         "cpy-cli": "^3.1.1",
@@ -43590,6 +43602,26 @@
           "integrity": "sha512-5qOlnZscTn4xxM5MeGXAMOsIOIKIbh9e85zJWfBRVPlRMEVawzoPhINYbRGkBZCI8LxvBe7tJCdWiarA99OZfQ==",
           "dev": true
         },
+        "@types/react": {
+          "version": "18.0.29",
+          "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.29.tgz",
+          "integrity": "sha512-wXHktgUABxplw1+UnljseDq4+uztQyp2tlWZRIxHlpchsCFqiYkvaDS8JR7eKOQm8wziTH/el5qL7D6gYNkYcw==",
+          "dev": true,
+          "requires": {
+            "@types/prop-types": "*",
+            "@types/scheduler": "*",
+            "csstype": "^3.0.2"
+          }
+        },
+        "@types/react-dom": {
+          "version": "18.0.11",
+          "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.0.11.tgz",
+          "integrity": "sha512-O38bPbI2CWtgw/OoQoY+BRelw7uysmXbWvw3nLWO21H1HSh+GOlqPuXshJfjmpNlKiiSDG9cc1JZAaMmVdcTlw==",
+          "dev": true,
+          "requires": {
+            "@types/react": "*"
+          }
+        },
         "@types/stack-utils": {
           "version": "1.0.1",
           "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-1.0.1.tgz",
@@ -43626,7 +43658,7 @@
           "requires": {
             "@babel/template": "^7.3.3",
             "@babel/types": "^7.3.3",
-            "@types/babel__traverse": "7.18.2"
+            "@types/babel__traverse": "^7.0.6"
           }
         },
         "babel-preset-current-node-syntax": {
@@ -46054,15 +46086,6 @@
         "csstype": "^3.0.2"
       }
     },
-    "@types/react-dom": {
-      "version": "16.9.18",
-      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-16.9.18.tgz",
-      "integrity": "sha512-lmNARUX3+rNF/nmoAFqasG0jAA7q6MeGZK/fdeLwY3kAA4NPgHHrG5bNQe2B5xmD4B+x6Z6h0rEJQ7MEEgQxsw==",
-      "dev": true,
-      "requires": {
-        "@types/react": "^16"
-      }
-    },
     "@types/react-redux": {
       "version": "7.1.25",
       "resolved": "https://registry.npmjs.org/@types/react-redux/-/react-redux-7.1.25.tgz",