slick-table 0.0.1

package/src/shared/lib/format/formatNumber.spec.ts

@@ -0,0 +1,50 @@
+import { formatNumber } from "./formatNumber";
+
+describe("formatMoney", () => {
+	test("must return empty string", () => {
+		expect(formatNumber(0, { zeroAsBlank: true })).toBe("");
+		expect(formatNumber("0", { zeroAsBlank: true })).toBe("");
+		expect(formatNumber(null)).toBe("");
+		expect(formatNumber(undefined)).toBe("");
+		expect(formatNumber("")).toBe("");
+	});
+	test("must return zero", () => {
+		expect(formatNumber(0)).toBe("0.00");
+		expect(formatNumber("0", { decimalSeparator: "," })).toBe("0,00");
+	});
+	test("must return correct values", () => {
+		expect(formatNumber(0.1)).toBe("0.10");
+		expect(formatNumber(1000222.1, { decimalPlaces: 4 })).toBe(
+			"1,000,222.1000",
+		);
+		expect(formatNumber(-1000222.1, { currencySymbol: "$" })).toBe(
+			"($1,000,222.10)",
+		);
+		expect(
+			formatNumber(-1000222.1, {
+				decimalSeparator: ",",
+				decimalPlaces: 3,
+				thousandsSeparator: ".",
+				currencySymbol: "$",
+			}),
+		).toBe("($1.000.222,100)");
+		expect(formatNumber("1500.02")).toBe("1,500.02");
+		expect(formatNumber("1700500.02")).toBe("1,700,500.02");
+		expect(formatNumber("-1700500.02")).toBe("(1,700,500.02)");
+	});
+	test("must return add class name", () => {
+		expect(
+			formatNumber(5, { negativeClass: "neg", positiveClass: "pos" }),
+		).toBe('<span class="pos">5.00</span>');
+		expect(
+			formatNumber(-5, { negativeClass: "neg", positiveClass: "pos" }),
+		).toBe('<span class="neg">(5.00)</span>');
+		expect(
+			formatNumber(-5, {
+				negativeClass: "neg",
+				noHTML: true,
+				positiveClass: "pos",
+			}),
+		).toBe("(5.00)");
+	});
+});

package/src/shared/lib/format/formatNumber.ts

@@ -0,0 +1,62 @@
+import { IOptions } from "./IOptions";
+import { addParentheses } from "./addParentheses";
+
+/**
+ * @param {(number | null | undefined)} value Money amount to be formatted.
+ * @param {Object} [options] Formatting options.
+ * @param {boolean} [options.currencySymbol = ""] Currency symbol.
+ * @param {number} [options.decimalPlaces = 2] Number of decimal places.
+ * @param {string} [options.decimalSeparator = "."] Decimal separator.
+ * @param {boolean} options.negativeClass Style class name for negative numbers.
+ * @param {boolean} [options.negativeInParentheses = true] Enclose negative numbers in parentheses.
+ * @param {boolean} [options.noHTML = false] Return plain text without HTML.
+ * @param {boolean} options.positiveClass Style class name for positive numbers.
+ * @param {string} [options.thousandsSeparator = ","] Thousands separator.
+ * @param {boolean} [options.zeroAsBlank = false] Display zero as en empty string.
+ * */
+export function formatNumber(
+	value: number | string | null | undefined,
+	options: IOptions = {},
+): string {
+	const {
+		currencySymbol = "",
+		decimalPlaces = 2,
+		decimalSeparator = ".",
+		negativeClass,
+		negativeInParentheses = true,
+		noHTML = false,
+		positiveClass,
+		thousandsSeparator = ",",
+		zeroAsBlank = false,
+	} = options;
+	if (value === undefined || value === null || value === "") {
+		return "";
+	} else if (!Number(value) && zeroAsBlank) return "";
+	const isNegative = (Number(value) || 0) < 0;
+	const valueFixed = Math.abs(Number(value) || 0).toFixed(decimalPlaces);
+	const integerPart = parseInt(valueFixed).toString();
+	const remainder = integerPart.length > 3 ? integerPart.length % 3 : 0;
+	const withThousandsSeparator =
+		(remainder ? integerPart.slice(0, remainder) + thousandsSeparator : "") +
+		integerPart
+			.slice(remainder)
+			.replace(/(\d{3})(?=\d)/g, `$1${thousandsSeparator}`);
+	const withDecimalPlaces =
+		withThousandsSeparator +
+		(decimalPlaces ? decimalSeparator + valueFixed.slice(-decimalPlaces) : "");
+	const withCurrency = `${currencySymbol}${withDecimalPlaces}`;
+	const withMinus = isNegative ? `-${withCurrency}` : withCurrency;
+	const withParentheses =
+		isNegative && negativeInParentheses ? addParentheses(withMinus) : withMinus;
+	if (noHTML) {
+		return withParentheses;
+	} else if (isNegative) {
+		return negativeClass
+			? `<span class="${negativeClass}">${withParentheses}</span>`
+			: withParentheses;
+	} else {
+		return positiveClass
+			? `<span class="${positiveClass}">${withParentheses}</span>`
+			: withParentheses;
+	}
+}

