es-grid-template 1.9.101 → 1.9.102

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, "position" | "left" | "right" | "display" | "width" | "minWidth"> | ((cellValue: any, cell: import("@tanstack/react-table").Cell<RecordType, unknown>) => Omit<CSSProperties, "position" | "left" | "right" | "display" | "width" | "minWidth">);
-    onCellHeaderStyles?: Omit<CSSProperties, "position" | "left" | "right" | "display" | "width" | "minWidth"> | ((cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "position" | "left" | "right" | "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, "position" | "left" | "right" | "display" | "width" | "minWidth"> | ((cellValue: any, cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "position" | "left" | "right" | "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/components/async-table-select/index.d.ts

@@ -9,4 +9,4 @@ export interface DebounceSelectProps<OptionType extends BaseOptionType = Default
     rowData?: any;
     searchTextAsValue?: boolean;
 }
-export declare function AsyncTableSelect<OptionType extends BaseOptionType>({ loadOptions, debounceTimeout, defaultOptions, columns, rowData, searchTextAsValue, ...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, useRef, 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({
@@ -9,11 +9,42 @@ export function AsyncTableSelect({
   columns,
   rowData,
   searchTextAsValue,
+  onChange,
   ...props
 }) {
   const [options, setOptions] = useState(defaultOptions ?? []);
+  const selectRef = useRef(null);
   const searchText = useRef('');
-  const allowSearchText = searchTextAsValue && !props.mode && props.selectMode !== 'checkbox';
+  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) {
@@ -34,6 +65,8 @@ export function AsyncTableSelect({
     setOptions(defaultOptions ?? []);
   }, [defaultOptions]);
   return /*#__PURE__*/React.createElement(TableSelect, _extends({}, props, {
+    ref: selectRef,
+    popupClassName: popupClassName,
     filterOption: loadOptions ? false : props?.filterOption,
     onSearch: value => {
       searchText.current = value;
@@ -41,22 +74,14 @@ export function AsyncTableSelect({
     },
     onChange: (value, option) => {
       searchText.current = '';
-      props.onChange?.(value, option);
+      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
-        });
-      }
+      commitSearchText();
       props.onBlur?.(event);
     },
     onInputKeyDown: event => {

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

@@ -9,4 +9,4 @@ export interface DebounceSelectProps<OptionType extends BaseOptionType = Default
     rowData?: any;
     searchTextAsValue?: boolean;
 }
-export declare function AsyncTableSelect<OptionType extends BaseOptionType>({ loadOptions, debounceTimeout, defaultOptions, columns, rowData, searchTextAsValue, ...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

@@ -18,11 +18,42 @@ function AsyncTableSelect({
   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.mode && props.selectMode !== 'checkbox';
+  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) {
@@ -43,6 +74,8 @@ 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: value => {
       searchText.current = value;
@@ -50,22 +83,14 @@ function AsyncTableSelect({
     },
     onChange: (value, option) => {
       searchText.current = '';
-      props.onChange?.(value, option);
+      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
-        });
-      }
+      commitSearchText();
       props.onBlur?.(event);
     },
     onInputKeyDown: event => {

package/package.json

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