@zykj2024/much-library 1.0.11 → 1.0.12-beta.10

package/dist/McEllipsisMiddle/index.css

@@ -0,0 +1,4 @@
+.mc-ellipsis-middle,
+.mc-ellipsis-middle * {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+}

package/dist/McEllipsisMiddle/index.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { TextProps } from 'antd/es/typography/Text';
+import './index.less';
+export interface McEllipsisMiddleProps extends TextProps {
+    text: string;
+    /** 省略号结尾显示的字个数 */
+    suffixCount: number;
+    style?: React.CSSProperties;
+    className?: string;
+}
+export declare const McEllipsisMiddle: ({ text, suffixCount, style, className, ...rest }: McEllipsisMiddleProps) => import("react/jsx-runtime").JSX.Element;

package/dist/McEllipsisMiddle/index.js

@@ -0,0 +1,32 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["text", "suffixCount", "style", "className"];
+import { Typography } from 'antd';
+import "./index.css";
+
+/** 中间省略 */
+import { jsx as _jsx } from "react/jsx-runtime";
+var Text = Typography.Text;
+export var McEllipsisMiddle = function McEllipsisMiddle(_ref) {
+  var text = _ref.text,
+    suffixCount = _ref.suffixCount,
+    style = _ref.style,
+    className = _ref.className,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var labelStr = String(text || '').trim();
+  var isBeyond = labelStr.length > suffixCount;
+  var start = isBeyond ? labelStr.slice(0, labelStr.length - suffixCount) : labelStr;
+  var suffix = isBeyond ? labelStr.slice(-suffixCount).trim() : '';
+  return /*#__PURE__*/_jsx(Text, _objectSpread(_objectSpread({
+    className: ['mc-ellipsis-middle', className].filter(Boolean).join(''),
+    style: _objectSpread({
+      width: '100%'
+    }, style),
+    ellipsis: {
+      tooltip: labelStr,
+      suffix: suffix
+    }
+  }, rest), {}, {
+    children: start
+  }));
+};

package/dist/McGroupPanel/comps/SelectedItem/index.js

@@ -1,6 +1,7 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import { useSortable } from '@dnd-kit/sortable';
 import { Button, Typography } from 'antd';
+import { MenuOutlined } from 'much-icons';
 import { McIconFont } from "../../..";
 import { memo, useMemo } from 'react';
 import "../../index.css";