package/src/shared/lib/format/index.ts

@@ -0,0 +1,2 @@
+export { formatNumber } from "./formatNumber";
+export type { IOptions } from "./IOptions";

package/src/shared/lib/numbers/index.ts

@@ -0,0 +1 @@
+export { toNumber } from "./toNumber";

package/src/shared/lib/numbers/toNumber.spec.ts

@@ -0,0 +1,25 @@
+import { toNumber } from "./toNumber";
+
+test("Return expected values", () => {
+	expect(toNumber()).toBe(0);
+	expect(toNumber(null)).toBe(0);
+	expect(toNumber(NaN)).toBe(0);
+	expect(toNumber("")).toBe(0);
+	expect(toNumber(0)).toBe(0);
+	expect(toNumber("0")).toBe(0);
+	expect(toNumber("0.00")).toBe(0);
+	expect(toNumber("0a")).toBe(0);
+	expect(toNumber(50)).toBe(50);
+	expect(toNumber(-50.035)).toBe(-50.035);
+	expect(toNumber("$50.035")).toBe(50.035);
+	expect(toNumber("-50.035")).toBe(-50.035);
+	expect(toNumber("-$50.035")).toBe(-50.035);
+	expect(toNumber("($50.035)")).toBe(-50.035);
+	expect(toNumber("103613.10")).toBe(103613.1);
+	expect(toNumber("-103613.10")).toBe(-103613.1);
+	expect(toNumber("50")).toBe(50);
+	expect(toNumber("50,000,000.00")).toBe(50000000);
+	expect(toNumber("50,000,000.12345")).toBe(50000000.12345);
+	expect(toNumber("-sdf,ffg,g,h,,hfg,")).toBe(0);
+	expect(toNumber(".")).toBe(0);
+});

package/src/shared/lib/numbers/toNumber.ts

@@ -0,0 +1,11 @@
+export const toNumber = (value?: string | number | null): number => {
+	if (!value) return 0;
+	if (typeof value === "number") return value;
+	const stringWithoutCommas = value.replace(/\$|,|\s/g, "");
+	const absValueString = stringWithoutCommas.replace(/\(|\)/g, "");
+	if (isNaN(Number(absValueString))) return 0;
+	return stringWithoutCommas.startsWith("(") &&
+		stringWithoutCommas.endsWith(")")
+		? 0 - Number(absValueString)
+		: Number(stringWithoutCommas);
+};

package/src/shared/lib/regexp/dates.spec.ts

