es-grid-template 1.9.100 → 1.9.102

package/es/ali-table/base-table/cell/EditCell.js

@@ -558,64 +558,8 @@ const EditCell = props => {
           fieldNames: fieldNames ? fieldNames : {
             value: keySelect,
             label: inputKey ?? 'label'
-          }
-
-          // onBlur={(event: any) => {
-
-          //   if (event.inputValue && column?.editSelectSettings?.searchTextAsValue && isMulti !== true) {
-          //     const val = event.inputValue
-          //     onChange(val ?? undefined)
-
-          //     const formState = getValues()
-          //     // const itemState = getValues(dataIndex)
-          //     // @ts-ignore
-          //     const prevState = record[dataIndex]
-          //     const newState = val
-
-          //     handleCellChange?.({
-          //       key,
-          //       field: column.field ?? column.field as any,
-          //       record: formState,
-          //       prevState,
-          //       newState,
-          //       option: { value: val, label: val, searchTextAsValue: true } as any,
-          //       indexCol,
-          //       indexRow,
-          //       type: 'blur'
-          //     })
-          //   }
-          // }}
-
-          // onKeyDown={(event: any) => {
-
-          //   if (event.key === 'Enter' && event.target?.value && column?.editSelectSettings?.searchTextAsValue && isMulti !== true) {
-
-          //     const val = event.target.value
-          //     onChange(val)
-
-          //     const formState = getValues()
-          //     // const itemState = getValues(dataIndex)
-          //     // @ts-ignore
-          //     const prevState = record[dataIndex]
-          //     const newState = val
-
-          //     handleCellChange?.({
-          //       key,
-          //       field: column.field ?? column.field as any,
-          //       record: formState,
-          //       prevState,
-          //       newState,
-          //       option: { value: val, label: val, searchTextAsValue: true } as any,
-          //       indexCol,
-          //       indexRow,
-          //       type: 'blur'
-          //     })
-
-          //   }
-
-          // }}
-          ,
-
+          },
+          searchTextAsValue: column.editSelectSettings?.searchTextAsValue,
           "data-tooltip-content": message,
           "data-tooltip-id": `${tableId}-tooltip-error`
         });

package/es/ali-table/base-table/cell/HeaderEditCell.js

@@ -556,64 +556,8 @@ const HeaderEditCell = props => {
           fieldNames: fieldNames ? fieldNames : {
             value: keySelect,
             label: inputKey ?? 'label'
-          }
-
-          // onBlur={(event: any) => {
-
-          //   if (event.inputValue && column?.editSelectSettings?.searchTextAsValue && isMulti !== true) {
-          //     const val = event.inputValue
-          //     onChange(val ?? undefined)
-
-          //     const formState = getValues()
-          //     // const itemState = getValues(dataIndex)
-          //     // @ts-ignore
-          //     const prevState = record[dataIndex]
-          //     const newState = val
-
-          //     handleCellChange?.({
-          //       key,
-          //       field: column.field ?? column.field as any,
-          //       record: formState,
-          //       prevState,
-          //       newState,
-          //       option: { value: val, label: val, searchTextAsValue: true } as any,
-          //       indexCol,
-          //       indexRow,
-          //       type: 'blur'
-          //     })
-          //   }
-          // }}
-
-          // onKeyDown={(event: any) => {
-
-          //   if (event.key === 'Enter' && event.target?.value && column?.editSelectSettings?.searchTextAsValue && isMulti !== true) {
-
-          //     const val = event.target.value
-          //     onChange(val)
-
-          //     const formState = getValues()
-          //     // const itemState = getValues(dataIndex)
-          //     // @ts-ignore
-          //     const prevState = record[dataIndex]
-          //     const newState = val
-
-          //     handleCellChange?.({
-          //       key,
-          //       field: column.field ?? column.field as any,
-          //       record: formState,
-          //       prevState,
-          //       newState,
-          //       option: { value: val, label: val, searchTextAsValue: true } as any,
-          //       indexCol,
-          //       indexRow,
-          //       type: 'blur'
-          //     })
-
-          //   }
-
-          // }}
-          ,
-
+          },
+          searchTextAsValue: column.editSelectSettings?.searchTextAsValue,
           "data-tooltip-content": message,
           "data-tooltip-id": `${tableId}-tooltip-error`
         });

package/es/grid-component/type.d.ts