@@ -53,9 +54,7 @@ var SelectedItem = function SelectedItem(_ref) {
     children: [sortable && /*#__PURE__*/_jsx(Button, _objectSpread(_objectSpread({}, listeners), {}, {
       className: "mc-group-panel__selected-item__drag",
       type: "text",
-      icon: /*#__PURE__*/_jsx(McIconFont, {
-        type: "icon-MenuOutlined"
-      })
+      icon: /*#__PURE__*/_jsx(MenuOutlined, {})
     })), /*#__PURE__*/_jsx(Typography.Paragraph, {
       style: {
         margin: '0 auto 0 4px'

package/dist/McGroupPanel/index.css

@@ -29,6 +29,7 @@
 }
 .mc-group-panel__card-body {
   height: calc(100% - 40px);
+  overflow: auto;
   padding: 8px;
 }
 .mc-group-panel__options {
@@ -49,6 +50,7 @@
   -webkit-box-flex: 1;
   -ms-flex: 1 1 44%;
   flex: 1 1 44%;
+  overflow: auto;
 }
 .mc-group-panel__options-items {
   -webkit-box-flex: 1;
@@ -65,23 +67,23 @@
   padding: 0 8px;
 }
 .mc-group-panel__checkbox-wrapper {
-  width: calc(100% - 24px);
+  width: 100%;
   height: 40px;
   line-height: 40px;
   padding: 0 12px;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
 }
-.mc-group-panel__checkbox-wrapper .ant-checkbox-wrapper {
-  max-width: 100%;
-}
-.mc-group-panel__checkbox-wrapper .ant-checkbox-wrapper .ant-checkbox + span {
-  overflow: hidden;
-}
-.mc-group-panel__checkbox-wrapper:not(:first-child):hover {
+.mc-group-panel__checkbox-wrapper:not(.mc-group-panel__check-all):hover {
   background: #f6f6f6;
   cursor: pointer;
 }
 .mc-group-panel__checkbox {
-  width: calc(100% - 24px);
+  width: 100%;
   height: 40px;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -101,7 +103,7 @@
   width: 240px;
 }
 .mc-group-panel__selected-item {
-  width: calc(100% - 16px);
+  width: 100%;
   height: 40px;
   display: -webkit-box;
   display: -ms-flexbox;

package/dist/McGroupPanel/index.js

@@ -4,8 +4,8 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import { DndContext } from '@dnd-kit/core';
 import { SortableContext, arrayMove, verticalListSortingStrategy } from '@dnd-kit/sortable';
 import { Button, Checkbox, Empty, Input, Typography } from 'antd';
+import debounce from 'lodash/debounce';
 import { SearchOutlined } from 'much-icons';
-import { Utils } from "./..";
 import { useEffect, useMemo, useState } from 'react';
 import SelectedItem from "./comps/SelectedItem";
 import "./index.css";
@@ -122,26 +122,26 @@ var McGroupPanel = function McGroupPanel(props) {
       setGroupMap(_groupMap);
       setActiveGroup(_options === null || _options === void 0 || (_options$2 = _options[0]) === null || _options$2 === void 0 ? void 0 : _options$2.value);
     };
-    return Utils.debounce(fn, 350);
+    return debounce(fn, 350);
   }, [options]);
-  var echo = function echo(value) {
-    var _inexistentItemMap = {};
-    value === null || value === void 0 || value.forEach(function (item) {
-      var v = labelInValue ? item.value : item,
-        l = labelInValue ? item.label || item.value : item;
-      if (!itemMap[v]) _inexistentItemMap[v] = {
-        value: v,
-        label: l
-      };
-    });
-    setSelected(value ? labelInValue ? value.map(function (item) {
-      return item.value;
-    }) : value : []);
-    setInexistentItemMap(_inexistentItemMap);
-  };
 
   /* 回显 */
   useEffect(function () {
+    var echo = function echo(value) {
+      var _inexistentItemMap = {};
+      value === null || value === void 0 || value.forEach(function (item) {
+        var v = labelInValue ? item.value : item,
+          l = labelInValue ? item.label || item.value : item;
+        if (!itemMap[v]) _inexistentItemMap[v] = {
+          value: v,
+          label: l
+        };
+      });
+      setSelected(value ? labelInValue ? value.map(function (item) {
+        return item.value;
+      }) : value : []);
+      setInexistentItemMap(_inexistentItemMap);
+    };
     echo(value);
   }, [value]);
 
@@ -189,9 +189,7 @@ var McGroupPanel = function McGroupPanel(props) {
           onChange: function onChange(e) {
             var v = e.target.value.trim();
             setSearchValue(v);
-            if (v !== searchValue) {
-              debounceSearch(v);
-            }
+            v !== searchValue && debounceSearch(v);
           }
         })
       }), _options.length > 0 ? /*#__PURE__*/_jsxs("div", {
@@ -199,7 +197,7 @@ var McGroupPanel = function McGroupPanel(props) {
         children: [/*#__PURE__*/_jsxs("div", {
           className: "mc-group-panel__options-groups",
           children: [/*#__PURE__*/_jsx("div", {
-            className: "mc-group-panel__checkbox-wrapper",
+            className: "mc-group-panel__checkbox-wrapper mc-group-panel__check-all",
             children: /*#__PURE__*/_jsx(Checkbox, {
               checked: allValues.length > 0 && allValues.every(function (v) {
                 return selected.includes(v);
@@ -221,7 +219,7 @@ var McGroupPanel = function McGroupPanel(props) {
             className: "mc-group-panel__options-list",
             children: _options.map(function (item) {
               var _groupMap$item$value, _groupMap$item$value2;
-              return /*#__PURE__*/_jsx("div", {
+              return /*#__PURE__*/_jsxs("div", {
                 className: "mc-group-panel__checkbox-wrapper",
                 style: {
                   background: activeGroup === item.value ? '#EAEEFE' : ''
@@ -229,7 +227,7 @@ var McGroupPanel = function McGroupPanel(props) {
                 onClick: function onClick() {
                   return setActiveGroup(item.value);
                 },
-                children: /*#__PURE__*/_jsx(Checkbox, {
+                children: [/*#__PURE__*/_jsx(Checkbox, {
                   checked: ((_groupMap$item$value = groupMap[item.value]) === null || _groupMap$item$value === void 0 ? void 0 : _groupMap$item$value.length) > 0 && groupMap[item.value].every(function (_ref2) {
                     var value = _ref2.value;
                     return selected.includes(value);
@@ -255,16 +253,18 @@ var McGroupPanel = function McGroupPanel(props) {
                     }));
                   },
                   disabled: disabled,
-                  children: /*#__PURE__*/_jsx(Typography.Paragraph, {
-                    style: {
-                      margin: 0
-                    },
-                    ellipsis: {
-                      tooltip: item.label
-                    },
-                    children: item.label
-                  })
-                })
+                  onClick: function onClick(e) {
+                    return e.stopPropagation();
+                  }
+                }), /*#__PURE__*/_jsx(Typography.Paragraph, {
+                  style: {
+                    margin: '0 0 0 8px'
+                  },
+                  ellipsis: {
+                    tooltip: item.label
+                  },
+                  children: item.label
+                })]
               }, item.value);
             })
           })]
@@ -272,7 +272,7 @@ var McGroupPanel = function McGroupPanel(props) {
           className: "mc-group-panel__options-items",
           children: ((_groupMap$activeGroup = groupMap[activeGroup]) === null || _groupMap$activeGroup === void 0 ? void 0 : _groupMap$activeGroup.length) > 0 ? /*#__PURE__*/_jsxs(_Fragment, {
             children: [/*#__PURE__*/_jsx("div", {
-              className: "mc-group-panel__checkbox-wrapper",
+              className: "mc-group-panel__checkbox-wrapper mc-group-panel__check-all",
               children: /*#__PURE__*/_jsx(Checkbox, {
                 checked: ((_groupMap$activeGroup2 = groupMap[activeGroup]) === null || _groupMap$activeGroup2 === void 0 ? void 0 : _groupMap$activeGroup2.length) > 0 && groupMap[activeGroup].every(function (_ref7) {
                   var value = _ref7.value;

package/dist/McInput/index.css

@@ -1,3 +1,5 @@
+/** 给input和input number用的， 增加竖线 **/
+/** 最后一个formitem没有底部空白 */
 .mc-input .ant-input-suffix .ant-input-show-count-suffix,
 .mc-search .ant-input-suffix .ant-input-show-count-suffix {
   color: #b3b3b3;
@@ -42,3 +44,28 @@
   color: #b3b3b3;
   font-size: 12px;
 }
+.mc-input .ant-input-wrapper .ant-input-group-addon:nth-child(1)::after,
+.mc-input .ant-input-wrapper .ant-input-group-addon:nth-last-child(1)::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  /* 居中对齐 */
+  -webkit-transform: translateY(-50%);
+  -ms-transform: translateY(-50%);
+  transform: translateY(-50%);
+  /* 垂直居中 */
+  height: 50%;
+  /* 竖线高度为输入框高度的 50% */
+  width: 1px;
+  /* 竖线宽度 */
+  background-color: #d8d8d8;
+  /* 竖线颜色 */
+}
+.mc-input .ant-input-wrapper .ant-input-group-addon:nth-child(1)::after {
+  right: 0;
+  /* 定位到右侧 */
+}
+.mc-input .ant-input-wrapper .ant-input-group-addon:nth-last-child(1)::before {
+  left: 0;
+  /* 定位到右侧 */
+}

package/dist/McInputNumber/demo/index.js

@@ -14,6 +14,12 @@ export default (function () {
       style: {
         width: 200
       }
+    }), /*#__PURE__*/_jsx(McInputNumber, {
+      addonBefore: "\u65E7\u7D20\u6750",
+      addonAfter: "%",
+      style: {
+        width: 200
+      }
     }), /*#__PURE__*/_jsxs(Space, {
       children: [/*#__PURE__*/_jsx("span", {
         children: "\u7981\u7528"

package/dist/McInputNumber/index.css

@@ -1,3 +1,5 @@
+/** 给input和input number用的， 增加竖线 **/
+/** 最后一个formitem没有底部空白 */
 .mc-input-number__label {
   color: #262626;
   font-size: 14px;
@@ -7,3 +9,28 @@
   content: '：';
   margin-left: 2px;
 }
+.mc-input-number .ant-input-number-wrapper .ant-input-number-group-addon:nth-child(1)::after,
+.mc-input-number .ant-input-number-wrapper .ant-input-number-group-addon:nth-last-child(1)::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  /* 居中对齐 */
+  -webkit-transform: translateY(-50%);
+  -ms-transform: translateY(-50%);
+  transform: translateY(-50%);
+  /* 垂直居中 */
+  height: 50%;
+  /* 竖线高度为输入框高度的 50% */
+  width: 1px;
+  /* 竖线宽度 */
+  background-color: #d8d8d8;
+  /* 竖线颜色 */
+}
+.mc-input-number .ant-input-number-wrapper .ant-input-number-group-addon:nth-child(1)::after {
+  right: 0;
+  /* 定位到右侧 */
+}
+.mc-input-number .ant-input-number-wrapper .ant-input-number-group-addon:nth-last-child(1)::before {
+  left: 0;
+  /* 定位到右侧 */
+}

package/dist/McSelect/components/PanelSearchInput/index.css

@@ -0,0 +1,6 @@
+.mc-search-input__container {
+  margin: 8px;
+}
+.mc-search-input {
+  width: '100%';
+}

package/dist/McSelect/components/PanelSearchInput/index.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import './index.less';
+interface PanelSearchInputProps {
+    placeholder: string | undefined;
+    searchValue: string | undefined;
+    onSearch: (e: string | undefined) => void;
+}
+export interface PanelSearchInputRef {
+    focus: () => void;
+}
+declare const _default: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<PanelSearchInputProps & import("react").RefAttributes<PanelSearchInputRef>>>;
+export default _default;

package/dist/McSelect/components/PanelSearchInput/index.js

@@ -0,0 +1,45 @@
+import { SearchOutlined } from 'much-icons';
+import { forwardRef, memo, useEffect, useImperativeHandle, useRef } from 'react';
+import McInput from "../../../McInput";
+import "./index.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+var PanelSearchInput = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var placeholder = _ref.placeholder,
+    onSearch = _ref.onSearch,
+    searchValue = _ref.searchValue;
+  var inputRef = useRef(null);
+  var focus = function focus() {
+    if (inputRef.current) {
+      setTimeout(function () {
+        var _inputRef$current;
+        (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.focus({
+          cursor: 'all'
+        });
+      }, 200);
+    }
+  };
+  useEffect(focus, []);
+  useImperativeHandle(ref, function () {
+    return {
+      focus: focus
+    };
+  });
+  return /*#__PURE__*/_jsx("div", {
+    className: "mc-search-input__container",
+    children: /*#__PURE__*/_jsx(McInput, {
+      ref: inputRef,
+      className: "mc-search-input",
+      placeholder: placeholder || '请输入搜索内容',
+      value: searchValue,
+      onKeyDown: function onKeyDown(e) {
+        // 避免触发原select的keydown，比如删除选项等不符预期的操作
+        if (['Backspace', 'Delete', 'Enter'].includes(e.key)) {
+          e.stopPropagation();
+        }
+      },
+      onChange: onSearch,
+      suffix: /*#__PURE__*/_jsx(SearchOutlined, {})
+    })
+  });
+});
+export default /*#__PURE__*/memo(PanelSearchInput);

package/dist/McSelect/demo/fetchOptions.js

@@ -130,6 +130,7 @@ export default (function () {
           return _ref3.apply(this, arguments);
         };
       }()),
+      searchInPanel: true,
       multiple: true,
       onChange: setMultipleValue
     }), /*#__PURE__*/_jsx(McSelect, {

package/dist/McSelect/demo/panelInSearch.d.ts

@@ -0,0 +1,2 @@
+declare const _default: () => import("react/jsx-runtime").JSX.Element;
+export default _default;

package/dist/McSelect/demo/panelInSearch.js

@@ -0,0 +1,47 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+/**
+ * title: 搜索框下移+已选中的优先展示
+ * description: 默认都为false，仅支持多选
+ */
+import { Space } from 'antd';
+import { McSelect } from "../..";
+import { useState } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+var options = [{
+  value: 'jack',
+  label: 'Jack'
+}, {
+  value: 'lucy',
+  label: 'Lucy'
+}, {
+  value: 'Yiminghe',
+  label: 'yiminghe'
+}, {
+  value: 'disabled',
+  label: 'Disabled',
+  disabled: true
+}];
+export default (function () {
+  var _useState = useState(options),
+    _useState2 = _slicedToArray(_useState, 2),
+    finalOptions = _useState2[0],
+    setFinalOptions = _useState2[1];
+  return /*#__PURE__*/_jsx(Space, {
+    wrap: true,
+    children: /*#__PURE__*/_jsx(McSelect, {
+      style: {
+        width: 240
+      },
+      searchInPanel: true,
+      pinSelectedOptions: true,
+      searchInPanelPlaceholder: "\u81EA\u5B9A\u4E49\u641C\u7D22\u6846\u63D0\u793A\u6587\u5B57",
+      options: finalOptions,
+      onSearch: function onSearch(v) {
+        return setFinalOptions(options.filter(function (item) {
+          return item.value.includes(v);
+        }));
+      },
+      multiple: true
+    })
+  });
+});

package/dist/McSelect/index.d.ts

@@ -25,6 +25,7 @@ export type FetchOptions = (params: {
 export type McSelectProps = Omit<SelectProps, 'mode' | 'fieldNames'> & {
     style?: CSSProperties;
     className?: string;
+    /** 外部控制展示的options */
     toFilterOptions?: (options: Option[]) => Option[];
     name?: string;
     label?: ReactNode;
@@ -35,6 +36,12 @@ export type McSelectProps = Omit<SelectProps, 'mode' | 'fieldNames'> & {
     pageSize?: number;
     extra?: any;
     options?: Option[];
+    /** 仅多选生效。默认为false，在下拉框中展示搜索框，会影响回车生成新标签等功能 */
+    searchInPanel?: boolean;
+    /** 搜索框提示文字 */
+    searchInPanelPlaceholder?: string;
+    /** 仅多选+("非远程"或"远程+labelvalue"")生效。默认为false，将选中项置顶。 */
+    pinSelectedOptions?: boolean;
 };
 declare const McSelect: FC<McSelectProps>;
 export default McSelect;

package/dist/McSelect/index.js

@@ -3,13 +3,45 @@ import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["style", "className", "label", "multiple", "changeOnHidden", "inexistent", "fetchOptions", "pageSize", "extra", "value", "onChange", "labelInValue", "options", "disabled", "maxTagCount", "onSearch", "onPopupScroll", "onBlur", "onDropdownVisibleChange", "toFilterOptions"];
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _typeof from "@babel/runtime/helpers/esm/typeof";
+var _excluded = ["style", "className", "label", "multiple", "changeOnHidden", "inexistent", "fetchOptions", "pageSize", "extra", "value", "onChange", "labelInValue", "options", "disabled", "maxTagCount", "onSearch", "onPopupScroll", "onBlur", "onDropdownVisibleChange", "toFilterOptions", "searchInPanel", "pinSelectedOptions", "searchInPanelPlaceholder"];
 import { Empty, Popover, Select, Spin } from 'antd';
 import { debounce } from "../Utils";
 import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import PanelSearchInput from "./components/PanelSearchInput";
 import "./index.css";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+// 将已选的option置顶
+var createPinedSelectedOptions = function createPinedSelectedOptions(options, selectedValues) {
+  if (!options || options.length === 0) return [];
+  if (!selectedValues || selectedValues.length === 0) return options;
+  var isLabelInValue = _typeof(selectedValues[0]) === 'object';
+  if (isLabelInValue) {
+    var unselectedOptions = options.filter(function (o) {
+      return !selectedValues.some(function (v) {
+        return v.value === o.value;
+      });
+    });
+    return [].concat(_toConsumableArray(selectedValues), _toConsumableArray(unselectedOptions));
+  } else {
+    var _options$filter;
+    // options中找不到的就不展示
+    var selectedOptions = selectedValues.map(function (v) {
+      return options.find(function (o) {
+        return o.value === v;
+      });
+    }).filter(function (o) {
+      return Boolean(o);
+    });
+    var _unselectedOptions = (_options$filter = options.filter(function (x) {
+      return !selectedValues.includes(x.value);
+    })) !== null && _options$filter !== void 0 ? _options$filter : [];
+    return [].concat(_toConsumableArray(selectedOptions), _toConsumableArray(_unselectedOptions));
+  }
+};
 var McSelect = /*#__PURE__*/forwardRef(function (props, ref) {
   var style = props.style,
     className = props.className,
@@ -33,6 +65,11 @@ var McSelect = /*#__PURE__*/forwardRef(function (props, ref) {
     onBlur = props.onBlur,
     onDropdownVisibleChange = props.onDropdownVisibleChange,
     toFilterOptions = props.toFilterOptions,
+    _props$searchInPanel = props.searchInPanel,
+    searchInPanel = _props$searchInPanel === void 0 ? false : _props$searchInPanel,
+    _props$pinSelectedOpt = props.pinSelectedOptions,
+    pinSelectedOptions = _props$pinSelectedOpt === void 0 ? false : _props$pinSelectedOpt,
+    searchInPanelPlaceholder = props.searchInPanelPlaceholder,
     rest = _objectWithoutProperties(props, _excluded);
   var _ref = typeof inexistent === 'boolean' ? {} : inexistent,
     _ref$inexistentText = _ref.inexistentText,
@@ -88,7 +125,19 @@ var McSelect = /*#__PURE__*/forwardRef(function (props, ref) {
   var _oldValue = useRef();
   var _changeOption = useRef();
   var _inexistent = useRef(false);
-  var filteredOptions = toFilterOptions ? toFilterOptions(selectOptions) : selectOptions; // 只要有render就需要重新生成options
+  var panelSearchInputRef = useRef(null);
+  var useDefaultSearch = !(multiple && searchInPanel);
+  var optionWithPriority = useMemo(function () {
+    if (pinSelectedOptions && multiple) {
+      if (fetchOptions && !labelInValue) {
+        console.warn('远程搜索下，pinSelectedOptions只支持labelInValue模式,建议修改');
+      } else {
+        return createPinedSelectedOptions(selectOptions, selectValue);
+      }
+    }
+    return selectOptions;
+  }, [selectOptions, selectValue]);
+  var filteredOptions = toFilterOptions ? toFilterOptions(optionWithPriority) : optionWithPriority; // 只要有render就需要重新生成options
 
   // 监听值和备选项的变化（赋值备选项，执行不存在值的判断逻辑）
   useEffect(function () {
@@ -216,7 +265,7 @@ var McSelect = /*#__PURE__*/forwardRef(function (props, ref) {
 
   // 文本框值变化时回调
   var search = function search(v) {
-    var _v = v.trim();
+    var _v = (v === null || v === void 0 ? void 0 : v.trim()) || '';
     setSearchValue(_v);
     if (fetchOptions) {
       debounceSearcher(_v, 1);
@@ -256,13 +305,16 @@ var McSelect = /*#__PURE__*/forwardRef(function (props, ref) {
     }
     onPopupScroll === null || onPopupScroll === void 0 || onPopupScroll(e);
   };
+  var clearSearchData = function clearSearchData() {
+    setSearchValue('');
+    loadOptions('', 1);
+  };
 
   // 失去焦点时的回调（若为异步分页查询，需重置查询）
   var blur = function blur(e) {
     // 若当前文本框有值，则清空文本框并重置查询
-    if (searchValue) {
-      setSearchValue('');
-      loadOptions('', 1);
+    if (useDefaultSearch && searchValue) {
+      clearSearchData();
     }
     onBlur === null || onBlur === void 0 || onBlur(e);
   };
@@ -279,8 +331,38 @@ var McSelect = /*#__PURE__*/forwardRef(function (props, ref) {
         }
       }
     }
+    // 新版搜索交互逻辑
+    if (!useDefaultSearch) {
+      if (open) {
+        var _panelSearchInputRef$;
+        (_panelSearchInputRef$ = panelSearchInputRef.current) === null || _panelSearchInputRef$ === void 0 || _panelSearchInputRef$.focus();
+      } else if (searchValue) {
+        // 避免界面抖动
+        setTimeout(clearSearchData, 200);
+      }
+    }
     onDropdownVisibleChange === null || onDropdownVisibleChange === void 0 || onDropdownVisibleChange(open);
   };
+  var renderDropdownPanel = function renderDropdownPanel(menu) {
+    if (!multiple || !searchInPanel) {
+      return menu;
+    }
+    return /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(PanelSearchInput, {
+        ref: panelSearchInputRef,
+        placeholder: searchInPanelPlaceholder,
+        searchValue: searchValue,
+        onSearch: search
+      }), menu, filteredOptions.length > 0 && fetching && /*#__PURE__*/_jsx("div", {
+        style: {
+          color: '#999',
+          fontSize: 12,
+          textAlign: 'center'
+        },
+        children: "\u52A0\u8F7D\u4E2D..."
+      })]
+    });
+  };
   return /*#__PURE__*/_jsxs("div", {
     style: _objectSpread({
       position: label ? 'relative' : 'static',
@@ -302,7 +384,8 @@ var McSelect = /*#__PURE__*/forwardRef(function (props, ref) {
       options: filteredOptions,
       disabled: disabled,
       placeholder: "\u8BF7\u9009\u62E9",
-      showSearch: true,
+      showSearch: useDefaultSearch // 否则会和panel中的search冲突
+      ,
       optionFilterProp: "label",
       allowClear: true,
       maxTagCount: _maxTagCount,
@@ -332,8 +415,8 @@ var McSelect = /*#__PURE__*/forwardRef(function (props, ref) {
         });
       },
       filterOption: fetchOptions ? false : true,
-      searchValue: searchValue,
-      onSearch: search,
+      searchValue: useDefaultSearch ? searchValue : undefined,
+      onSearch: useDefaultSearch ? search : undefined,
       loading: fetching,
       notFoundContent: fetching ? /*#__PURE__*/_jsx(Spin, {
         size: "small"
@@ -342,7 +425,8 @@ var McSelect = /*#__PURE__*/forwardRef(function (props, ref) {
       }),
       onPopupScroll: popupScroll,
       onBlur: blur,
-      onDropdownVisibleChange: dropdownVisibleChange
+      onDropdownVisibleChange: dropdownVisibleChange,
+      dropdownRender: renderDropdownPanel
     }, rest), {}, {
       mode: multiple ? 'multiple' : undefined,
       fieldNames: undefined

package/dist/McThemeConfig/demo/card.d.ts

@@ -0,0 +1,2 @@
+declare const _default: () => import("react/jsx-runtime").JSX.Element;
+export default _default;