@@ -0,0 +1,23 @@
+import { Dates } from "./dates";
+
+describe("Dates regexps", () => {
+	it("MMDDYYYY", () => {
+		expect(Dates.MMDDYYYY.test("01/05/2024")).toBeTruthy();
+		expect(Dates.MMDDYYYY.test("01/05/24")).toBeFalsy();
+	});
+
+	it("MMDDYY", () => {
+		expect(Dates.MMDDYY.test("01/05/24")).toBeTruthy();
+		expect(Dates.MMDDYY.test("01/05/2024")).toBeFalsy();
+	});
+
+	it("MDY", () => {
+		expect(Dates.MDY.test("01/05/24")).toBeTruthy();
+		expect(Dates.MDY.test("01/05/2024")).toBeTruthy();
+	});
+
+	it("MD", () => {
+		expect(Dates.MD.test("01/24")).toBeTruthy();
+		expect(Dates.MD.test("1/4")).toBeTruthy();
+	});
+});

package/src/shared/lib/regexp/dates.ts

@@ -0,0 +1,6 @@
+export const Dates = {
+	MMDDYYYY: new RegExp(/^\d{2}\/\d{2}\/(\d{4})$/),
+	MMDDYY: new RegExp(/^\d{2}\/\d{2}\/(\d{2})$/),
+	MDY: new RegExp(/^\d{1,2}\/\d{1,2}\/(\d{2}|\d{4})$/),
+	MD: new RegExp(/^\d{1,2}\/\d{1,2}$/),
+};

package/src/shared/lib/regexp/escapeSpecialChar.spec.ts

@@ -0,0 +1,24 @@
+import { escapeSpecialChar } from "./escapeSpecialChar";
+
+describe("Escape special characters", () => {
+	test("handles an empty string", () => {
+		const input = "";
+		const expectedOutput = "";
+		expect(escapeSpecialChar(input)).toBe(expectedOutput);
+	});
+	test("returns the same string if no special characters are present", () => {
+		const input = "HelloWorld";
+		const expectedOutput = "HelloWorld";
+		expect(escapeSpecialChar(input)).toBe(expectedOutput);
+	});
+	test("escapes special characters in a string", () => {
+		const input = "Hello. How are you?";
+		const expectedOutput = "Hello\\. How are you\\?";
+		expect(escapeSpecialChar(input)).toBe(expectedOutput);
+	});
+	test("handles strings with only special characters", () => {
+		const input = ".*+?^${}()|[]\\";
+		const expectedOutput = "\\.\\*\\+\\?\\^\\$\\{\\}\\(\\)\\|\\[\\]\\\\";
+		expect(escapeSpecialChar(input)).toBe(expectedOutput);
+	});
+});

package/src/shared/lib/regexp/escapeSpecialChar.ts

@@ -0,0 +1,4 @@
+/** @description Escapes special characters in string before using it in RegExp */
+export function escapeSpecialChar(value: string): string {
+	return value.replace(/[.*+?^${}()|[\]\\]/g, (match) => `\\${match}`);
+}

package/src/shared/lib/regexp/index.ts

@@ -0,0 +1,2 @@
+export { Dates } from "./dates";
+export { escapeSpecialChar } from "./escapeSpecialChar";

package/src/shared/lib/slickgrid/index.ts

@@ -0,0 +1,72 @@
+export {
+	Autocomplete,
+	ColumnSorter,
+	DateFormatter,
+	DateValidator,
+	EditorAmount,
+	EditorAutocomplete,
+	EditorDate,
+	EditorSelectString,
+	EditorSelectNumber,
+	EditorSelectWithSearch,
+	EmptyStringValidator,
+	FORMATTER_NUMBER,
+	FormatterCheck,
+	getFormatterNumber,
+	LengthValidator,
+	PercentFormatter,
+	FormatterCheckPrinter,
+	StringFormatter,
+	columnSorter,
+	commitCurrentEdit,
+	deleteRows,
+	getDisplayedRows,
+	getLastRow,
+	getMaxId,
+	highlightCell,
+	highlightColumns,
+	isDeletionDangerous,
+	onCellChange,
+	onRowCountChanged,
+	onRowsChanged,
+	selectedRows,
+	sumTotalsFormatter,
+	totalAmountOf,
+	updateTotals,
+	useHotKeys,
+	getUpdates,
+	useListenIfTablesWereEdited,
+	useUpdateTotal,
+	wereEdited,
+} from "./lib";
+export {
+	DownloadManager,
+	DecoratorEndingDate,
+	DecoratorFilter,
+	DecoratorColumnFilter,
+	DecoratorPeriod,
+	DefaultHotKeys,
+	DefaultPrinter,
+	DeletedRowsFilter,
+	Filter,
+	type IColumn,
+	type IColumnFilterValue,
+	type ISlickRow,
+	PreventCopying,
+	type Printer,
+	RedoUndoOnly,
+	SlickTable,
+	WithConfirmationOfDeletion,
+	WithoutHotKeys,
+	eventContextMenu,
+} from "./model";
+export {
+	SlickgridTable,
+	WithTableStyles,
+	columnCheckboxSelector,
+	columnIsEdited,
+	eventOpenColumnFilters,
+	handleHeaderButtons,
+	headerButtons,
+	openColumnFilter,
+} from "./ui";

