feat: added custom select input for widget

apps/widget/package.json

@@ -39,7 +39,7 @@
   "dependencies": {
     "@craco/craco": "^6.4.5",
     "@emotion/react": "^11.10.5",
-    "@handsontable/react": "^13.1.0",
+    "@handsontable/react": "^14.2.0",
     "@impler/client": "^0.17.0",
     "@impler/shared": "^0.17.0",
     "@mantine/core": "6.0.21",
@@ -55,7 +55,7 @@
     "bootstrap": "4.6.0",
     "cross-env": "^7.0.3",
     "file-saver": "^2.0.5",
-    "handsontable": "^13.1.0",
+    "handsontable": "^14.2.0",
     "http-server": "^14.1.1",
     "jquery": "^3.7.1",
     "moment": "^2.29.4",

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

@@ -1,6 +1,6 @@
 /* eslint-disable max-len */
 import { forwardRef } from 'react';
-import { HotTable } from '@handsontable/react';
+import { HotTable, HotTableClass } from '@handsontable/react';
 // eslint-disable-next-line id-length
 import $ from 'jquery';
 
@@ -40,6 +40,7 @@ registerEditor(BaseEditor);
 
 registerValidator(dateValidator);
 
+import 'handsontable/dist/handsontable.full.min.css';
 import './HandsonTable.styles.min.css';
 
 interface TableProps {
@@ -115,7 +116,7 @@ Handsontable.renderers.registerRenderer('del', function renderer(instance, TD, r
   return TD;
 });
 
-export const Table = forwardRef<HotTable, TableProps>(
+export const Table = forwardRef<HotTableClass, TableProps>(
   (
     {
       afterRender,

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

@@ -1,5 +1,5 @@
 import { Stack } from '@mantine/core';
-import { HotTable } from '@handsontable/react';
+import { HotTableClass } 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<HotTable>(null);
+  const tableRef = useRef<HotTableClass>(null);
   const { onNextClick, onPrevClick } = props;
   const {
     page,

apps/widget/src/hooks/Phase3/usePhase3.tsx

@@ -1,4 +1,5 @@
 import { useState } from 'react';
+import { BaseEditor } from 'handsontable/editors';
 import { useMutation, useQuery } from '@tanstack/react-query';
 
 import { notifier } from '@util';
@@ -7,6 +8,7 @@ import { HotItemSchema } from '@types';
 import { logAmplitudeEvent } from '@amplitude';
 import { useAPIState } from '@store/api.context';
 import { useAppState } from '@store/app.context';
+import { CellProperties } from 'handsontable/settings';
 import {
   ColumnTypesEnum,
   ISchemaColumn,
@@ -23,6 +25,109 @@ interface IUsePhase3Props {
 
 const defaultPage = 1;
 
+class SelectEditor extends BaseEditor {
+  [x: string]: any;
+  timer: any;
+  focus() {
+    this.selectInput.focus();
+  }
+  close() {
+    this._opened = false;
+    this.listDiv.style.display = 'none';
+  }
+  getValue() {
+    return this.selectInput.value;
+  }
+  setValue(value) {
+    this.selectInput.value = value;
+  }
+  open() {
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    const { top, start, width } = this.getEditedCellRect();
+    this._opened = true;
+    this.selectInput.focus();
+
+    this.listDiv.classList.add('open');
+    const selectStyle = this.listDiv.style;
+
+    selectStyle.top = `${top}px`;
+    selectStyle.minWidth = `${width}px`;
+    selectStyle[this.hot.isRtl() ? 'right' : 'left'] = `${start}px`;
+    selectStyle.margin = '0px';
+    selectStyle.display = '';
+  }
+  prepare(
+    row: number,
+    column: number,
+    prop: string | number,
+    TD: HTMLTableCellElement,
+    originalValue: any,
+    cellProperties: CellProperties
+  ): void {
+    super.prepare(row, column, prop, TD, originalValue, cellProperties);
+
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    this.prepareOptions(this.cellProperties.selectOptions);
+  }
+  prepareOptions(options: string[], search?: string) {
+    this.selectUl.innerHTML = '';
+
+    if (!options || !options.length) return;
+
+    if (search) {
+      options = options.filter((key) => key.toLowerCase().includes(search.toLowerCase()));
+    }
+
+    options.forEach((key) => {
+      const liElement = this.hot.rootDocument.createElement('li');
+      liElement.classList.add('option');
+      liElement.dataset.value = key;
+      liElement.dataset.displayText = key;
+      liElement.innerText = key;
+      liElement.onclick = () => {
+        this.selectInput.value = key;
+        this.finishEditing();
+      };
+      this.selectUl.appendChild(liElement);
+    });
+  }
+  search() {
+    const text = this.selectInput.value;
+
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    this.prepareOptions(this.cellProperties.selectOptions, text);
+  }
+  init() {
+    const listDiv = this.hot.rootDocument.createElement('div');
+    listDiv.classList.add('list-wrapper');
+
+    const input = this.hot.rootDocument.createElement('input');
+    input.classList.add('dd-searchbox');
+    input.type = 'search';
+    input.onkeydown = () => {
+      this.timer = setTimeout(() => {
+        this.search();
+      }, 200);
+    };
+
+    listDiv.appendChild(input);
+
+    const listDropdownWrapper = this.hot.rootDocument.createElement('div');
+    listDropdownWrapper.classList.add('list-dropdown');
+    this.selectUl = this.hot.rootDocument.createElement('ul');
+    listDropdownWrapper.appendChild(this.selectUl);
+    listDiv.appendChild(listDropdownWrapper);
+
+    this.listDiv = listDiv;
+    this.selectInput = input;
+
+    this.hot.rootElement.appendChild(this.listDiv);
+  }
+}
+
 export function usePhase3({ onNext }: IUsePhase3Props) {
   const { api } = useAPIState();
   const [page, setPage] = useState<number>(defaultPage);
@@ -66,7 +171,7 @@ export function usePhase3({ onNext }: IUsePhase3Props) {
               break;
             case ColumnTypesEnum.SELECT:
               columnItem.type = 'text';
-              columnItem.editor = 'select';
+              columnItem.editor = SelectEditor;
               columnItem.renderer = 'custom';
               columnItem.selectOptions = column.selectValues;
               break;

apps/widget/src/types/utility.types.ts

@@ -7,7 +7,7 @@ export type HotItemSchema = {
   data: string;
   className?: string;
   readOnly?: boolean;
-  editor?: 'base' | 'select' | boolean;
+  editor?: 'base' | 'select' | boolean | any;
   dateFormat?: string;
   correctFormat?: boolean;
   selectOptions?: string[];