es-grid-template 1.9.99 → 1.9.101

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/body/TableBody.js

@@ -27,9 +27,13 @@ const TableBody = ({
     locale
   } = React.useContext(TableContext);
 
+  // Keep measured heights attached to records when expanding, sorting or filtering.
+  const getItemKey = React.useCallback(index => rows[index].id, [rows]);
+
   //dynamic row height virtualization - alternatively you could use a simpler fixed row height strategy without the need for `measureElement`
   const rowVirtualizer = useVirtualizer({
     count: rows.length,
+    getItemKey,
     estimateSize: () => 36,
     //estimate row height for accurate scrollbar dragging
     getScrollElement: () => tableContainerRef.current,

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

@@ -930,7 +930,7 @@ const TableBodyCellEdit = props => {
       }),
       style: {
         display: 'flex',
-        height: '36px',
+        minHeight: 36,
         userSelect: 'none',
         width: cell.column.getSize(),
         // flexBasis: cell.column.getSize(),
@@ -1019,7 +1019,7 @@ const TableBodyCellEdit = props => {
       }),
       style: {
         display: 'flex',
-        height: '36px',
+        minHeight: 36,
         width: cell.column.getSize(),
         minWidth: cell.column.getSize(),
         // flex: 1,
@@ -1045,7 +1045,7 @@ const TableBodyCellEdit = props => {
       }),
       style: {
         display: 'flex',
-        height: '36px',
+        minHeight: 36,
         width: cell.column.getSize(),
         minWidth: cell.column.getSize(),
         // flex: 1,
@@ -1186,7 +1186,8 @@ const TableBodyCellEdit = props => {
       minWidth: cell.column.getSize(),
       // flex: 1,
       // maxWidth: cell.column.getSize(),
-      height: '36px',
+      height: isEditing && canEdit ? 36 : undefined,
+      minHeight: 36,
       ...getCommonPinningStyles(cell.column),
       cursor: isPasting ? 'crosshair' : undefined
     },

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

@@ -55,10 +55,15 @@ const TableBodyRow = ({
   const rowClass = typeof rowClassName === 'function' ? rowClassName(row.original, row.index, row.depth) : rowClassName;
   const rowStyles = typeof onRowStyles === 'function' ? onRowStyles(row.original, row) : onRowStyles;
   const isRowEditable = rowEditable ? rowEditable(row.original) : true;
+
+  // A reused DOM row needs measuring again when its virtual index changes.
+  const measureRow = React.useCallback(element => {
+    rowVirtualizer.measureElement(element);
+  }, [rowVirtualizer, virtualRow.index]);
   return /*#__PURE__*/React.createElement("div", _extends({
     "data-index": virtualRow.index //needed for dynamic row height measurement
     ,
-    ref: rowVirtualizer.measureElement //measure dynamic row height
+    ref: measureRow //measure dynamic row height
     ,
     key: row.id,
     "data-row-key": row.id,
@@ -78,8 +83,7 @@ const TableBodyRow = ({
       //this should always be a `style` as it changes on scroll
       // height: isEditing ? '36px' : undefined,
       gridTemplateColumns: `${templateColumns.map(n => `${n}fr`).join(" ")}`,
-      height: isEditing ? virtualRow.size : undefined,
-      minHeight: isEditing ? undefined : virtualRow.size,
+      minHeight: isEditing ? virtualRow.size : 36,
       ...rowStyles
     }
   }, getRowFocusHandlers(row.original, rowFocus), {

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/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/body/TableBodyCellEdit.js

@@ -958,7 +958,7 @@ const TableBodyCellEdit = props => {
       }),
       style: {
         display: 'flex',
-        height: '32px',
+        minHeight: 32,
         userSelect: 'none',
         width: cell.column.getSize(),
         // flexBasis: cell.column.getSize(),
@@ -1047,7 +1047,7 @@ const TableBodyCellEdit = props => {
       }),
       style: {
         display: 'flex',
-        height: '32px',
+        minHeight: 32,
         width: cell.column.getSize(),
         minWidth: cell.column.getSize(),
         // flex: 1,
@@ -1073,7 +1073,7 @@ const TableBodyCellEdit = props => {
       }),
       style: {
         display: 'flex',
-        height: '32px',
+        minHeight: 32,
         width: cell.column.getSize(),
         minWidth: cell.column.getSize(),
         // flex: 1,
@@ -1283,7 +1283,8 @@ const TableBodyCellEdit = props => {
       minWidth: cell.column.getSize(),
       // flex: 1,
       // maxWidth: cell.column.getSize(),
-      height: '32px',
+      height: isEditing && canEdit ? 32 : undefined,
+      minHeight: 32,
       ...getCommonPinningStyles(cell.column),
       cursor: isPasting ? 'crosshair' : undefined
     },

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

@@ -84,8 +84,7 @@ const TableBodyRow = ({
       transform: `translateY(${virtualRow.start}px)`,
       //this should always be a `style` as it changes on scroll
       gridTemplateColumns: `${templateColumns.map(n => `${n}fr`).join(" ")}`,
-      height: isEditing ? virtualRow.size : undefined,
-      minHeight: isEditing ? undefined : virtualRow.size,
+      minHeight: isEditing ? virtualRow.size : 32,
       ...rowStyles
     }
   }, getRowFocusHandlers(row.original, rowFocus), {

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, ...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, { useEffect, useMemo, useRef, useState } from 'react';
 import debounce from 'lodash/debounce';
 import { TableSelect } from "rc-master-ui";
 export function AsyncTableSelect({
@@ -8,9 +8,12 @@ export function AsyncTableSelect({
   defaultOptions,
   columns,
   rowData,
+  searchTextAsValue,
   ...props
 }) {
   const [options, setOptions] = useState(defaultOptions ?? []);
+  const searchText = useRef('');
+  const allowSearchText = searchTextAsValue && !props.mode && props.selectMode !== 'checkbox';
   const debounceFetcher = useMemo(() => {
     const fetchOptions = value => {
       if (value.trim().length === 0) {
@@ -32,8 +35,41 @@ export function AsyncTableSelect({
   }, [defaultOptions]);
   return /*#__PURE__*/React.createElement(TableSelect, _extends({}, props, {
     filterOption: loadOptions ? false : props?.filterOption,
-    onSearch: debounceFetcher,
-    onSelect: () => setOptions(defaultOptions ?? []),
+    onSearch: value => {
+      searchText.current = value;
+      debounceFetcher(value);
+    },
+    onChange: (value, option) => {
+      searchText.current = '';
+      props.onChange?.(value, option);
+    },
+    onSelect: () => {
+      searchText.current = '';
+      setOptions(defaultOptions ?? []);
+    },
+    onBlur: event => {
+      const value = searchText.current;
+      searchText.current = '';
+      if (allowSearchText && value) {
+        props.onChange?.(value, {
+          value,
+          label: value,
+          searchTextAsValue: true
+        });
+      }
+      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/body/TableBody.js

@@ -36,9 +36,13 @@ const TableBody = ({
     locale
   } = _react.default.useContext(_useContext.TableContext);
 
+  // Keep measured heights attached to records when expanding, sorting or filtering.
+  const getItemKey = _react.default.useCallback(index => rows[index].id, [rows]);
+
   //dynamic row height virtualization - alternatively you could use a simpler fixed row height strategy without the need for `measureElement`
   const rowVirtualizer = (0, _reactVirtual.useVirtualizer)({
     count: rows.length,
+    getItemKey,
     estimateSize: () => 36,
     //estimate row height for accurate scrollbar dragging
     getScrollElement: () => tableContainerRef.current,

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

@@ -937,7 +937,7 @@ const TableBodyCellEdit = props => {
       }),
       style: {
         display: 'flex',
-        height: '36px',
+        minHeight: 36,
         userSelect: 'none',
         width: cell.column.getSize(),
         // flexBasis: cell.column.getSize(),
@@ -1026,7 +1026,7 @@ const TableBodyCellEdit = props => {
       }),
       style: {
         display: 'flex',
-        height: '36px',
+        minHeight: 36,
         width: cell.column.getSize(),
         minWidth: cell.column.getSize(),
         // flex: 1,
@@ -1052,7 +1052,7 @@ const TableBodyCellEdit = props => {
       }),
       style: {
         display: 'flex',
-        height: '36px',
+        minHeight: 36,
         width: cell.column.getSize(),
         minWidth: cell.column.getSize(),
         // flex: 1,
@@ -1193,7 +1193,8 @@ const TableBodyCellEdit = props => {
       minWidth: cell.column.getSize(),
       // flex: 1,
       // maxWidth: cell.column.getSize(),
-      height: '36px',
+      height: isEditing && canEdit ? 36 : undefined,
+      minHeight: 36,
       ...(0, _utils.getCommonPinningStyles)(cell.column),
       cursor: isPasting ? 'crosshair' : undefined
     },

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

@@ -62,10 +62,15 @@ const TableBodyRow = ({
   const rowClass = typeof rowClassName === 'function' ? rowClassName(row.original, row.index, row.depth) : rowClassName;
   const rowStyles = typeof onRowStyles === 'function' ? onRowStyles(row.original, row) : onRowStyles;
   const isRowEditable = rowEditable ? rowEditable(row.original) : true;
+
+  // A reused DOM row needs measuring again when its virtual index changes.
+  const measureRow = _react.default.useCallback(element => {
+    rowVirtualizer.measureElement(element);
+  }, [rowVirtualizer, virtualRow.index]);
   return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
     "data-index": virtualRow.index //needed for dynamic row height measurement
     ,
-    ref: rowVirtualizer.measureElement //measure dynamic row height
+    ref: measureRow //measure dynamic row height
     ,
     key: row.id,
     "data-row-key": row.id,
@@ -85,8 +90,7 @@ const TableBodyRow = ({
       //this should always be a `style` as it changes on scroll
       // height: isEditing ? '36px' : undefined,
       gridTemplateColumns: `${templateColumns.map(n => `${n}fr`).join(" ")}`,
-      height: isEditing ? virtualRow.size : undefined,
-      minHeight: isEditing ? undefined : virtualRow.size,
+      minHeight: isEditing ? virtualRow.size : 36,
       ...rowStyles
     }
   }, (0, _rowFocus.getRowFocusHandlers)(row.original, rowFocus), {

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/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/body/TableBodyCellEdit.js

@@ -963,7 +963,7 @@ const TableBodyCellEdit = props => {
       }),
       style: {
         display: 'flex',
-        height: '32px',
+        minHeight: 32,
         userSelect: 'none',
         width: cell.column.getSize(),
         // flexBasis: cell.column.getSize(),
@@ -1052,7 +1052,7 @@ const TableBodyCellEdit = props => {
       }),
       style: {
         display: 'flex',
-        height: '32px',
+        minHeight: 32,
         width: cell.column.getSize(),
         minWidth: cell.column.getSize(),
         // flex: 1,
@@ -1078,7 +1078,7 @@ const TableBodyCellEdit = props => {
       }),
       style: {
         display: 'flex',
-        height: '32px',
+        minHeight: 32,
         width: cell.column.getSize(),
         minWidth: cell.column.getSize(),
         // flex: 1,
@@ -1288,7 +1288,8 @@ const TableBodyCellEdit = props => {
       minWidth: cell.column.getSize(),
       // flex: 1,
       // maxWidth: cell.column.getSize(),
-      height: '32px',
+      height: isEditing && canEdit ? 32 : undefined,
+      minHeight: 32,
       ...(0, _utils.getCommonPinningStyles)(cell.column),
       cursor: isPasting ? 'crosshair' : undefined
     },

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

@@ -91,8 +91,7 @@ const TableBodyRow = ({
       transform: `translateY(${virtualRow.start}px)`,
       //this should always be a `style` as it changes on scroll
       gridTemplateColumns: `${templateColumns.map(n => `${n}fr`).join(" ")}`,
-      height: isEditing ? virtualRow.size : undefined,
-      minHeight: isEditing ? undefined : virtualRow.size,
+      minHeight: isEditing ? virtualRow.size : 32,
       ...rowStyles
     }
   }, (0, _rowFocus.getRowFocusHandlers)(row.original, rowFocus), {

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, ...props }: DebounceSelectProps<OptionType>): JSX.Element;

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

@@ -17,9 +17,12 @@ function AsyncTableSelect({
   defaultOptions,
   columns,
   rowData,
+  searchTextAsValue,
   ...props
 }) {
   const [options, setOptions] = (0, _react.useState)(defaultOptions ?? []);
+  const searchText = (0, _react.useRef)('');
+  const allowSearchText = searchTextAsValue && !props.mode && props.selectMode !== 'checkbox';
   const debounceFetcher = (0, _react.useMemo)(() => {
     const fetchOptions = value => {
       if (value.trim().length === 0) {
@@ -41,8 +44,41 @@ function AsyncTableSelect({
   }, [defaultOptions]);
   return /*#__PURE__*/_react.default.createElement(_rcMasterUi.TableSelect, (0, _extends2.default)({}, props, {
     filterOption: loadOptions ? false : props?.filterOption,
-    onSearch: debounceFetcher,
-    onSelect: () => setOptions(defaultOptions ?? []),
+    onSearch: value => {
+      searchText.current = value;
+      debounceFetcher(value);
+    },
+    onChange: (value, option) => {
+      searchText.current = '';
+      props.onChange?.(value, option);
+    },
+    onSelect: () => {
+      searchText.current = '';
+      setOptions(defaultOptions ?? []);
+    },
+    onBlur: event => {
+      const value = searchText.current;
+      searchText.current = '';
+      if (allowSearchText && value) {
+        props.onChange?.(value, {
+          value,
+          label: value,
+          searchTextAsValue: true
+        });
+      }
+      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.99",
+  "version": "1.9.101",
   "description": "es-grid-template",
   "keywords": [
     "react",