package/src/shared/lib/slickgrid/lib/callbacks/getOnKeyDownCallback.ts

@@ -0,0 +1,12 @@
+import { Handler, OnKeyDownEventArgs, SlickGrid } from "slickgrid";
+
+import { EKeyCode } from "shared/model/enums";
+
+export const getOnKeyDownCallback =
+	(grid: SlickGrid): Handler<OnKeyDownEventArgs> =>
+	(event): void => {
+		if (event.keyCode === EKeyCode.KeyEnter) {
+			event.stopImmediatePropagation();
+			grid.navigateNext();
+		}
+	};

package/src/shared/lib/slickgrid/lib/callbacks/index.ts

@@ -0,0 +1,4 @@
+export { getOnKeyDownCallback } from "./getOnKeyDownCallback";
+export { onCellChange } from "./onCellChange";
+export { onRowsChanged } from "./onRowsChanged";
+export { onRowCountChanged } from "./onRowCountChanged";

package/src/shared/lib/slickgrid/lib/callbacks/onCellChange.ts

@@ -0,0 +1,14 @@
+import { Handler, OnCellChangeEventArgs, SlickDataView } from "slickgrid";
+
+import { SlickTable } from "../../model";
+
+export const onCellChange =
+	(table: SlickTable): Handler<OnCellChangeEventArgs> =>
+	(_e, args) => {
+		const { grid, item } = args;
+		item.isEdited = true;
+		const dataView: SlickDataView = grid.getData();
+		dataView.updateItem(item.id, item);
+		table.isEdited = true;
+		table.hotKeysBehavior.pushToCommandQueue(grid);
+	};

package/src/shared/lib/slickgrid/lib/callbacks/onRowCountChanged.ts

@@ -0,0 +1,12 @@
+import { Handler, OnRowCountChangedEventArgs } from "slickgrid";
+
+import { SlickTable } from "../../model";
+
+export const onRowCountChanged =
+	(table: SlickTable): Handler<OnRowCountChangedEventArgs> =>
+	() => {
+		const grid = table.grid;
+		if (!grid) return;
+		grid.updateRowCount();
+		grid.render();
+	};

package/src/shared/lib/slickgrid/lib/callbacks/onRowsChanged.ts

@@ -0,0 +1,8 @@
+import { Handler, OnRowsChangedEventArgs, SlickGrid } from "slickgrid";
+
+export const onRowsChanged =
+	(grid: SlickGrid): Handler<OnRowsChangedEventArgs> =>
+	(_e, args): void => {
+		grid.invalidateRows(args.rows);
+		grid.render();
+	};

package/src/shared/lib/slickgrid/lib/contextMenu/index.ts

@@ -0,0 +1 @@
+export { openContextMenu } from "./openContextMenu";

package/src/shared/lib/slickgrid/lib/contextMenu/openContextMenu.ts