@@ -614,7 +614,7 @@ export type IEditSelectSettings = {
     fieldValue?: string;
     /** get label form other field **/
     fieldLabel?: string;
-    /** cho phép nhập giá trị - onBlur: giá trị search được set thành value **/
+    /** Lưu nội dung tìm kiếm làm giá trị khi rời ô chọn đơn. `select` và `selectTable` cũng hỗ trợ Enter. */
     searchTextAsValue?: boolean;
     filterKey?: string[];
     selectMode?: SelectMode;

package/es/group-component/body/EditableCell.js

@@ -556,64 +556,8 @@ const EditableCell = props => {
           fieldNames: fieldNames ? fieldNames : {
             value: keySelect,
             label: inputKey ?? 'label'
-          }
-
-          // onBlur={(event: any) => {
-
-          //   if (event.inputValue && column?.editSelectSettings?.searchTextAsValue && isMulti !== true) {
-          //     const val = event.inputValue
-          //     onChange(val ?? undefined)
-
-          //     const formState = getValues()
-          //     // const itemState = getValues(dataIndex)
-          //     // @ts-ignore
-          //     const prevState = record[dataIndex]
-          //     const newState = val
-
-          //     handleCellChange?.({
-          //       key,
-          //       field: column.field ?? column.field as any,
-          //       record: formState,
-          //       prevState,
-          //       newState,
-          //       option: { value: val, label: val, searchTextAsValue: true } as any,
-          //       indexCol,
-          //       indexRow,
-          //       type: 'blur'
-          //     })
-          //   }
-          // }}
-
-          // onKeyDown={(event: any) => {
-
-          //   if (event.key === 'Enter' && event.target?.value && column?.editSelectSettings?.searchTextAsValue && isMulti !== true) {
-
-          //     const val = event.target.value
-          //     onChange(val)
-
-          //     const formState = getValues()
-          //     // const itemState = getValues(dataIndex)
-          //     // @ts-ignore
-          //     const prevState = record[dataIndex]
-          //     const newState = val
-
-          //     handleCellChange?.({
-          //       key,
-          //       field: column.field ?? column.field as any,
-          //       record: formState,
-          //       prevState,
-          //       newState,
-          //       option: { value: val, label: val, searchTextAsValue: true } as any,
-          //       indexCol,
-          //       indexRow,
-          //       type: 'blur'
-          //     })
-
-          //   }
-
-          // }}
-          ,
-
+          },
+          searchTextAsValue: column.editSelectSettings?.searchTextAsValue,
           "data-tooltip-content": message,
           "data-tooltip-id": `${id}-tooltip-error`
         });

package/es/group-component/components/async-table-select/index.d.ts

@@ -1,11 +1,2 @@
-/// <reference types="react" />
-import type { BaseOptionType, DefaultOptionType } from "rc-select/lib/Select";
-import type { TableSelectProps } from "rc-master-ui";
-import type { LoadOptionsArgs } from '../../../grid-component/type';
-export interface DebounceSelectProps<OptionType extends BaseOptionType = DefaultOptionType> extends TableSelectProps {
-    loadOptions?: (search: string, callback: (newOptions: OptionType[]) => void, args?: LoadOptionsArgs) => void;
-    debounceTimeout?: number;
-    defaultOptions?: OptionType[];
-    rowData?: any;
-}
-export declare function AsyncTableSelect<OptionType extends BaseOptionType>({ loadOptions, debounceTimeout, defaultOptions, columns, rowData, ...props }: DebounceSelectProps<OptionType>): JSX.Element;
+export { AsyncTableSelect } from '../../../table-component/components/async-table-select';
+export type { DebounceSelectProps } from '../../../table-component/components/async-table-select';

package/es/group-component/components/async-table-select/index.js

@@ -1,40 +1 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import React, { useEffect, useMemo, useState } from 'react';
-import debounce from 'lodash/debounce';
-import { TableSelect } from "rc-master-ui";
-export function AsyncTableSelect({
-  loadOptions,
-  debounceTimeout = 500,
-  defaultOptions,
-  columns,
-  rowData,
-  ...props
-}) {
-  const [options, setOptions] = useState(defaultOptions ?? []);
-  const debounceFetcher = useMemo(() => {
-    const fetchOptions = value => {
-      if (value.trim().length === 0) {
-        setOptions(defaultOptions ?? []);
-        return;
-      }
-      if (loadOptions) {
-        loadOptions(value, newOptions => {
-          setOptions(newOptions);
-        }, {
-          rowData
-        });
-      }
-    };
-    return debounce(fetchOptions, debounceTimeout);
-  }, [debounceTimeout, loadOptions, defaultOptions, rowData]);
-  useEffect(() => {
-    setOptions(defaultOptions ?? []);
-  }, [defaultOptions]);
-  return /*#__PURE__*/React.createElement(TableSelect, _extends({}, props, {
-    filterOption: loadOptions ? false : props?.filterOption,
-    onSearch: debounceFetcher,
-    onSelect: () => setOptions(defaultOptions ?? []),
-    options: options,
-    columns: columns
-  }));
-}
+export { AsyncTableSelect } from "../../../table-component/components/async-table-select";

package/es/group-component/hook/utils.d.ts

@@ -196,10 +196,10 @@ export declare const fixColumnsLeft: <RecordType>(columns: ColumnTable<RecordTyp
         value: any;
         rowData: RecordType;
     }) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNode);
