namirasoft-site-react 1.5.45 → 1.5.47

package/src/components/NSBoxBaseCombo.tsx

@@ -1,523 +1,523 @@
-"use client";
-
-import { Select, Space } from 'antd';
-import { BaseOptionType } from "antd/es/select";
-import { SearchOperation, SetTimeouService, SortItem, } from "namirasoft-core";
-import React, { createRef } from "react";
-import { IBaseComponentProps } from "../props/IBaseComponentProps";
-import { IValidationProps } from "../props/IValidationProps";
-import { Validator } from "../Validator";
-import { INSBox } from "./INSBox";
-import Styles from "./NSBoxBaseCombo.module.css";
-import { INSBoxBaseLayoutProps, NSBoxBaseLayout } from "./NSBoxBaseLayout";
-import { NSLoading } from "./NSLoading";
-import { safeMenuMenuItem } from "./NSMenuButton";
-import { NSNoData } from "./NSNoData";
-
-export interface NSBoxBaseComboOption extends BaseOptionType
-{
-	value: string;
-	title: string;
-}
-
-export interface INSBoxBaseComboProps<Box> extends INSBoxBaseLayoutProps<Box, string | string[]>
-{
-	multiple: boolean;
-	searchable?: boolean;
-	reloadable?: boolean;
-	clearable?: boolean;
-	input?: IBaseComponentProps;
-	onLoaded?: (box: any) => void;
-	onList?: () => string | void;
-	onNew?: () => string | void;
-	onView?: (id: string) => string | void;
-}
-
-export interface NSBoxBaseComboProps<Data, Box> extends IBaseComponentProps, IValidationProps, INSBoxBaseComboProps<Box>
-{
-	getItems: (id: string | null, search: string | null, page: number | null, size: number | null, sorts: SortItem[], all_workspaces: (boolean | null)) => Promise<{ count: number, rows: Data[] }>;
-	getValue: (item: Data) => string;
-	getTitle: (item: Data) => string;
-	getSort: () => SortItem | null;
-}
-
-interface NSBoxBaseComboState<Data>
-{
-	items: Data[] | null;
-	items_list: NSBoxBaseComboOption[] | null;
-	items_dict: { [value: string]: Data };
-	data: Data | null;
-	data_list: Data[];
-	open: boolean;
-	loading: boolean;
-	page: number;
-	page_search_value: string;
-	page_has_more: boolean;
-}
-
-export class NSBoxBaseCombo<Data> extends React.Component<NSBoxBaseComboProps<Data, NSBoxBaseCombo<Data>>, NSBoxBaseComboState<Data>> implements INSBox
-{
-	NSBoxBaseLayout_Main = createRef<NSBoxBaseLayout>();
-	private wrapperRef = createRef<HTMLDivElement>();
-	private autofillName = `ns-combo-${Math.random().toString(36).slice(2)}-${Date.now().toString(36)}`;
-	private set_value: ({ value: string, callback?: () => void }) | null = null;
-	private set_values: ({ values: string[], callback?: () => void }) | null = null;
-	private service: SetTimeouService;
-	constructor(props: NSBoxBaseComboProps<Data, NSBoxBaseCombo<Data>>)
-	{
-		super(props);
-		this.state = {
-			items: null,
-			items_list: null,
-			items_dict: {},
-			data: null,
-			data_list: [],
-			open: false,
-			loading: true,
-			page: 1,
-			page_search_value: "",
-			page_has_more: true
-		};
-
-		this.service = new SetTimeouService();
-
-		this.isEmpty = this.isEmpty.bind(this);
-		this.getError = this.getError.bind(this);
-		this.getValue = this.getValue.bind(this);
-		this.setValue = this.setValue.bind(this);
-
-		this.getValueOne = this.getValueOne.bind(this);
-		this.setValueOne = this.setValueOne.bind(this);
-		this.getValueAll = this.getValueAll.bind(this);
-		this.setValueAll = this.setValueAll.bind(this);
-
-		this.getDataOne = this.getDataOne.bind(this);
-		this.setDataOne = this.setDataOne.bind(this);
-		this.getDataAll = this.getDataAll.bind(this);
-		this.setDataAll = this.setDataAll.bind(this);
-
-		this.find = this.find.bind(this);
-		this.findAll = this.findAll.bind(this);
-		this.onChanged = this.onChanged.bind(this);
-		this.reload = this.reload.bind(this);
-		this.loadID = this.loadID.bind(this);
-		this.getRows = this.getRows.bind(this);
-		this.setRows = this.setRows.bind(this);
-	}
-	isEmpty(value: string)
-	{
-		if ((value ?? "").trim())
-			return false;
-		return true;
-	}
-	getError(): string | null
-	{
-		let value_string = this.getValue(false);
-		if (Array.isArray(value_string))
-			value_string = value_string.join(",");
-		return (
-			Validator.getError(this.props.title, value_string, this.props)
-		);
-	}
-	getValue(checkError: boolean = true): string[] | string | null
-	{
-		if (this.props.multiple)
-			return this.getValueAll(checkError);
-		return this.getValueOne(checkError);
-	}
-	setValue(value: string[] | string | null, callback?: () => void): void
-	{
-		if (this.props.multiple)
-		{
-			if (value != null)
-				if (!Array.isArray(value))
-					throw new Error("When props.multiple = ture, Value must be string[] or null. But it is " + typeof value);
-			this.setValueAll(value as string[] | null, callback);
-		}
-		else
-		{
-			if (value != null)
-				if (typeof value !== "string")
-					throw new Error("When props.multiple = false, Value must be string or null. But it is " + typeof value);
-			this.setValueOne(value as string | null, callback);
-		}
-	}
-	getValueOne(checkError: boolean = true): string | null
-	{
-		let data = this.getDataOne(checkError);
-		if (data)
-			return this.props.getValue(data);
-		return null;
-	}
-	setValueOne(value: string | null, callback?: () => void): void
-	{
-		let data: Data | null = null;
-		if (value)
-		{
-			data = this.state.items_dict[value];
-			if (!data)
-			{
-				this.set_value = { value, callback };
-				if (this.state.items !== null)
-					if (this.state.page_has_more)
-						this.loadID(value);
-				return;
-			}
-		}
-		this.setDataOne(data, callback);
-	}
-	getValueAll(checkError: boolean = true): string[]
-	{
-		let data_list = this.getDataAll(checkError);
-		return data_list.map(data => this.props.getValue(data));
-	}
-	setValueAll(values: string[] | null, callback?: () => void): void
-	{
-		if (!values)
-			values = [];
-		let data_list: Data[] = values.map(value => this.state.items_dict[value]).filter(v => v);
-		if (values.length > 0)
-			if (data_list.length === 0)
-			{
-				this.set_values = { values, callback };
-				return;
-			}
-		this.setDataAll(data_list, callback);
-	}
-	getDataOne(checkError: boolean = true): Data | null
-	{
-		if (this.props.nullable)
-			if (this.NSBoxBaseLayout_Main.current?.isNull())
-				return null;
-		return NSBoxBaseLayout.checkGetValue(this, checkError, () => this.state.data);
-	}
-	setDataOne(data: Data | null, callback?: () => void): void
-	{
-		if (this.props.nullable)
-			this.NSBoxBaseLayout_Main.current?.setNull(data == null);
-
-		this.setState({ data }, () =>
-		{
-			this.props.onChanged?.(this);
-			callback?.();
-		});
-	}
-	getDataAll(checkError: boolean = true): Data[]
-	{
-		if (this.props.nullable)
-			if (this.NSBoxBaseLayout_Main.current?.isNull())
-				return [];
-		return NSBoxBaseLayout.checkGetValue(this, checkError, () => this.state.data_list) ?? [];
-	}
-	setDataAll(data_list: Data[], callback?: () => void): void
-	{
-		if (this.props.nullable)
-			this.NSBoxBaseLayout_Main.current?.setNull(data_list.length === 0);
-
-		this.setState({ data_list }, () =>
-		{
-			this.props.onChanged?.(this);
-			callback?.();
-		});
-	}
-	find(finder: (data: Data) => boolean): Data | null
-	{
-		if (this.state.items)
-			for (let i = 0; i < this.state.items.length; i++)
-			{
-				const data = this.state.items[i];
-				if (finder(data))
-					return data;
-			}
-		return null;
-	}
-	findAll(finder: (data: Data) => boolean): Data[]
-	{
-		let ans = [];
-		if (this.state.items)
-			for (let i = 0; i < this.state.items.length; i++)
-			{
-				const data = this.state.items[i];
-				if (finder(data))
-					ans.push(data);
-			}
-		return ans;
-	}
-	private onChanged(value: string | null | string[]): void
-	{
-		if (this.state.items)
-			if (this.props.multiple)
-				this.setValueAll(value as string[]);
-			else
-				this.setValue(value as string);
-	}
-	public reload(more: boolean = false, search: string | null = null): boolean
-	{
-		search = search ?? "";
-		let changed = this.state.page_search_value !== search;
-		if (!changed)
-			if (more)
-				if (!this.state.page_has_more)
-					return false;
-		let size = 100;
-		let page = more ? this.state.page + 1 : 1;
-		if (changed)
-			page = 1;
-		this.setState({ loading: true, page_search_value: search, page }, () =>
-		{
-			let sorts = [this.props.getSort()].filter(x => x) as SortItem[];
-			this.props.getItems(null, search, page, size, sorts, null).then(items =>
-			{
-				let rows = more ? [...(this.state.items ?? []), ...items.rows] : items.rows;
-				let page_has_more = items.rows.length >= size;
-				this.setRows(page_has_more, rows);
-			}).catch((error) =>
-			{
-				console.error("NSBoxBaseCombo.reload: getItems failed", error);
-			});
-		});
-		return true;
-	}
-	public loadID(id: string)
-	{
-		this.props.getItems(id, null, 1, 1, [], null).then(items =>
-		{
-			let rows = [...items.rows, ...(this.state.items ?? [])];
-			this.setRows(this.state.page_has_more, rows);
-		});
-	}
-	public getRows(): Data[]
-	{
-		return this.state.items ?? [];
-	}
-	private setRows(page_has_more: boolean, rows: Data[])
-	{
-		let items_list: NSBoxBaseComboOption[] = [];
-		let items_dict: { [value: string]: Data } = {};
-		rows.forEach((item, index) =>
-		{
-			let value = this.props.getValue(item);
-			if (value == null || value === "")
-			{
-				console.error("NSBoxBaseCombo.setRows: getValue returned an empty value for item", item);
-				value = `__ns_invalid_value_${index}__`;
-			}
-			let raw_title = this.props.getTitle(item);
-			if (raw_title == null || raw_title === "")
-			{
-				console.error("NSBoxBaseCombo.setRows: getTitle returned an empty value for item", item);
-				raw_title = "(No title)";
-			}
-			let title = raw_title.replace(/[\s\r\n]/gm, " ").trim();
-			while (true)
-			{
-				let len = title.length;
-				title = title.replace(/\s\s/gm, " ");
-				if (len === title.length)
-					break;
-			}
-			items_list.push({ value, title });
-			items_dict[value] = item;
-		});
-		this.setState({ items: rows, items_list, items_dict, loading: false, page_has_more }, () =>
-		{
-			let callback: (() => void) | undefined = undefined;
-			if (this.set_value?.callback)
-			{
-				callback = () =>
-				{
-					let cb = this.set_value?.callback;
-					this.set_value = null;
-					cb?.();
-				};
-			}
-			if (this.set_value)
-				this.setValue(this.set_value.value, callback);
-			else if (this.set_values)
-				this.setValueAll(this.set_values.values, callback);
-			else if (this.props.defaultValue)
-				this.setValue(this.props.defaultValue);
-			this.props.onLoaded?.(this);
-		});
-	}
-	setDisabled(disabled: boolean): void
-	{
-		this.NSBoxBaseLayout_Main.current?.setDisabled(disabled);
-	}
-	override componentDidMount()
-	{
-		this.reload();
-		this.disableChromeAutofill();
-	}
-	override componentDidUpdate()
-	{
-		this.disableChromeAutofill();
-	}
-	private disableChromeAutofill()
-	{
-		const input = this.wrapperRef.current?.querySelector("input");
-		if (!input)
-			return;
-		if (input.getAttribute("autocomplete") !== "new-password")
-			input.setAttribute("autocomplete", "new-password");
-		if (input.getAttribute("name") !== this.autofillName)
-			input.setAttribute("name", this.autofillName);
-		if (input.getAttribute("aria-autocomplete") !== "none")
-			input.setAttribute("aria-autocomplete", "none");
-	}
-	override render()
-	{
-		let menu = safeMenuMenuItem(this.props, (items) =>
-		{
-			if (this.props.onList)
-				items.push({
-					title: "List",
-					icon: "https://static.namirasoft.com/image/concept/menu/burger-blue.svg",
-					onClick: () =>
-					{
-						let res = this.props.onList?.();
-						if (res)
-							window.open(res, '_blank');
-					}
-				});
-			if (this.props.onNew)
-				items.push({
-					title: "New",
-					icon: "https://static.namirasoft.com/image/concept/add/blue.svg",
-					onClick: () =>
-					{
-						let res = this.props.onNew?.();
-						if (res)
-							window.open(res, '_blank');
-					}
-				});
-			if (this.props.onView)
-			{
-				let id = this.getValueOne(false);
-				if (id)
-					items.push({
-						title: "View",
-						icon: "https://static.namirasoft.com/image/concept/view/blue.png",
-						onClick: () =>
-						{
-							if (id)
-							{
-								let res = this.props.onView?.(id);
-								if (res)
-									window.open(res, '_blank');
-							}
-						}
-					});
-			}
-			if (this.props.reloadable !== false)
-				if (!this.state.loading)
-					items.push({
-						title: "Reload",
-						icon: "https://static.namirasoft.com/image/concept/refresh/blue.svg",
-						onClick: () =>
-						{
-							this.reload();
-						}
-					});
-			if (this.props.clearable !== false)
-				if (!this.props.required && (this.state.data || this.state.data_list.length > 0))
-					items.push({
-						title: "Clear",
-						icon: "https://static.namirasoft.com/image/concept/delete/blue.svg",
-						onClick: () => this.setValue(null),
-					});
-		});
-		if (!menu.builtin.copy)
-			menu.builtin.copy = { enabled: true, getValue: () => JSON.stringify(this.getValue(false)) };
-
-		let items_list = this.state.items_list ?? [];
-		return (
-			<NSBoxBaseLayout
-				ref={this.NSBoxBaseLayout_Main}
-				{...this.props}
-				menu={menu}
-				getValue={() =>
-				{
-					if (this.props.multiple)
-						return this.getValueAll(false).join(", ");
-					return this.getValueOne(false);
-				}}
-			>
-				<div ref={this.wrapperRef} style={{ width: "100%" }}>
-				<Select
-					id={this.props.id}
-					mode={this.props.multiple ? "multiple" : undefined}
-					className={[Styles.ns_box_base_combo_select, this.props.input?.classList].join(" ")}
-					placeholder={this.props.placeholder ?? "Please select one"}
-					defaultValue={this.props.defaultValue}
-					value={this.props.multiple ? (this.state.data_list.map(v => this.props.getValue(v))) : (this.state.data ? this.props.getValue(this.state.data) : null)}
-					optionLabelProp="label"
-					notFoundContent={this.state.loading ? <NSLoading title="Loading options ..." /> : <NSNoData lable="Nothing to select" />}
-					onChange={this.onChanged}
-					onClick={() => { this.props.onClicked?.(this); }}
-					options={items_list}
-					loading={this.state.loading}
-					optionRender={(option) => (
-						<Space>
-							{option.data.title ?? ""}
-						</Space>
-					)}
-					labelRender={(x) =>
-					{
-						return (x as any).title ?? x.value;
-					}}
-					showSearch={this.props.searchable !== false
-						?
-						{
-							onSearch: (value) =>
-							{
-								if (!this.state.page_has_more && !this.state.page_search_value)
-									return;
-								this.service.setTimeoutIfNotCalledAgain(() =>
-								{
-									this.reload(false, value);
-								}, 500);
-							},
-							filterOption: (search, row) =>
-							{
-								if (row)
-									return SearchOperation.match(row.title, search) || SearchOperation.match(row.value, search);
-								return false;
-							}
-						}
-						:
-						undefined
-					}
-					onOpenChange={e =>
-					{
-						this.setState({ open: e });
-					}}
-					suffixIcon={
-						<img
-							src={this.state.open
-								?
-								"https://static.namirasoft.com/image/concept/arrow/up/blue.svg"
-								:
-								"https://static.namirasoft.com/image/concept/arrow/down/blue.svg"
-							}
-							width={20}
-							height={20}
-							alt="SelectBox Icon"
-						/>
-					}
-					onPopupScroll={(e) =>
-					{
-						const target = e.target as HTMLDivElement;
-
-						if (target.scrollTop + target.offsetHeight >= target.scrollHeight)
-						{
-							if (!this.state.loading)
-								this.reload(true, this.state.page_search_value);
-						}
-					}}
-				/>
-				</div>
-			</NSBoxBaseLayout>
-		);
-	}
+"use client";
+
+import { Select, Space } from 'antd';
+import { BaseOptionType } from "antd/es/select";
+import { SearchOperation, SetTimeouService, SortItem, } from "namirasoft-core";
+import React, { createRef } from "react";
+import { IBaseComponentProps } from "../props/IBaseComponentProps";
+import { IValidationProps } from "../props/IValidationProps";
+import { Validator } from "../Validator";
+import { INSBox } from "./INSBox";
+import Styles from "./NSBoxBaseCombo.module.css";
+import { INSBoxBaseLayoutProps, NSBoxBaseLayout } from "./NSBoxBaseLayout";
+import { NSLoading } from "./NSLoading";
+import { safeMenuMenuItem } from "./NSMenuButton";
+import { NSNoData } from "./NSNoData";
+
+export interface NSBoxBaseComboOption extends BaseOptionType
+{
+	value: string;
+	title: string;
+}
+
+export interface INSBoxBaseComboProps<Box> extends INSBoxBaseLayoutProps<Box, string | string[]>
+{
+	multiple: boolean;
+	searchable?: boolean;
+	reloadable?: boolean;
+	clearable?: boolean;
+	input?: IBaseComponentProps;
+	onLoaded?: (box: any) => void;
+	onList?: () => string | void;
+	onNew?: () => string | void;
+	onView?: (id: string) => string | void;
+}
+
+export interface NSBoxBaseComboProps<Data, Box> extends IBaseComponentProps, IValidationProps, INSBoxBaseComboProps<Box>
+{
+	getItems: (id: string | null, search: string | null, page: number | null, size: number | null, sorts: SortItem[], all_workspaces: (boolean | null)) => Promise<{ count: number, rows: Data[] }>;
+	getValue: (item: Data) => string;
+	getTitle: (item: Data) => string;
+	getSort: () => SortItem | null;
+}
+
+interface NSBoxBaseComboState<Data>
+{
+	items: Data[] | null;
+	items_list: NSBoxBaseComboOption[] | null;
+	items_dict: { [value: string]: Data };
+	data: Data | null;
+	data_list: Data[];
+	open: boolean;
+	loading: boolean;
+	page: number;
+	page_search_value: string;
+	page_has_more: boolean;
+}
+
+export class NSBoxBaseCombo<Data> extends React.Component<NSBoxBaseComboProps<Data, NSBoxBaseCombo<Data>>, NSBoxBaseComboState<Data>> implements INSBox
+{
+	NSBoxBaseLayout_Main = createRef<NSBoxBaseLayout>();
+	private wrapperRef = createRef<HTMLDivElement>();
+	private autofillName = `ns-combo-${Math.random().toString(36).slice(2)}-${Date.now().toString(36)}`;
+	private set_value: ({ value: string, callback?: () => void }) | null = null;
+	private set_values: ({ values: string[], callback?: () => void }) | null = null;
+	private service: SetTimeouService;
+	constructor(props: NSBoxBaseComboProps<Data, NSBoxBaseCombo<Data>>)
+	{
+		super(props);
+		this.state = {
+			items: null,
+			items_list: null,
+			items_dict: {},
+			data: null,
+			data_list: [],
+			open: false,
+			loading: true,
+			page: 1,
+			page_search_value: "",
+			page_has_more: true
+		};
+
+		this.service = new SetTimeouService();
+
+		this.isEmpty = this.isEmpty.bind(this);
+		this.getError = this.getError.bind(this);
+		this.getValue = this.getValue.bind(this);
+		this.setValue = this.setValue.bind(this);
+
+		this.getValueOne = this.getValueOne.bind(this);
+		this.setValueOne = this.setValueOne.bind(this);
+		this.getValueAll = this.getValueAll.bind(this);
+		this.setValueAll = this.setValueAll.bind(this);
+
+		this.getDataOne = this.getDataOne.bind(this);
+		this.setDataOne = this.setDataOne.bind(this);
+		this.getDataAll = this.getDataAll.bind(this);
+		this.setDataAll = this.setDataAll.bind(this);
+
+		this.find = this.find.bind(this);
+		this.findAll = this.findAll.bind(this);
+		this.onChanged = this.onChanged.bind(this);
+		this.reload = this.reload.bind(this);
+		this.loadID = this.loadID.bind(this);
+		this.getRows = this.getRows.bind(this);
+		this.setRows = this.setRows.bind(this);
+	}
+	isEmpty(value: string)
+	{
+		if ((value ?? "").trim())
+			return false;
+		return true;
+	}
+	getError(): string | null
+	{
+		let value_string = this.getValue(false);
+		if (Array.isArray(value_string))
+			value_string = value_string.join(",");
+		return (
+			Validator.getError(this.props.title, value_string, this.props)
+		);
+	}
+	getValue(checkError: boolean = true): string[] | string | null
+	{
+		if (this.props.multiple)
+			return this.getValueAll(checkError);
+		return this.getValueOne(checkError);
+	}
+	setValue(value: string[] | string | null, callback?: () => void): void
+	{
+		if (this.props.multiple)
+		{
+			if (value != null)
+				if (!Array.isArray(value))
+					throw new Error("When props.multiple = ture, Value must be string[] or null. But it is " + typeof value);
+			this.setValueAll(value as string[] | null, callback);
+		}
+		else
+		{
+			if (value != null)
+				if (typeof value !== "string")
+					throw new Error("When props.multiple = false, Value must be string or null. But it is " + typeof value);
+			this.setValueOne(value as string | null, callback);
+		}
+	}
+	getValueOne(checkError: boolean = true): string | null
+	{
+		let data = this.getDataOne(checkError);
+		if (data)
+			return this.props.getValue(data);
+		return null;
+	}
+	setValueOne(value: string | null, callback?: () => void): void
+	{
+		let data: Data | null = null;
+		if (value)
+		{
+			data = this.state.items_dict[value];
+			if (!data)
+			{
+				this.set_value = { value, callback };
+				if (this.state.items !== null)
+					if (this.state.page_has_more)
+						this.loadID(value);
+				return;
+			}
+		}
+		this.setDataOne(data, callback);
+	}
+	getValueAll(checkError: boolean = true): string[]
+	{
+		let data_list = this.getDataAll(checkError);
+		return data_list.map(data => this.props.getValue(data));
+	}
+	setValueAll(values: string[] | null, callback?: () => void): void
+	{
+		if (!values)
+			values = [];
+		let data_list: Data[] = values.map(value => this.state.items_dict[value]).filter(v => v);
+		if (values.length > 0)
+			if (data_list.length === 0)
+			{
+				this.set_values = { values, callback };
+				return;
+			}
+		this.setDataAll(data_list, callback);
+	}
+	getDataOne(checkError: boolean = true): Data | null
+	{
+		if (this.props.nullable)
+			if (this.NSBoxBaseLayout_Main.current?.isNull())
+				return null;
+		return NSBoxBaseLayout.checkGetValue(this, checkError, () => this.state.data);
+	}
+	setDataOne(data: Data | null, callback?: () => void): void
+	{
+		if (this.props.nullable)
+			this.NSBoxBaseLayout_Main.current?.setNull(data == null);
+
+		this.setState({ data }, () =>
+		{
+			this.props.onChanged?.(this);
+			callback?.();
+		});
+	}
+	getDataAll(checkError: boolean = true): Data[]
+	{
+		if (this.props.nullable)
+			if (this.NSBoxBaseLayout_Main.current?.isNull())
+				return [];
+		return NSBoxBaseLayout.checkGetValue(this, checkError, () => this.state.data_list) ?? [];
+	}
+	setDataAll(data_list: Data[], callback?: () => void): void
+	{
+		if (this.props.nullable)
+			this.NSBoxBaseLayout_Main.current?.setNull(data_list.length === 0);
+
+		this.setState({ data_list }, () =>
+		{
+			this.props.onChanged?.(this);
+			callback?.();
+		});
+	}
+	find(finder: (data: Data) => boolean): Data | null
+	{
+		if (this.state.items)
+			for (let i = 0; i < this.state.items.length; i++)
+			{
+				const data = this.state.items[i];
+				if (finder(data))
+					return data;
+			}
+		return null;
+	}
+	findAll(finder: (data: Data) => boolean): Data[]
+	{
+		let ans = [];
+		if (this.state.items)
+			for (let i = 0; i < this.state.items.length; i++)
+			{
+				const data = this.state.items[i];
+				if (finder(data))
+					ans.push(data);
+			}
+		return ans;
+	}
+	private onChanged(value: string | null | string[]): void
+	{
+		if (this.state.items)
+			if (this.props.multiple)
+				this.setValueAll(value as string[]);
+			else
+				this.setValue(value as string);
+	}
+	public reload(more: boolean = false, search: string | null = null): boolean
+	{
+		search = search ?? "";
+		let changed = this.state.page_search_value !== search;
+		if (!changed)
+			if (more)
+				if (!this.state.page_has_more)
+					return false;
+		let size = 100;
+		let page = more ? this.state.page + 1 : 1;
+		if (changed)
+			page = 1;
+		this.setState({ loading: true, page_search_value: search, page }, () =>
+		{
+			let sorts = [this.props.getSort()].filter(x => x) as SortItem[];
+			this.props.getItems(null, search, page, size, sorts, null).then(items =>
+			{
+				let rows = more ? [...(this.state.items ?? []), ...items.rows] : items.rows;
+				let page_has_more = items.rows.length >= size;
+				this.setRows(page_has_more, rows);
+			}).catch((error) =>
+			{
+				console.error("NSBoxBaseCombo.reload: getItems failed", error);
+			});
+		});
+		return true;
+	}
+	public loadID(id: string)
+	{
+		this.props.getItems(id, null, 1, 1, [], null).then(items =>
+		{
+			let rows = [...items.rows, ...(this.state.items ?? [])];
+			this.setRows(this.state.page_has_more, rows);
+		});
+	}
+	public getRows(): Data[]
+	{
+		return this.state.items ?? [];
+	}
+	private setRows(page_has_more: boolean, rows: Data[])
+	{
+		let items_list: NSBoxBaseComboOption[] = [];
+		let items_dict: { [value: string]: Data } = {};
+		rows.forEach((item, index) =>
+		{
+			let value = this.props.getValue(item);
+			if (value == null || value === "")
+			{
+				console.error("NSBoxBaseCombo.setRows: getValue returned an empty value for item", item);
+				value = `__ns_invalid_value_${index}__`;
+			}
+			let raw_title = this.props.getTitle(item);
+			if (raw_title == null || raw_title === "")
+			{
+				console.error("NSBoxBaseCombo.setRows: getTitle returned an empty value for item", item);
+				raw_title = "(No title)";
+			}
+			let title = raw_title.replace(/[\s\r\n]/gm, " ").trim();
+			while (true)
+			{
+				let len = title.length;
+				title = title.replace(/\s\s/gm, " ");
+				if (len === title.length)
+					break;
+			}
+			items_list.push({ value, title });
+			items_dict[value] = item;
+		});
+		this.setState({ items: rows, items_list, items_dict, loading: false, page_has_more }, () =>
+		{
+			let callback: (() => void) | undefined = undefined;
+			if (this.set_value?.callback)
+			{
+				callback = () =>
+				{
+					let cb = this.set_value?.callback;
+					this.set_value = null;
+					cb?.();
+				};
+			}
+			if (this.set_value)
+				this.setValue(this.set_value.value, callback);
+			else if (this.set_values)
+				this.setValueAll(this.set_values.values, callback);
+			else if (this.props.defaultValue)
+				this.setValue(this.props.defaultValue);
+			this.props.onLoaded?.(this);
+		});
+	}
+	setDisabled(disabled: boolean): void
+	{
+		this.NSBoxBaseLayout_Main.current?.setDisabled(disabled);
+	}
+	override componentDidMount()
+	{
+		this.reload();
+		this.disableChromeAutofill();
+	}
+	override componentDidUpdate()
+	{
+		this.disableChromeAutofill();
+	}
+	private disableChromeAutofill()
+	{
+		const input = this.wrapperRef.current?.querySelector("input");
+		if (!input)
+			return;
+		if (input.getAttribute("autocomplete") !== "new-password")
+			input.setAttribute("autocomplete", "new-password");
+		if (input.getAttribute("name") !== this.autofillName)
+			input.setAttribute("name", this.autofillName);
+		if (input.getAttribute("aria-autocomplete") !== "none")
+			input.setAttribute("aria-autocomplete", "none");
+	}
+	override render()
+	{
+		let menu = safeMenuMenuItem(this.props, (items) =>
+		{
+			if (this.props.onList)
+				items.push({
+					title: "List",
+					icon: "https://static.namirasoft.com/image/concept/menu/burger-blue.svg",
+					onClick: () =>
+					{
+						let res = this.props.onList?.();
+						if (res)
+							window.open(res, '_blank');
+					}
+				});
+			if (this.props.onNew)
+				items.push({
+					title: "New",
+					icon: "https://static.namirasoft.com/image/concept/add/blue.svg",
+					onClick: () =>
+					{
+						let res = this.props.onNew?.();
+						if (res)
+							window.open(res, '_blank');
+					}
+				});
+			if (this.props.onView)
+			{
+				let id = this.getValueOne(false);
+				if (id)
+					items.push({
+						title: "View",
+						icon: "https://static.namirasoft.com/image/concept/view/blue.png",
+						onClick: () =>
+						{
+							if (id)
+							{
+								let res = this.props.onView?.(id);
+								if (res)
+									window.open(res, '_blank');
+							}
+						}
+					});
+			}
+			if (this.props.reloadable !== false)
+				if (!this.state.loading)
+					items.push({
+						title: "Reload",
+						icon: "https://static.namirasoft.com/image/concept/refresh/blue.svg",
+						onClick: () =>
+						{
+							this.reload();
+						}
+					});
+			if (this.props.clearable !== false)
+				if (!this.props.required && (this.state.data || this.state.data_list.length > 0))
+					items.push({
+						title: "Clear",
+						icon: "https://static.namirasoft.com/image/concept/delete/blue.svg",
+						onClick: () => this.setValue(null),
+					});
+		});
+		if (!menu.builtin.copy)
+			menu.builtin.copy = { enabled: true, getValue: () => JSON.stringify(this.getValue(false)) };
+
+		let items_list = this.state.items_list ?? [];
+		return (
+			<NSBoxBaseLayout
+				ref={this.NSBoxBaseLayout_Main}
+				{...this.props}
+				menu={menu}
+				getValue={() =>
+				{
+					if (this.props.multiple)
+						return this.getValueAll(false).join(", ");
+					return this.getValueOne(false);
+				}}
+			>
+				<div ref={this.wrapperRef} style={{ width: "100%" }}>
+				<Select
+					id={this.props.id}
+					mode={this.props.multiple ? "multiple" : undefined}
+					className={[Styles.ns_box_base_combo_select, this.props.input?.classList].join(" ")}
+					placeholder={this.props.placeholder ?? "Please select one"}
+					defaultValue={this.props.defaultValue}
+					value={this.props.multiple ? (this.state.data_list.map(v => this.props.getValue(v))) : (this.state.data ? this.props.getValue(this.state.data) : null)}
+					optionLabelProp="label"
+					notFoundContent={this.state.loading ? <NSLoading title="Loading options ..." /> : <NSNoData lable="Nothing to select" />}
+					onChange={this.onChanged}
+					onClick={() => { this.props.onClicked?.(this); }}
+					options={items_list}
+					loading={this.state.loading}
+					optionRender={(option) => (
+						<Space>
+							{option.data.title ?? ""}
+						</Space>
+					)}
+					labelRender={(x) =>
+					{
+						return (x as any).title ?? x.value;
+					}}
+					showSearch={this.props.searchable !== false
+						?
+						{
+							onSearch: (value) =>
+							{
+								if (!this.state.page_has_more && !this.state.page_search_value)
+									return;
+								this.service.setTimeoutIfNotCalledAgain(() =>
+								{
+									this.reload(false, value);
+								}, 500);
+							},
+							filterOption: (search, row) =>
+							{
+								if (row)
+									return SearchOperation.match(row.title, search) || SearchOperation.match(row.value, search);
+								return false;
+							}
+						}
+						:
+						undefined
+					}
+					onOpenChange={e =>
+					{
+						this.setState({ open: e });
+					}}
+					suffixIcon={
+						<img
+							src={this.state.open
+								?
+								"https://static.namirasoft.com/image/concept/arrow/up/blue.svg"
+								:
+								"https://static.namirasoft.com/image/concept/arrow/down/blue.svg"
+							}
+							width={20}
+							height={20}
+							alt="SelectBox Icon"
+						/>
+					}
+					onPopupScroll={(e) =>
+					{
+						const target = e.target as HTMLDivElement;
+
+						if (target.scrollTop + target.offsetHeight >= target.scrollHeight)
+						{
+							if (!this.state.loading)
+								this.reload(true, this.state.page_search_value);
+						}
+					}}
+				/>
+				</div>
+			</NSBoxBaseLayout>
+		);
+	}
 }