@@ -0,0 +1,15 @@
+import { MenuCommandItemCallbackArgs, SlickEventData } from "slickgrid";
+
+import { SlickTable, eventContextMenu } from "../../model";
+import { commitCurrentEdit } from "../functions";
+
+export function openContextMenu(table: SlickTable) {
+	return function (e: SlickEventData<MenuCommandItemCallbackArgs>): void {
+		e.preventDefault();
+		commitCurrentEdit();
+		eventContextMenu.table = table;
+		eventContextMenu.x = e.pageX || 0;
+		eventContextMenu.y = e.pageY || 0;
+		eventContextMenu.notify();
+	};
+}

package/src/shared/lib/slickgrid/lib/editors/Autocomplete/Autocomplete.ts

@@ -0,0 +1,153 @@
+import {
+	Editor,
+	EditorArguments,
+	EditorValidationResult,
+	keyCode,
+} from "slickgrid";
+
+import { EKey } from "shared/model/enums";
+
+import { ISlickRow } from "../../../model";
+
+export abstract class Autocomplete implements Editor {
+	abstract args: EditorArguments<any, any, any>;
+	protected currentFocus = -1;
+	protected defaultValue = "";
+	protected id = "autocomplete";
+	protected input: HTMLInputElement = document.createElement("input");
+	public keyCaptureList: number[] = [keyCode.UP, keyCode.DOWN, keyCode.ENTER];
+	protected list?: HTMLDivElement;
+	protected navOnLR?: boolean;
+
+	applyValue(item: any, state: any): void {
+		item[this.args.column.field] = state;
+	}
+	closeAllList(): void {
+		this.list?.remove();
+		this.list = undefined;
+		this.currentFocus = -1;
+	}
+	destroy(): void {
+		this.input.removeEventListener("input", this.onInput.bind(this));
+		this.input.removeEventListener("keydown", this.onKeydown.bind(this));
+		this.closeAllList();
+		this.input.remove();
+	}
+	focus(): void {
+		this.input.focus();
+	}
+	init(): void {
+		this.navOnLR = this.args.grid.getOptions().editorCellNavOnLRKeys;
+		this.input.setAttribute("type", "text");
+		this.input.classList.add("editor-text");
+		this.args.container.append(this.input);
+
+		this.input.addEventListener("input", this.onInput.bind(this));
+		this.input.addEventListener("keydown", this.onKeydown.bind(this));
+		this.input.focus();
+		this.input.select();
+	}
+	isValueChanged(): boolean {
+		return (
+			!(this.input.value == "" && this.defaultValue == null) &&
+			this.input.value != this.defaultValue
+		);
+	}
+	loadValue(item: ISlickRow): void {
+		this.defaultValue = item[this.args.column.field] || "";
+		this.input.value = this.defaultValue;
+		this.input.defaultValue = this.defaultValue;
+		this.input.focus();
+		this.input.select();
+	}
+	makeVisible(list: HTMLDivElement): void {
+		const canvas = list.closest(".grid-canvas");
+		if (!canvas) return;
+		const { bottom: listBottom, right: listRigth } =
+			list.getBoundingClientRect();
+		const { bottom: canvasBottom, right: canvasRight } =
+			canvas.getBoundingClientRect();
+		if (listBottom >= canvasBottom) {
+			const rowHeight = this.args.grid.getOptions().rowHeight;
+			list.style.position = "absolute";
+			list.style.bottom = `${rowHeight}px`;
+		}
+		if (listRigth >= canvasRight) {
+			list.style.position = "absolute";
+			list.style.right = "0";
+		}
+	}
+	abstract onClick(event: MouseEvent): void;
+	abstract onInput(event: Event): void;
+	onKeydown(event: KeyboardEvent): void {
+		if (event.key === EKey.ArrowLeft) {
+			this.navOnLR && this.args.grid.navigatePrev();
+			event.stopImmediatePropagation();
+			return;
+		} else if (event.key === EKey.ArrowRight) {
+			this.navOnLR && this.args.grid.navigateNext();
+			event.stopImmediatePropagation();
+			return;
+		}
+		if (!this.list) return;
+		const items: HTMLCollectionOf<HTMLDivElement> =
+			this.list.getElementsByTagName("div");
+		if (event.key === EKey.ArrowDown) {
+			this.currentFocus++;
+			this.setActive(items);
+		} else if (event.key === EKey.ArrowUp) {
+			this.currentFocus--;
+			this.setActive(items);
+		} else if (event.key === EKey.Enter) {
+			event.preventDefault();
+			if (this.currentFocus > -1) {
+				/* simulate a click on the "active" item */
+				if (items) items[this.currentFocus].click();
+			}
+		}
+	}
+	removeActive(x: HTMLCollectionOf<HTMLDivElement>): void {
+		for (let i = 0; i < x.length; i++) {
+			x[i].classList.remove("active");
+		}
+	}
+	scrollToElement(child: HTMLDivElement): void {
+		const parent = child.parentElement;
+		if (!parent) return;
+		const { clientHeight: childClientHeight, offsetTop } = child;
+		const { clientHeight: parentClientHeight, scrollTop } = parent;
+		if (offsetTop >= scrollTop + parentClientHeight) {
+			parent.scrollTop = offsetTop - childClientHeight * 1.5;
+		} else if (offsetTop - childClientHeight <= scrollTop) {
+			parent.scrollTop = offsetTop - parentClientHeight;
+		}
+	}
+	serializeValue(): string {
+		return this.input.value;
+	}
+	setActive(list: HTMLCollectionOf<HTMLDivElement>): void {
+		if (!list.length) return;
+		this.removeActive(list);
+		if (this.currentFocus >= list.length) this.currentFocus = 0;
+		if (this.currentFocus < 0) this.currentFocus = list.length - 1;
+		const activeElement = list[this.currentFocus];
+		activeElement.classList.add("active");
+		this.scrollToElement(activeElement);
+	}
+	abstract showOptions(search: string): void;
+	validate(): EditorValidationResult {
+		if (this.args.column.validator) {
+			const validationResults = this.args.column.validator(
+				this.input.value,
+				this.args,
+			);
+			if (!validationResults.valid) {
+				return validationResults;
+			}
+		}
+		return {
+			valid: true,
+			msg: null,
+		};
+	}
+}