-    onCellStyles?: Omit<CSSProperties, "right" | "left" | "position" | "display" | "width" | "minWidth"> | ((cellValue: any, cell: import("@tanstack/react-table").Cell<RecordType, unknown>) => Omit<CSSProperties, "right" | "left" | "position" | "display" | "width" | "minWidth">);
-    onCellHeaderStyles?: Omit<CSSProperties, "right" | "left" | "position" | "display" | "width" | "minWidth"> | ((cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "right" | "left" | "position" | "display" | "width" | "minWidth">);
+    onCellStyles?: Omit<CSSProperties, "right" | "left" | "width" | "display" | "minWidth" | "position"> | ((cellValue: any, cell: import("@tanstack/react-table").Cell<RecordType, unknown>) => Omit<CSSProperties, "right" | "left" | "width" | "display" | "minWidth" | "position">);
+    onCellHeaderStyles?: Omit<CSSProperties, "right" | "left" | "width" | "display" | "minWidth" | "position"> | ((cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "right" | "left" | "width" | "display" | "minWidth" | "position">);
     onCell?: (rowData: RecordType, index: number) => import("react").TdHTMLAttributes<HTMLTableCellElement>;
-    onCellFooterStyles?: Omit<CSSProperties, "right" | "left" | "position" | "display" | "width" | "minWidth"> | ((cellValue: any, cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "right" | "left" | "position" | "display" | "width" | "minWidth">);
+    onCellFooterStyles?: Omit<CSSProperties, "right" | "left" | "width" | "display" | "minWidth" | "position"> | ((cellValue: any, cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "right" | "left" | "width" | "display" | "minWidth" | "position">);
     getValue?: (row: any, rowIndex: number) => any;
     getCellProps?: (value: any, row: any, rowIndex: number) => import("./../../grid-component/type").CellProps;
     headerCellProps?: import("./../../grid-component/type").CellProps;

package/es/table-component/body/EditableCell.js

@@ -558,64 +558,8 @@ const EditableCell = props => {
           fieldNames: fieldNames ? fieldNames : {
             value: keySelect,
             label: inputKey ?? 'label'
-          }
-
-          // onBlur={(event: any) => {
-
-          //   if (event.inputValue && column?.editSelectSettings?.searchTextAsValue && isMulti !== true) {
-          //     const val = event.inputValue
-          //     onChange(val ?? undefined)
-
-          //     const formState = getValues()
-          //     // const itemState = getValues(dataIndex)
-          //     // @ts-ignore
-          //     const prevState = record[dataIndex]
-          //     const newState = val
-
-          //     handleCellChange?.({
-          //       key,
-          //       field: column.field ?? column.field as any,
-          //       record: formState,
-          //       prevState,
-          //       newState,
-          //       option: { value: val, label: val, searchTextAsValue: true } as any,
-          //       indexCol,
-          //       indexRow,
-          //       type: 'blur'
-          //     })
-          //   }
-          // }}
-
-          // onKeyDown={(event: any) => {
-
-          //   if (event.key === 'Enter' && event.target?.value && column?.editSelectSettings?.searchTextAsValue && isMulti !== true) {
-
-          //     const val = event.target.value
-          //     onChange(val)
-
-          //     const formState = getValues()
-          //     // const itemState = getValues(dataIndex)
-          //     // @ts-ignore
-          //     const prevState = record[dataIndex]
-          //     const newState = val
-
-          //     handleCellChange?.({
-          //       key,
-          //       field: column.field ?? column.field as any,
-          //       record: formState,
-          //       prevState,
-          //       newState,
-          //       option: { value: val, label: val, searchTextAsValue: true } as any,
-          //       indexCol,
-          //       indexRow,
-          //       type: 'blur'
-          //     })
-
-          //   }
-
-          // }}
-          ,
-
+          },
+          searchTextAsValue: column.editSelectSettings?.searchTextAsValue,
           "data-tooltip-content": message,
           "data-tooltip-id": `${id}-tooltip-error`
         });

package/es/table-component/components/async-table-select/index.d.ts

@@ -7,5 +7,6 @@ export interface DebounceSelectProps<OptionType extends BaseOptionType = Default
     debounceTimeout?: number;
     defaultOptions?: OptionType[];
     rowData?: any;
+    searchTextAsValue?: boolean;
 }
-export declare function AsyncTableSelect<OptionType extends BaseOptionType>({ loadOptions, debounceTimeout, defaultOptions, columns, rowData, ...props }: DebounceSelectProps<OptionType>): JSX.Element;
+export declare function AsyncTableSelect<OptionType extends BaseOptionType>({ loadOptions, debounceTimeout, defaultOptions, columns, rowData, searchTextAsValue, onChange, ...props }: DebounceSelectProps<OptionType>): JSX.Element;

package/es/table-component/components/async-table-select/index.js

@@ -1,5 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useId, useMemo, useRef, useState } from 'react';
 import debounce from 'lodash/debounce';
 import { TableSelect } from "rc-master-ui";
 export function AsyncTableSelect({
@@ -8,9 +8,43 @@ export function AsyncTableSelect({
   defaultOptions,
   columns,
   rowData,
+  searchTextAsValue,
+  onChange,
   ...props
 }) {
   const [options, setOptions] = useState(defaultOptions ?? []);
+  const selectRef = useRef(null);
+  const searchText = useRef('');
+  const allowSearchText = searchTextAsValue && !props.disabled && !props.mode && props.selectMode !== 'checkbox';
+  const popupClass = `es-grid-select-table-popup-${useId().replace(/:/g, '')}`;
+  const popupClassName = allowSearchText ? [props.popupClassName || props.dropdownClassName, popupClass].filter(Boolean).join(' ') : props.popupClassName;
+  const commitSearchText = useCallback(() => {
+    const value = searchText.current;
+    searchText.current = '';
+    if (allowSearchText && value) {
+      onChange?.(value, {
+        value,
+        label: value,
+        searchTextAsValue: true
+      });
+    }
+  }, [allowSearchText, onChange]);
+  useEffect(() => {
+    const element = selectRef.current?.nativeElement;
+    if (!allowSearchText || !element) return;
+
+    // The grid can unmount the editor on mousedown before the browser dispatches blur.
+    const commitOnOutsideMouseDown = event => {
+      if (!searchText.current) return;
+      const path = event.composedPath();
+      const isInsidePopup = path.some(node => node instanceof Element && node.classList.contains(popupClass));
+      if (path.includes(element) || isInsidePopup) return;
+      commitSearchText();
+    };
+    const ownerDocument = element.ownerDocument;
+    ownerDocument.addEventListener('mousedown', commitOnOutsideMouseDown, true);
+    return () => ownerDocument.removeEventListener('mousedown', commitOnOutsideMouseDown, true);
+  }, [allowSearchText, commitSearchText, popupClass]);
   const debounceFetcher = useMemo(() => {
     const fetchOptions = value => {
       if (value.trim().length === 0) {
@@ -31,9 +65,36 @@ export function AsyncTableSelect({
     setOptions(defaultOptions ?? []);
   }, [defaultOptions]);
   return /*#__PURE__*/React.createElement(TableSelect, _extends({}, props, {
+    ref: selectRef,
+    popupClassName: popupClassName,
     filterOption: loadOptions ? false : props?.filterOption,
-    onSearch: debounceFetcher,
-    onSelect: () => setOptions(defaultOptions ?? []),
+    onSearch: value => {
+      searchText.current = value;
+      debounceFetcher(value);
+    },
+    onChange: (value, option) => {
+      searchText.current = '';
+      onChange?.(value, option);
+    },
+    onSelect: () => {
+      searchText.current = '';
+      setOptions(defaultOptions ?? []);
+    },
+    onBlur: event => {
+      commitSearchText();
+      props.onBlur?.(event);
+    },
+    onInputKeyDown: event => {
+      props.onInputKeyDown?.(event);
+      if (!allowSearchText || event.key !== 'Enter' || !searchText.current) return;
+
+      // Stop Enter before the dropdown selects the active row or the grid saves again.
+      event.stopPropagation();
+      if (!event.nativeEvent.isComposing && event.keyCode !== 229) {
+        event.preventDefault();
+        event.currentTarget.blur();
+      }
+    },
     options: options,
     columns: columns
   }));

package/lib/ali-table/base-table/cell/EditCell.js

@@ -565,64 +565,8 @@ const EditCell = props => {
           fieldNames: fieldNames ? fieldNames : {
             value: keySelect,
             label: inputKey ?? 'label'
-          }
-
-          // onBlur={(event: any) => {
-
-          //   if (event.inputValue && column?.editSelectSettings?.searchTextAsValue && isMulti !== true) {
-          //     const val = event.inputValue
-          //     onChange(val ?? undefined)
-
-          //     const formState = getValues()
-          //     // const itemState = getValues(dataIndex)
-          //     // @ts-ignore
-          //     const prevState = record[dataIndex]
-          //     const newState = val
-
-          //     handleCellChange?.({
-          //       key,
-          //       field: column.field ?? column.field as any,
-          //       record: formState,
-          //       prevState,
-          //       newState,
-          //       option: { value: val, label: val, searchTextAsValue: true } as any,
-          //       indexCol,
-          //       indexRow,
-          //       type: 'blur'
-          //     })
-          //   }
-          // }}
-
-          // onKeyDown={(event: any) => {
-
-          //   if (event.key === 'Enter' && event.target?.value && column?.editSelectSettings?.searchTextAsValue && isMulti !== true) {
-
-          //     const val = event.target.value
-          //     onChange(val)
-
-          //     const formState = getValues()
-          //     // const itemState = getValues(dataIndex)
-          //     // @ts-ignore
-          //     const prevState = record[dataIndex]
-          //     const newState = val
-
-          //     handleCellChange?.({
-          //       key,
-          //       field: column.field ?? column.field as any,
-          //       record: formState,
-          //       prevState,
-          //       newState,
-          //       option: { value: val, label: val, searchTextAsValue: true } as any,
-          //       indexCol,
-          //       indexRow,
-          //       type: 'blur'
-          //     })
-
-          //   }
-
-          // }}
-          ,
-
+          },
+          searchTextAsValue: column.editSelectSettings?.searchTextAsValue,
           "data-tooltip-content": message,
           "data-tooltip-id": `${tableId}-tooltip-error`
         });

package/lib/ali-table/base-table/cell/HeaderEditCell.js

@@ -563,64 +563,8 @@ const HeaderEditCell = props => {
           fieldNames: fieldNames ? fieldNames : {
             value: keySelect,
             label: inputKey ?? 'label'
-          }
-
-          // onBlur={(event: any) => {
-
-          //   if (event.inputValue && column?.editSelectSettings?.searchTextAsValue && isMulti !== true) {
-          //     const val = event.inputValue
-          //     onChange(val ?? undefined)
-
-          //     const formState = getValues()
-          //     // const itemState = getValues(dataIndex)
-          //     // @ts-ignore
-          //     const prevState = record[dataIndex]
-          //     const newState = val
-
-          //     handleCellChange?.({
-          //       key,
-          //       field: column.field ?? column.field as any,
-          //       record: formState,
-          //       prevState,
-          //       newState,
-          //       option: { value: val, label: val, searchTextAsValue: true } as any,
-          //       indexCol,
-          //       indexRow,
-          //       type: 'blur'
-          //     })
-          //   }
-          // }}
-
-          // onKeyDown={(event: any) => {
-
-          //   if (event.key === 'Enter' && event.target?.value && column?.editSelectSettings?.searchTextAsValue && isMulti !== true) {
-
-          //     const val = event.target.value
-          //     onChange(val)
-
-          //     const formState = getValues()
-          //     // const itemState = getValues(dataIndex)
-          //     // @ts-ignore
-          //     const prevState = record[dataIndex]
-          //     const newState = val
-
-          //     handleCellChange?.({
-          //       key,
-          //       field: column.field ?? column.field as any,
-          //       record: formState,
-          //       prevState,
-          //       newState,
-          //       option: { value: val, label: val, searchTextAsValue: true } as any,
-          //       indexCol,
-          //       indexRow,
-          //       type: 'blur'
-          //     })
-
-          //   }
-
-          // }}
-          ,
-
+          },
+          searchTextAsValue: column.editSelectSettings?.searchTextAsValue,
           "data-tooltip-content": message,
           "data-tooltip-id": `${tableId}-tooltip-error`
         });

package/lib/grid-component/type.d.ts

@@ -614,7 +614,7 @@ export type IEditSelectSettings = {
     fieldValue?: string;
     /** get label form other field **/
     fieldLabel?: string;
-    /** cho phép nhập giá trị - onBlur: giá trị search được set thành value **/
+    /** Lưu nội dung tìm kiếm làm giá trị khi rời ô chọn đơn. `select` và `selectTable` cũng hỗ trợ Enter. */
     searchTextAsValue?: boolean;
     filterKey?: string[];
     selectMode?: SelectMode;

package/lib/group-component/body/EditableCell.js

@@ -563,64 +563,8 @@ const EditableCell = props => {
           fieldNames: fieldNames ? fieldNames : {
             value: keySelect,
             label: inputKey ?? 'label'
-          }
-
-          // onBlur={(event: any) => {
-
-          //   if (event.inputValue && column?.editSelectSettings?.searchTextAsValue && isMulti !== true) {
-          //     const val = event.inputValue
-          //     onChange(val ?? undefined)
-
-          //     const formState = getValues()
-          //     // const itemState = getValues(dataIndex)
-          //     // @ts-ignore
-          //     const prevState = record[dataIndex]
-          //     const newState = val
-
-          //     handleCellChange?.({
-          //       key,
-          //       field: column.field ?? column.field as any,
-          //       record: formState,
-          //       prevState,
-          //       newState,
-          //       option: { value: val, label: val, searchTextAsValue: true } as any,
-          //       indexCol,
-          //       indexRow,
-          //       type: 'blur'
-          //     })
-          //   }
-          // }}
-
-          // onKeyDown={(event: any) => {
-
-          //   if (event.key === 'Enter' && event.target?.value && column?.editSelectSettings?.searchTextAsValue && isMulti !== true) {
-
-          //     const val = event.target.value
-          //     onChange(val)
-
-          //     const formState = getValues()
-          //     // const itemState = getValues(dataIndex)
-          //     // @ts-ignore
-          //     const prevState = record[dataIndex]
-          //     const newState = val
-
-          //     handleCellChange?.({
-          //       key,
-          //       field: column.field ?? column.field as any,
-          //       record: formState,
-          //       prevState,
-          //       newState,
-          //       option: { value: val, label: val, searchTextAsValue: true } as any,
-          //       indexCol,
-          //       indexRow,
-          //       type: 'blur'
-          //     })
-
-          //   }
-
-          // }}
-          ,
-
+          },
+          searchTextAsValue: column.editSelectSettings?.searchTextAsValue,
           "data-tooltip-content": message,
           "data-tooltip-id": `${id}-tooltip-error`
         });

package/lib/group-component/components/async-table-select/index.d.ts

@@ -1,11 +1,2 @@
-/// <reference types="react" />
-import type { BaseOptionType, DefaultOptionType } from "rc-select/lib/Select";
-import type { TableSelectProps } from "rc-master-ui";
-import type { LoadOptionsArgs } from '../../../grid-component/type';
-export interface DebounceSelectProps<OptionType extends BaseOptionType = DefaultOptionType> extends TableSelectProps {
-    loadOptions?: (search: string, callback: (newOptions: OptionType[]) => void, args?: LoadOptionsArgs) => void;
-    debounceTimeout?: number;
-    defaultOptions?: OptionType[];
-    rowData?: any;
-}
-export declare function AsyncTableSelect<OptionType extends BaseOptionType>({ loadOptions, debounceTimeout, defaultOptions, columns, rowData, ...props }: DebounceSelectProps<OptionType>): JSX.Element;
+export { AsyncTableSelect } from '../../../table-component/components/async-table-select';
+export type { DebounceSelectProps } from '../../../table-component/components/async-table-select';

package/lib/group-component/components/async-table-select/index.js

@@ -1,49 +1,12 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.AsyncTableSelect = AsyncTableSelect;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _react = _interopRequireWildcard(require("react"));
-var _debounce = _interopRequireDefault(require("lodash/debounce"));
-var _rcMasterUi = require("rc-master-ui");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-function AsyncTableSelect({
-  loadOptions,
-  debounceTimeout = 500,
-  defaultOptions,
-  columns,
-  rowData,
-  ...props
-}) {
-  const [options, setOptions] = (0, _react.useState)(defaultOptions ?? []);
-  const debounceFetcher = (0, _react.useMemo)(() => {
-    const fetchOptions = value => {
-      if (value.trim().length === 0) {
-        setOptions(defaultOptions ?? []);
-        return;
-      }
-      if (loadOptions) {
-        loadOptions(value, newOptions => {
-          setOptions(newOptions);
-        }, {
-          rowData
-        });
-      }
-    };
-    return (0, _debounce.default)(fetchOptions, debounceTimeout);
-  }, [debounceTimeout, loadOptions, defaultOptions, rowData]);
-  (0, _react.useEffect)(() => {
-    setOptions(defaultOptions ?? []);
-  }, [defaultOptions]);
-  return /*#__PURE__*/_react.default.createElement(_rcMasterUi.TableSelect, (0, _extends2.default)({}, props, {
-    filterOption: loadOptions ? false : props?.filterOption,
-    onSearch: debounceFetcher,
-    onSelect: () => setOptions(defaultOptions ?? []),
-    options: options,
-    columns: columns
-  }));
-}
+Object.defineProperty(exports, "AsyncTableSelect", {
+  enumerable: true,
+  get: function () {
+    return _asyncTableSelect.AsyncTableSelect;
+  }
+});
+var _asyncTableSelect = require("../../../table-component/components/async-table-select");

package/lib/group-component/hook/utils.d.ts

@@ -167,7 +167,7 @@ export declare const fixColumnsLeft: <RecordType>(columns: ColumnTable<RecordTyp
     haveSum?: boolean;
     isSummary?: boolean;
     sumGroup?: boolean;
-    summaryTemplate?: (data: number, key: string) => import("react").ReactNode | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+    summaryTemplate?: (data: number, key: string) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNode;
     sorter?: boolean;
     allowFiltering?: boolean;
     allowSortering?: boolean;
@@ -179,27 +179,27 @@ export declare const fixColumnsLeft: <RecordType>(columns: ColumnTable<RecordTyp
     showFilterSearch?: boolean;
     hidden?: boolean;
     visible?: boolean;
-    headerTooltip?: string | boolean | (() => import("react").ReactNode | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>);
+    headerTooltip?: string | boolean | (() => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNode);
     columnGroupText?: string;
     headerTextAlign?: import("./../../grid-component/type").ITextAlign;
-    headerTemplate?: import("react").ReactNode | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | ((column: ColumnTable<RecordType>) => import("react").ReactNode | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>);
+    headerTemplate?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNode | ((column: ColumnTable<RecordType>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNode);
     fixedType?: import("./../../grid-component/type").FixedType;
     headerTextWrap?: boolean;
     ellipsis?: boolean;
     allowResizing?: boolean;
     align?: import("./../../grid-component/type").ITextAlign;
     textAlign?: import("./../../grid-component/type").ITextAlign;
-    template?: import("react").ReactNode | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | ((args: import("./../../grid-component/type").ColumnTemplate<RecordType>) => import("react").ReactNode | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>);
-    linkTemplate?: import("react").ReactNode | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | ((args: import("./../../grid-component/type").ColumnTemplate<RecordType>) => import("react").ReactNode | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>);
+    template?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNode | ((args: import("./../../grid-component/type").ColumnTemplate<RecordType>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNode);
+    linkTemplate?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNode | ((args: import("./../../grid-component/type").ColumnTemplate<RecordType>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNode);
     showTooltip?: boolean;
     tooltipDescription?: string | ((args: {
         value: any;
         rowData: RecordType;
-    }) => import("react").ReactNode | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>);
-    onCellStyles?: Omit<CSSProperties, "left" | "right" | "display" | "width" | "minWidth" | "position"> | ((cellValue: any, cell: import("@tanstack/react-table").Cell<RecordType, unknown>) => Omit<CSSProperties, "left" | "right" | "display" | "width" | "minWidth" | "position">);
-    onCellHeaderStyles?: Omit<CSSProperties, "left" | "right" | "display" | "width" | "minWidth" | "position"> | ((cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "left" | "right" | "display" | "width" | "minWidth" | "position">);
+    }) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNode);
+    onCellStyles?: Omit<CSSProperties, "width" | "minWidth" | "left" | "right" | "position" | "display"> | ((cellValue: any, cell: import("@tanstack/react-table").Cell<RecordType, unknown>) => Omit<CSSProperties, "width" | "minWidth" | "left" | "right" | "position" | "display">);
+    onCellHeaderStyles?: Omit<CSSProperties, "width" | "minWidth" | "left" | "right" | "position" | "display"> | ((cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "width" | "minWidth" | "left" | "right" | "position" | "display">);
     onCell?: (rowData: RecordType, index: number) => import("react").TdHTMLAttributes<HTMLTableCellElement>;
-    onCellFooterStyles?: Omit<CSSProperties, "left" | "right" | "display" | "width" | "minWidth" | "position"> | ((cellValue: any, cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "left" | "right" | "display" | "width" | "minWidth" | "position">);
+    onCellFooterStyles?: Omit<CSSProperties, "width" | "minWidth" | "left" | "right" | "position" | "display"> | ((cellValue: any, cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "width" | "minWidth" | "left" | "right" | "position" | "display">);
     getValue?: (row: any, rowIndex: number) => any;
     getCellProps?: (value: any, row: any, rowIndex: number) => import("./../../grid-component/type").CellProps;
     headerCellProps?: import("./../../grid-component/type").CellProps;

package/lib/table-component/body/EditableCell.js

@@ -565,64 +565,8 @@ const EditableCell = props => {
           fieldNames: fieldNames ? fieldNames : {
             value: keySelect,
             label: inputKey ?? 'label'
-          }
-
-          // onBlur={(event: any) => {
-
-          //   if (event.inputValue && column?.editSelectSettings?.searchTextAsValue && isMulti !== true) {
-          //     const val = event.inputValue
-          //     onChange(val ?? undefined)
-
-          //     const formState = getValues()
-          //     // const itemState = getValues(dataIndex)
-          //     // @ts-ignore
-          //     const prevState = record[dataIndex]
-          //     const newState = val
-
-          //     handleCellChange?.({
-          //       key,
-          //       field: column.field ?? column.field as any,
-          //       record: formState,
-          //       prevState,
-          //       newState,
-          //       option: { value: val, label: val, searchTextAsValue: true } as any,
-          //       indexCol,
-          //       indexRow,
-          //       type: 'blur'
-          //     })
-          //   }
-          // }}
-
-          // onKeyDown={(event: any) => {
-
-          //   if (event.key === 'Enter' && event.target?.value && column?.editSelectSettings?.searchTextAsValue && isMulti !== true) {
-
-          //     const val = event.target.value
-          //     onChange(val)
-
-          //     const formState = getValues()
-          //     // const itemState = getValues(dataIndex)
-          //     // @ts-ignore
-          //     const prevState = record[dataIndex]
-          //     const newState = val
-
-          //     handleCellChange?.({
-          //       key,
-          //       field: column.field ?? column.field as any,
-          //       record: formState,
-          //       prevState,
-          //       newState,
-          //       option: { value: val, label: val, searchTextAsValue: true } as any,
-          //       indexCol,
-          //       indexRow,
-          //       type: 'blur'
-          //     })
-
-          //   }
-
-          // }}
-          ,
-
+          },
+          searchTextAsValue: column.editSelectSettings?.searchTextAsValue,
           "data-tooltip-content": message,
           "data-tooltip-id": `${id}-tooltip-error`
         });

package/lib/table-component/components/async-table-select/index.d.ts

@@ -7,5 +7,6 @@ export interface DebounceSelectProps<OptionType extends BaseOptionType = Default
     debounceTimeout?: number;
     defaultOptions?: OptionType[];
     rowData?: any;
+    searchTextAsValue?: boolean;
 }
-export declare function AsyncTableSelect<OptionType extends BaseOptionType>({ loadOptions, debounceTimeout, defaultOptions, columns, rowData, ...props }: DebounceSelectProps<OptionType>): JSX.Element;
+export declare function AsyncTableSelect<OptionType extends BaseOptionType>({ loadOptions, debounceTimeout, defaultOptions, columns, rowData, searchTextAsValue, onChange, ...props }: DebounceSelectProps<OptionType>): JSX.Element;

package/lib/table-component/components/async-table-select/index.js

@@ -17,9 +17,43 @@ function AsyncTableSelect({
   defaultOptions,
   columns,
   rowData,
+  searchTextAsValue,
+  onChange,
   ...props
 }) {
   const [options, setOptions] = (0, _react.useState)(defaultOptions ?? []);
+  const selectRef = (0, _react.useRef)(null);
+  const searchText = (0, _react.useRef)('');
+  const allowSearchText = searchTextAsValue && !props.disabled && !props.mode && props.selectMode !== 'checkbox';
+  const popupClass = `es-grid-select-table-popup-${(0, _react.useId)().replace(/:/g, '')}`;
+  const popupClassName = allowSearchText ? [props.popupClassName || props.dropdownClassName, popupClass].filter(Boolean).join(' ') : props.popupClassName;
+  const commitSearchText = (0, _react.useCallback)(() => {
+    const value = searchText.current;
+    searchText.current = '';
+    if (allowSearchText && value) {
+      onChange?.(value, {
+        value,
+        label: value,
+        searchTextAsValue: true
+      });
+    }
+  }, [allowSearchText, onChange]);
+  (0, _react.useEffect)(() => {
+    const element = selectRef.current?.nativeElement;
+    if (!allowSearchText || !element) return;
+
+    // The grid can unmount the editor on mousedown before the browser dispatches blur.
+    const commitOnOutsideMouseDown = event => {
+      if (!searchText.current) return;
+      const path = event.composedPath();
+      const isInsidePopup = path.some(node => node instanceof Element && node.classList.contains(popupClass));
+      if (path.includes(element) || isInsidePopup) return;
+      commitSearchText();
+    };
+    const ownerDocument = element.ownerDocument;
+    ownerDocument.addEventListener('mousedown', commitOnOutsideMouseDown, true);
+    return () => ownerDocument.removeEventListener('mousedown', commitOnOutsideMouseDown, true);
+  }, [allowSearchText, commitSearchText, popupClass]);
   const debounceFetcher = (0, _react.useMemo)(() => {
     const fetchOptions = value => {
       if (value.trim().length === 0) {
@@ -40,9 +74,36 @@ function AsyncTableSelect({
     setOptions(defaultOptions ?? []);
   }, [defaultOptions]);
   return /*#__PURE__*/_react.default.createElement(_rcMasterUi.TableSelect, (0, _extends2.default)({}, props, {
+    ref: selectRef,
+    popupClassName: popupClassName,
     filterOption: loadOptions ? false : props?.filterOption,
-    onSearch: debounceFetcher,
-    onSelect: () => setOptions(defaultOptions ?? []),
+    onSearch: value => {
+      searchText.current = value;
+      debounceFetcher(value);
+    },
+    onChange: (value, option) => {
+      searchText.current = '';
+      onChange?.(value, option);
+    },
+    onSelect: () => {
+      searchText.current = '';
+      setOptions(defaultOptions ?? []);
+    },
+    onBlur: event => {
+      commitSearchText();
+      props.onBlur?.(event);
+    },
+    onInputKeyDown: event => {
+      props.onInputKeyDown?.(event);
+      if (!allowSearchText || event.key !== 'Enter' || !searchText.current) return;
+
+      // Stop Enter before the dropdown selects the active row or the grid saves again.
+      event.stopPropagation();
+      if (!event.nativeEvent.isComposing && event.keyCode !== 229) {
+        event.preventDefault();
+        event.currentTarget.blur();
+      }
+    },
     options: options,
     columns: columns
   }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "es-grid-template",
-  "version": "1.9.100",
+  "version": "1.9.102",
   "description": "es-grid-template",
   "keywords": [
     "react",