fix: Review Table column stretching not working with latest version (…

…#531)

apps/widget/package.json

@@ -1,80 +1,80 @@
 {
-  "name": "@impler/widget",
-  "version": "0.17.0",
-  "author": "implerhq",
-  "license": "MIT",
-  "private": true,
-  "scripts": {
-    "start": "cross-env PORT=3500 BROWSER=none craco start",
-    "start:dev": "cross-env PORT=3500 BROWSER=none craco start",
-    "prebuild": "rimraf build",
-    "build": "craco build",
-    "precommit": "lint-staged",
-    "eject": "craco eject",
-    "lint": "eslint src",
-    "storybook": "start-storybook -p 6006 -s public",
-    "build-storybook": "build-storybook -s public",
-    "envsetup": "chmod +x ./env.sh && ./env.sh && mv env-config.js ./public/env-config.js",
-    "envsetup:docker": "chmod +x ./env.sh && ./env.sh && mv ./env-config.js ./build/env-config.js",
-    "start:static:build": "pnpm envsetup:docker && http-server build -p 3500 --proxy http://localhost:3500?",
-    "start:docker": "pnpm build && pnpm start:static:build"
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  },
-  "lint-staged": {
-    "*.{js,jsx,ts,tsx}": [
-      "eslint"
-    ]
-  },
-  "dependencies": {
-    "@craco/craco": "^6.4.5",
-    "@emotion/react": "^11.10.5",
-    "@handsontable/react": "^14.2.0",
-    "@impler/client": "^0.17.0",
-    "@impler/shared": "^0.17.0",
-    "@mantine/core": "6.0.21",
-    "@mantine/dropzone": "6.0.21",
-    "@mantine/hooks": "6.0.21",
-    "@mantine/notifications": "6.0.21",
-    "@sentry/react": "^7.19.0",
-    "@sentry/tracing": "^7.19.0",
-    "@storybook/addon-essentials": "^6.5.13",
-    "@storybook/react": "^6.5.13",
-    "@tanstack/react-query": "^4.14.5",
-    "axios": "1.6.2",
-    "bootstrap": "4.6.0",
-    "cross-env": "^7.0.3",
-    "file-saver": "^2.0.5",
-    "handsontable": "^14.2.0",
-    "http-server": "^14.1.1",
-    "jquery": "^3.7.1",
-    "moment": "^2.29.4",
-    "react": "18.2.0",
-    "react-datepicker": "^4.21.0",
-    "react-dom": "18.2.0",
-    "react-hook-form": "^7.39.1",
-    "react-router-dom": "^6.4.2",
-    "react-scripts": "5.0.1",
-    "rimraf": "^3.0.2",
-    "web-vitals": "^3.0.4",
-    "webfontloader": "^1.6.28",
-    "webpack-dev-server": "^4.11.1"
-  },
-  "devDependencies": {
-    "@types/file-saver": "^2.0.5",
-    "@types/react": "^18.2.0",
-    "@types/react-datepicker": "^4.19.1",
-    "@types/react-dom": "^18.2.0",
-    "typescript": "^4.8.3"
-  }
-}
+	"name": "@impler/widget",
+	"version": "0.17.0",
+	"author": "implerhq",
+	"license": "MIT",
+	"private": true,
+	"scripts": {
+		"start": "cross-env PORT=3500 BROWSER=none craco start",
+		"start:dev": "cross-env PORT=3500 BROWSER=none craco start",
+		"prebuild": "rimraf build",
+		"build": "craco build",
+		"precommit": "lint-staged",
+		"eject": "craco eject",
+		"lint": "eslint src",
+		"storybook": "start-storybook -p 6006 -s public",
+		"build-storybook": "build-storybook -s public",
+		"envsetup": "chmod +x ./env.sh && ./env.sh && mv env-config.js ./public/env-config.js",
+		"envsetup:docker": "chmod +x ./env.sh && ./env.sh && mv ./env-config.js ./build/env-config.js",
+		"start:static:build": "pnpm envsetup:docker && http-server build -p 3500 --proxy http://localhost:3500?",
+		"start:docker": "pnpm build && pnpm start:static:build"
+	},
+	"browserslist": {
+		"production": [
+			">0.2%",
+			"not dead",
+			"not op_mini all"
+		],
+		"development": [
+			"last 1 chrome version",
+			"last 1 firefox version",
+			"last 1 safari version"
+		]
+	},
+	"lint-staged": {
+		"*.{js,jsx,ts,tsx}": [
+			"eslint"
+		]
+	},
+	"dependencies": {
+		"@craco/craco": "^6.4.5",
+		"@emotion/react": "^11.10.5",
+		"@handsontable/react": "^13.1.0",
+		"@impler/client": "^0.17.0",
+		"@impler/shared": "^0.17.0",
+		"@mantine/core": "6.0.21",
+		"@mantine/dropzone": "6.0.21",
+		"@mantine/hooks": "6.0.21",
+		"@mantine/notifications": "6.0.21",
+		"@sentry/react": "^7.19.0",
+		"@sentry/tracing": "^7.19.0",
+		"@storybook/addon-essentials": "^6.5.13",
+		"@storybook/react": "^6.5.13",
+		"@tanstack/react-query": "^4.14.5",
+		"axios": "1.6.2",
+		"bootstrap": "4.6.0",
+		"cross-env": "^7.0.3",
+		"file-saver": "^2.0.5",
+		"handsontable": "^13.1.0",
+		"http-server": "^14.1.1",
+		"jquery": "^3.7.1",
+		"moment": "^2.29.4",
+		"react": "18.2.0",
+		"react-datepicker": "^4.21.0",
+		"react-dom": "18.2.0",
+		"react-hook-form": "^7.39.1",
+		"react-router-dom": "^6.4.2",
+		"react-scripts": "5.0.1",
+		"rimraf": "^3.0.2",
+		"web-vitals": "^3.0.4",
+		"webfontloader": "^1.6.28",
+		"webpack-dev-server": "^4.11.1"
+	},
+	"devDependencies": {
+		"@types/file-saver": "^2.0.5",
+		"@types/react": "^18.2.0",
+		"@types/react-datepicker": "^4.19.1",
+		"@types/react-dom": "^18.2.0",
+		"typescript": "^4.8.3"
+	}
+}

apps/widget/src/components/Common/Table/Table.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable max-len */
 import { forwardRef } from 'react';
-import { HotTable, HotTableClass } from '@handsontable/react';
+import { HotTable } from '@handsontable/react';
 // eslint-disable-next-line id-length
 import $ from 'jquery';
 
@@ -118,7 +118,7 @@ Handsontable.renderers.registerRenderer('del', function renderer(instance, TD, r
   return TD;
 });
 
-export const Table = forwardRef<HotTableClass, TableProps>(
+export const Table = forwardRef<HotTable, TableProps>(
   (
     {
       afterRender,

apps/widget/src/components/widget/Phases/Phase3/Phase3.tsx

@@ -1,5 +1,5 @@
 import { Stack } from '@mantine/core';
-import { HotTableClass } from '@handsontable/react';
+import { HotTable } from '@handsontable/react';
 import { useRef, useState, useEffect } from 'react';
 
 import { PhasesEnum } from '@types';
@@ -21,7 +21,7 @@ interface IPhase3Props {
 }
 
 export function Phase3(props: IPhase3Props) {
-  const tableRef = useRef<HotTableClass>(null);
+  const tableRef = useRef<HotTable>(null);
   const { onNextClick, onPrevClick } = props;
   const {
     page,