package/src/shared/lib/slickgrid/lib/editors/Autocomplete/EditorAutocomplete.ts

@@ -0,0 +1,66 @@
+import { Column, EditorArguments, GridOption, SlickDataView } from "slickgrid";
+
+import { escapeSpecialChar } from "shared/lib/regexp";
+
+import { IColumn } from "../../../model";
+import { Autocomplete } from "./Autocomplete";
+
+export class EditorAutocomplete<
+	TData = any,
+	C extends Column<TData> = Column<TData>,
+	O extends GridOption<C> = GridOption<C>,
+> extends Autocomplete {
+	protected suggestionsList: Set<string>;
+
+	constructor(public args: EditorArguments<TData, C, O>) {
+		super();
+		const column: IColumn = this.args.column;
+		const optionsList = column.optionsList as string[];
+		if (optionsList) {
+			this.suggestionsList = new Set(optionsList);
+		} else {
+			this.suggestionsList = new Set();
+			const columnId = column.id;
+			const dataView: SlickDataView = this.args.grid.getData();
+			const data = dataView.getItems();
+			data.forEach((el: any) => {
+				if (el[columnId]) this.suggestionsList.add(el[columnId]);
+			});
+		}
+		this.init();
+		const item = this.args.item;
+		const initialValue = item[column.field];
+		if (!initialValue) {
+			this.showOptions("");
+		}
+	}
+
+	onInput(event: Event): void {
+		this.closeAllList();
+		this.currentFocus = -1;
+		this.showOptions((event.target as HTMLInputElement).value);
+	}
+	onClick(event: MouseEvent): void {
+		const div = event.target as HTMLDivElement;
+		this.input.value = div.getElementsByTagName("input")[0].value;
+		this.closeAllList();
+	}
+	showOptions(search: string): void {
+		this.list = document.createElement("div");
+		this.list.setAttribute("id", this.id);
+		this.args.container.appendChild(this.list);
+		this.suggestionsList.forEach((name: string) => {
+			const hasOverlap = name.match(new RegExp(escapeSpecialChar(search), "i"));
+			if (hasOverlap) {
+				const overlap = hasOverlap[0];
+				const listItem = document.createElement("div");
+				listItem.innerHTML = `${name.replaceAll(overlap, `<strong>${overlap}</strong>`)}`;
+				/*insert an input field that will hold the current array item's value:*/
+				listItem.innerHTML += `<input type="hidden" value="${name}">`;
+				listItem.addEventListener("click", this.onClick.bind(this));
+				this.list?.appendChild(listItem);
+			}
+		});
+		this.makeVisible(this.list);
+	}
+}

