@hsu-react/ui 0.0.14 → 0.0.15

package/es/components/Select/AutoCompleteSelect/index.js

@@ -1,5 +1,5 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-var _excluded = ["prefix", "suffix", "className", "selectClassName", "onFocus", "onBlur", "onSearch", "disabled", "popupClassName", "filterOption", "onChange", "options", "placement", "onDropdownVisibleChange", "popupMatchSelectWidth", "popupMatchContentWidth", "optionFontSize"],
+var _excluded = ["prefix", "suffix", "className", "selectClassName", "onFocus", "onBlur", "onSearch", "disabled", "popupClassName", "filterOption", "onChange", "options", "placement", "onDropdownVisibleChange", "popupMatchSelectWidth", "popupMatchContentWidth", "optionFontSize", "value"],
   _excluded2 = ["label", "value", "disabled"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -15,7 +15,7 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import { AutoComplete } from "antd";
-import React, { useEffect, useMemo, useRef, useState } from "react";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import classNames from "classnames";
 import styles from "./index.module.scss";
 import { generateRandomStr } from "hsu-utils";
@@ -48,6 +48,7 @@ var AutoCompleteSelect = function AutoCompleteSelect(props) {
     popupMatchContentWidth = props.popupMatchContentWidth,
     _props$optionFontSize = props.optionFontSize,
     optionFontSize = _props$optionFontSize === void 0 ? 14 : _props$optionFontSize,
+    value = props.value,
     antdAutoCompleteConfig = _objectWithoutProperties(props, _excluded);
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
@@ -58,23 +59,33 @@ var AutoCompleteSelect = function AutoCompleteSelect(props) {
     _useState4 = _slicedToArray(_useState3, 2),
     open = _useState4[0],
     setOpen = _useState4[1];
-  var _useState5 = useState(false),
+  var _useState5 = useState(""),
     _useState6 = _slicedToArray(_useState5, 2),
-    legacyHasErrorStatus = _useState6[0],
-    setLegacyHasErrorStatus = _useState6[1];
-  var _useState7 = useState(true),
+    searchText = _useState6[0],
+    setSearchText = _useState6[1];
+  var _useState7 = useState(false),
     _useState8 = _slicedToArray(_useState7, 2),
-    legacyHasArrowOrClear = _useState8[0],
-    setLegacyHasArrowOrClear = _useState8[1];
+    legacyHasErrorStatus = _useState8[0],
+    setLegacyHasErrorStatus = _useState8[1];
+  var _useState9 = useState(true),
+    _useState10 = _slicedToArray(_useState9, 2),
+    legacyHasArrowOrClear = _useState10[0],
+    setLegacyHasArrowOrClear = _useState10[1];
   var legacyHasSelector = isLegacyHasSelectorBrowser();
   var cls = useMemo(function () {
     return generateRandomStr(10);
   }, []);
+  var handleSearch = useCallback(function (searchValue) {
+    setSearchText(searchValue);
+    onSearch === null || onSearch === void 0 || onSearch(searchValue);
+  }, [onSearch]);
+
+  // Always pass handleSearch so IME composition events stay observed
+  // (an in-progress pinyin input must not wipe out the option list)
   var _useSelectComposition = useSelectComposition({
-      onSearch: onSearch
+      onSearch: handleSearch
     }),
     isComposing = _useSelectComposition.isComposing;
-  useSelectPopupPosition(autoCompleteRef, open, cls);
   var autoCompleteWidth = autoCompleteRef.current ? autoCompleteRef.current.offsetWidth : 0;
   var calculatedPopupWidth = popupMatchContentWidth ? calculatePopupWidth({
     options: options === null || options === void 0 ? void 0 : options.map(function (opt) {
@@ -103,27 +114,51 @@ var AutoCompleteSelect = function AutoCompleteSelect(props) {
     });
   }, [options]);
 
-  // Handle filterOption
-  var handleFilterOption = useMemo(function () {
-    // If a custom filterOption is provided, use it first
+  // Filter rule: prefer the custom filterOption, otherwise fall back to a
+  // case-insensitive substring match
+  var matchOption = useMemo(function () {
     if (customFilterOption) {
-      return function (inputValue, option) {
-        return customFilterOption(inputValue, option);
-      };
+      return customFilterOption;
     }
-
-    // Default filtering logic: case-insensitive substring match
     return function (inputValue, option) {
-      if (!isComposing && option) {
-        var _option$value, _ref, _option$label;
-        var searchText = inputValue.toUpperCase();
-        var optionValue = ((_option$value = option.value) !== null && _option$value !== void 0 ? _option$value : "").toString().toUpperCase();
-        var optionLabel = ((_ref = (_option$label = option.label) !== null && _option$label !== void 0 ? _option$label : option.value) !== null && _ref !== void 0 ? _ref : "").toString().toUpperCase();
-        return optionValue.includes(searchText) || optionLabel.includes(searchText);
+      var _option$value, _ref, _option$label;
+      if (!option) {
+        return true;
       }
-      return true;
+      var keyword = inputValue.toUpperCase();
+      var optionValue = ((_option$value = option.value) !== null && _option$value !== void 0 ? _option$value : "").toString().toUpperCase();
+      var optionLabel = ((_ref = (_option$label = option.label) !== null && _option$label !== void 0 ? _option$label : option.value) !== null && _ref !== void 0 ? _ref : "").toString().toUpperCase();
+      return optionValue.includes(keyword) || optionLabel.includes(keyword);
     };
-  }, [customFilterOption, isComposing]);
+  }, [customFilterOption]);
+
+  // Text the filter runs against: the controlled value wins, otherwise use the
+  // internally tracked search keyword
+  var filterText = useMemo(function () {
+    if (value !== undefined && value !== null) {
+      return String(value);
+    }
+    return searchText;
+  }, [value, searchText]);
+
+  // Filter inside the component (antd's own filterOption is turned off) so we
+  // know whether any candidate survives, keeping controlled open in sync
+  var filteredOptions = useMemo(function () {
+    // Skip filtering while composing so an in-progress pinyin input does not
+    // empty the candidate list
+    if (isComposing || !filterText) {
+      return autoCompleteOptions;
+    }
+    return autoCompleteOptions.filter(function (option) {
+      return matchOption(filterText, option);
+    });
+  }, [autoCompleteOptions, filterText, isComposing, matchOption]);
+
+  // In combobox mode antd hides the popup by itself when there is no candidate
+  // and skips onDropdownVisibleChange, so fold "no candidate" into open to stop
+  // the controlled state from drifting and leaving an empty popup behind
+  var mergedOpen = open && filteredOptions.length > 0;
+  useSelectPopupPosition(autoCompleteRef, mergedOpen, cls);
   useEffect(function () {
     if (!legacyHasSelector) {
       return;
@@ -163,7 +198,7 @@ var AutoCompleteSelect = function AutoCompleteSelect(props) {
     return function () {
       observer.disconnect();
     };
-  }, [legacyHasSelector, open]);
+  }, [legacyHasSelector, mergedOpen]);
   return /*#__PURE__*/_jsxs("div", {
     className: classNames(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, styles.autoCompleteSelect, true), className !== null && className !== void 0 ? className : "", true), styles.focused, focused), styles.disabled, disabled), styles.popupMatchContentWidth, popupMatchContentWidth), styles.legacyHasErrorStatus, legacyHasSelector && legacyHasErrorStatus)),
     ref: autoCompleteRef,
@@ -172,19 +207,23 @@ var AutoCompleteSelect = function AutoCompleteSelect(props) {
     }), /*#__PURE__*/_jsx(AutoComplete, _objectSpread({}, _objectSpread(_objectSpread({
       allowClear: true
     }, antdAutoCompleteConfig), {}, {
+      value: value,
       onFocus: function onFocus(e) {
         setFocused(true);
         _onFocus === null || _onFocus === void 0 || _onFocus(e);
       },
       onBlur: function onBlur(e) {
         setFocused(false);
+        // antd skips onDropdownVisibleChange when there is no candidate,
+        // so collapse the controlled state manually on blur
+        setOpen(false);
         _onBlur === null || _onBlur === void 0 || _onBlur(e);
       },
-      options: autoCompleteOptions,
-      filterOption: handleFilterOption,
+      options: filteredOptions,
+      filterOption: false,
       onChange: onChange,
-      onSearch: onSearch,
-      open: open,
+      onSearch: handleSearch,
+      open: mergedOpen,
       onDropdownVisibleChange: function onDropdownVisibleChange(visible) {
         setOpen(visible);
         _onDropdownVisibleChange === null || _onDropdownVisibleChange === void 0 || _onDropdownVisibleChange(visible);

package/lib/components/Select/AutoCompleteSelect/index.js

@@ -38,21 +38,29 @@ const AutoCompleteSelect = props => {
     popupMatchSelectWidth,
     popupMatchContentWidth,
     optionFontSize = 14,
+    value,
     ...antdAutoCompleteConfig
   } = props;
   const [focused, setFocused] = (0, _react.useState)(false);
   const autoCompleteRef = (0, _react.useRef)(null);
   const [open, setOpen] = (0, _react.useState)(false);
+  const [searchText, setSearchText] = (0, _react.useState)("");
   const [legacyHasErrorStatus, setLegacyHasErrorStatus] = (0, _react.useState)(false);
   const [legacyHasArrowOrClear, setLegacyHasArrowOrClear] = (0, _react.useState)(true);
   const legacyHasSelector = (0, _cssSupports.isLegacyHasSelectorBrowser)();
   const cls = (0, _react.useMemo)(() => (0, _hsuUtils.generateRandomStr)(10), []);
+  const handleSearch = (0, _react.useCallback)(searchValue => {
+    setSearchText(searchValue);
+    onSearch?.(searchValue);
+  }, [onSearch]);
+
+  // Always pass handleSearch so IME composition events stay observed
+  // (an in-progress pinyin input must not wipe out the option list)
   const {
     isComposing
   } = (0, _hooks.useSelectComposition)({
-    onSearch
+    onSearch: handleSearch
   });
-  (0, _hooks.useSelectPopupPosition)(autoCompleteRef, open, cls);
   const autoCompleteWidth = autoCompleteRef.current ? autoCompleteRef.current.offsetWidth : 0;
   const calculatedPopupWidth = popupMatchContentWidth ? (0, _utils.calculatePopupWidth)({
     options: options?.map(opt => ({
@@ -81,26 +89,48 @@ const AutoCompleteSelect = props => {
     });
   }, [options]);
 
-  // Handle filterOption
-  const handleFilterOption = (0, _react.useMemo)(() => {
-    // If a custom filterOption is provided, use it first
+  // Filter rule: prefer the custom filterOption, otherwise fall back to a
+  // case-insensitive substring match
+  const matchOption = (0, _react.useMemo)(() => {
     if (customFilterOption) {
-      return (inputValue, option) => {
-        return customFilterOption(inputValue, option);
-      };
+      return customFilterOption;
     }
-
-    // Default filtering logic: case-insensitive substring match
     return (inputValue, option) => {
-      if (!isComposing && option) {
-        const searchText = inputValue.toUpperCase();
-        const optionValue = (option.value ?? "").toString().toUpperCase();
-        const optionLabel = (option.label ?? option.value ?? "").toString().toUpperCase();
-        return optionValue.includes(searchText) || optionLabel.includes(searchText);
+      if (!option) {
+        return true;
       }
-      return true;
+      const keyword = inputValue.toUpperCase();
+      const optionValue = (option.value ?? "").toString().toUpperCase();
+      const optionLabel = (option.label ?? option.value ?? "").toString().toUpperCase();
+      return optionValue.includes(keyword) || optionLabel.includes(keyword);
     };
-  }, [customFilterOption, isComposing]);
+  }, [customFilterOption]);
+
+  // Text the filter runs against: the controlled value wins, otherwise use the
+  // internally tracked search keyword
+  const filterText = (0, _react.useMemo)(() => {
+    if (value !== undefined && value !== null) {
+      return String(value);
+    }
+    return searchText;
+  }, [value, searchText]);
+
+  // Filter inside the component (antd's own filterOption is turned off) so we
+  // know whether any candidate survives, keeping controlled open in sync
+  const filteredOptions = (0, _react.useMemo)(() => {
+    // Skip filtering while composing so an in-progress pinyin input does not
+    // empty the candidate list
+    if (isComposing || !filterText) {
+      return autoCompleteOptions;
+    }
+    return autoCompleteOptions.filter(option => matchOption(filterText, option));
+  }, [autoCompleteOptions, filterText, isComposing, matchOption]);
+
+  // In combobox mode antd hides the popup by itself when there is no candidate
+  // and skips onDropdownVisibleChange, so fold "no candidate" into open to stop
+  // the controlled state from drifting and leaving an empty popup behind
+  const mergedOpen = open && filteredOptions.length > 0;
+  (0, _hooks.useSelectPopupPosition)(autoCompleteRef, mergedOpen, cls);
   (0, _react.useEffect)(() => {
     if (!legacyHasSelector) {
       return;
@@ -140,7 +170,7 @@ const AutoCompleteSelect = props => {
     return () => {
       observer.disconnect();
     };
-  }, [legacyHasSelector, open]);
+  }, [legacyHasSelector, mergedOpen]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: (0, _classnames.default)({
       [_indexModule.default.autoCompleteSelect]: true,
@@ -156,19 +186,23 @@ const AutoCompleteSelect = props => {
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.AutoComplete, {
       allowClear: true,
       ...antdAutoCompleteConfig,
+      value,
       onFocus: e => {
         setFocused(true);
         onFocus?.(e);
       },
       onBlur: e => {
         setFocused(false);
+        // antd skips onDropdownVisibleChange when there is no candidate,
+        // so collapse the controlled state manually on blur
+        setOpen(false);
         onBlur?.(e);
       },
-      options: autoCompleteOptions,
-      filterOption: handleFilterOption,
+      options: filteredOptions,
+      filterOption: false,
       onChange,
-      onSearch,
-      open,
+      onSearch: handleSearch,
+      open: mergedOpen,
       onDropdownVisibleChange: visible => {
         setOpen(visible);
         onDropdownVisibleChange?.(visible);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hsu-react/ui",
-  "version": "0.0.14",
+  "version": "0.0.15",
   "description": "一套基于 React + Ant Design 的中后台业务组件库",
   "license": "MIT",
   "type": "module",

package/src/components/Select/AutoCompleteSelect/index.tsx

@@ -1,5 +1,12 @@
 import { AutoComplete, AutoCompleteProps } from "antd";
-import React, { ReactNode, useEffect, useMemo, useRef, useState } from "react";
+import React, {
+  ReactNode,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import classNames from "classnames";
 import styles from "./index.module.scss";
 import { generateRandomStr } from "hsu-utils";
@@ -52,11 +59,13 @@ const AutoCompleteSelect: React.FC<AutoCompleteSelectProps> = (props) => {
     popupMatchSelectWidth,
     popupMatchContentWidth,
     optionFontSize = 14,
+    value,
     ...antdAutoCompleteConfig
   } = props;
   const [focused, setFocused] = useState<boolean>(false);
   const autoCompleteRef = useRef<HTMLDivElement>(null);
   const [open, setOpen] = useState<boolean>(false);
+  const [searchText, setSearchText] = useState<string>("");
   const [legacyHasErrorStatus, setLegacyHasErrorStatus] =
     useState<boolean>(false);
   const [legacyHasArrowOrClear, setLegacyHasArrowOrClear] =
@@ -65,9 +74,17 @@ const AutoCompleteSelect: React.FC<AutoCompleteSelectProps> = (props) => {
 
   const cls = useMemo(() => generateRandomStr(10), []);
 
-  const { isComposing } = useSelectComposition({ onSearch });
+  const handleSearch = useCallback(
+    (searchValue: string) => {
+      setSearchText(searchValue);
+      onSearch?.(searchValue);
+    },
+    [onSearch],
+  );
 
-  useSelectPopupPosition(autoCompleteRef, open, cls);
+  // Always pass handleSearch so IME composition events stay observed
+  // (an in-progress pinyin input must not wipe out the option list)
+  const { isComposing } = useSelectComposition({ onSearch: handleSearch });
 
   const autoCompleteWidth = autoCompleteRef.current
     ? autoCompleteRef.current.offsetWidth
@@ -97,30 +114,54 @@ const AutoCompleteSelect: React.FC<AutoCompleteSelectProps> = (props) => {
     });
   }, [options]);
 
-  // Handle filterOption
-  const handleFilterOption = useMemo(() => {
-    // If a custom filterOption is provided, use it first
+  // Filter rule: prefer the custom filterOption, otherwise fall back to a
+  // case-insensitive substring match
+  const matchOption = useMemo(() => {
     if (customFilterOption) {
-      return (inputValue: string, option?: AutoCompleteOption) => {
-        return customFilterOption(inputValue, option);
-      };
+      return customFilterOption;
     }
 
-    // Default filtering logic: case-insensitive substring match
     return (inputValue: string, option?: AutoCompleteOption): boolean => {
-      if (!isComposing && option) {
-        const searchText = inputValue.toUpperCase();
-        const optionValue = (option.value ?? "").toString().toUpperCase();
-        const optionLabel = (option.label ?? option.value ?? "")
-          .toString()
-          .toUpperCase();
-        return (
-          optionValue.includes(searchText) || optionLabel.includes(searchText)
-        );
+      if (!option) {
+        return true;
       }
-      return true;
+      const keyword = inputValue.toUpperCase();
+      const optionValue = (option.value ?? "").toString().toUpperCase();
+      const optionLabel = (option.label ?? option.value ?? "")
+        .toString()
+        .toUpperCase();
+      return optionValue.includes(keyword) || optionLabel.includes(keyword);
     };
-  }, [customFilterOption, isComposing]);
+  }, [customFilterOption]);
+
+  // Text the filter runs against: the controlled value wins, otherwise use the
+  // internally tracked search keyword
+  const filterText = useMemo(() => {
+    if (value !== undefined && value !== null) {
+      return String(value);
+    }
+    return searchText;
+  }, [value, searchText]);
+
+  // Filter inside the component (antd's own filterOption is turned off) so we
+  // know whether any candidate survives, keeping controlled open in sync
+  const filteredOptions = useMemo(() => {
+    // Skip filtering while composing so an in-progress pinyin input does not
+    // empty the candidate list
+    if (isComposing || !filterText) {
+      return autoCompleteOptions;
+    }
+    return autoCompleteOptions.filter((option) =>
+      matchOption(filterText, option),
+    );
+  }, [autoCompleteOptions, filterText, isComposing, matchOption]);
+
+  // In combobox mode antd hides the popup by itself when there is no candidate
+  // and skips onDropdownVisibleChange, so fold "no candidate" into open to stop
+  // the controlled state from drifting and leaving an empty popup behind
+  const mergedOpen = open && filteredOptions.length > 0;
+
+  useSelectPopupPosition(autoCompleteRef, mergedOpen, cls);
 
   useEffect(() => {
     if (!legacyHasSelector) {
@@ -177,7 +218,7 @@ const AutoCompleteSelect: React.FC<AutoCompleteSelectProps> = (props) => {
     return () => {
       observer.disconnect();
     };
-  }, [legacyHasSelector, open]);
+  }, [legacyHasSelector, mergedOpen]);
 
   return (
     <div
@@ -197,19 +238,23 @@ const AutoCompleteSelect: React.FC<AutoCompleteSelectProps> = (props) => {
         {...{
           allowClear: true,
           ...antdAutoCompleteConfig,
+          value,
           onFocus: (e) => {
             setFocused(true);
             onFocus?.(e);
           },
           onBlur: (e) => {
             setFocused(false);
+            // antd skips onDropdownVisibleChange when there is no candidate,
+            // so collapse the controlled state manually on blur
+            setOpen(false);
             onBlur?.(e);
           },
-          options: autoCompleteOptions,
-          filterOption: handleFilterOption,
+          options: filteredOptions,
+          filterOption: false,
           onChange,
-          onSearch,
-          open,
+          onSearch: handleSearch,
+          open: mergedOpen,
           onDropdownVisibleChange: (visible) => {
             setOpen(visible);
             onDropdownVisibleChange?.(visible);