package/src/shared/lib/slickgrid/lib/editors/Autocomplete/EditorSelectWithSearch.ts

@@ -0,0 +1,79 @@
+import { Column, EditorArguments, GridOption } from "slickgrid";
+
+import { escapeSpecialChar } from "shared/lib/regexp";
+
+import { IColumn, ISlickRow } from "../../../model";
+import { Autocomplete } from "./Autocomplete";
+
+export class EditorSelectWithSearch<
+	TData = any,
+	C extends Column<TData> = Column<TData>,
+	O extends GridOption<C> = GridOption<C>,
+> extends Autocomplete {
+	protected hash: Record<string, string>;
+	protected reversedHash: Record<string, string>;
+
+	constructor(public args: EditorArguments<TData, C, O>) {
+		super();
+		const column: IColumn = this.args.column;
+		this.hash = column.selectOptions as Record<string, string>;
+		this.reversedHash = Object.entries(this.hash).reduce(
+			(acc: Record<string, string>, [key, value]) => {
+				acc[value] = key;
+				return acc;
+			},
+			{},
+		);
+		this.init();
+		const item = this.args.item;
+		const initialValue = item[column.field];
+		if (!initialValue) {
+			this.showOptions("");
+		}
+	}
+
+	applyValue(item: any, state: any): void {
+		item[this.args.column.field] = this.reversedHash[state];
+	}
+
+	loadValue(item: ISlickRow): void {
+		this.defaultValue = this.hash[item[this.args.column.id]] || "";
+		this.input.value = this.defaultValue;
+		this.input.defaultValue = this.defaultValue;
+		this.input.focus();
+		this.input.select();
+	}
+
+	onInput(event: Event): void {
+		this.closeAllList();
+		this.currentFocus = -1;
+		this.showOptions((event.target as HTMLInputElement).value);
+	}
+	onClick(event: MouseEvent): void {
+		const div = (event.target as HTMLElement).closest("div") as HTMLDivElement;
+		this.input.value = this.hash[div.getElementsByTagName("input")[0].value];
+		this.closeAllList();
+	}
+	showOptions(search: string): void {
+		this.list = document.createElement("div");
+		this.list.setAttribute("id", this.id);
+		this.list.style.width = "fit-content";
+		this.list.style.textAlign = "left";
+		this.args.container.appendChild(this.list);
+		Object.entries(this.hash).forEach(([key, value]) => {
+			const hasOverlap = value.match(
+				new RegExp(escapeSpecialChar(search), "i"),
+			);
+			if (hasOverlap) {
+				const overlap = hasOverlap[0];
+				const listItem = document.createElement("div");
+				listItem.innerHTML = `${value.replaceAll(overlap, `<strong>${overlap}</strong>`)}`;
+				// insert an input field that will hold the current array item's value
+				listItem.innerHTML += `<input type="hidden" value="${key}">`;
+				listItem.addEventListener("click", this.onClick.bind(this));
+				this.list?.appendChild(listItem);
+			}
+		});
+		this.makeVisible(this.list);
+	}
+}

package/src/shared/lib/slickgrid/lib/editors/Autocomplete/index.ts

@@ -0,0 +1,3 @@
+export { Autocomplete } from "./Autocomplete";
+export { EditorAutocomplete } from "./EditorAutocomplete";
+export { EditorSelectWithSearch } from "./EditorSelectWithSearch";