pocko-ui 1.0.20 → 1.0.22

package/DropdownMenu/index.css

@@ -55,3 +55,15 @@
 .dd-dropdown-menu.topRight {
   margin-bottom: 4px;
 }
+
+.dd-dropdown-wrapper.dd-disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+.dd-dropdown-wrapper.dd-disabled:hover {
+  background: inherit;
+}
+
+.dd-menu-item.disabled {
+  pointer-events: none;
+}

package/DropdownMenu/index.js

@@ -46,7 +46,7 @@ eval("\n\nmodule.exports = function (item) {\n  var content = item[1];\n  var cs
   \***********************/
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"react\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react-dom */ \"react-dom\");\n/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_dom__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _Option__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./Option */ \"./src/Option.tsx\");\n/* harmony import */ var _Index_scss__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./Index.scss */ \"./src/Index.scss\");\nfunction _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); }\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction 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; }\nfunction _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; }\nfunction _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }\nfunction _toPropertyKey(t) { var i = _toPrimitive(t, \"string\"); return \"symbol\" == _typeof(i) ? i : i + \"\"; }\nfunction _toPrimitive(t, r) { if (\"object\" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || \"default\"); if (\"object\" != _typeof(i)) return i; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (\"string\" === r ? String : Number)(t); }\nfunction _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }\nfunction _nonIterableRest() { throw new TypeError(\"Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\"); }\nfunction _unsupportedIterableToArray(r, a) { if (r) { if (\"string\" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return \"Object\" === t && r.constructor && (t = r.constructor.name), \"Map\" === t || \"Set\" === t ? Array.from(r) : \"Arguments\" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }\nfunction _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }\nfunction _iterableToArrayLimit(r, l) { var t = null == r ? null : \"undefined\" != typeof Symbol && r[Symbol.iterator] || r[\"@@iterator\"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t[\"return\"] && (u = t[\"return\"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }\nfunction _arrayWithHoles(r) { if (Array.isArray(r)) return r; }\n\n\n\n\nvar DropdownMenu = function DropdownMenu(_ref) {\n  var triggerButton = _ref.triggerButton,\n    menuItems = _ref.menuItems,\n    onChange = _ref.onChange,\n    _ref$disabled = _ref.disabled,\n    disabled = _ref$disabled === void 0 ? false : _ref$disabled,\n    _ref$placement = _ref.placement,\n    placement = _ref$placement === void 0 ? \"bottomLeft\" : _ref$placement,\n    _ref$trigger = _ref.trigger,\n    trigger = _ref$trigger === void 0 ? \"hover\" : _ref$trigger,\n    _ref$wrapperClassName = _ref.wrapperClassName,\n    wrapperClassName = _ref$wrapperClassName === void 0 ? \"\" : _ref$wrapperClassName,\n    _ref$closeOnOutsideCl = _ref.closeOnOutsideClick,\n    closeOnOutsideClick = _ref$closeOnOutsideCl === void 0 ? true : _ref$closeOnOutsideCl;\n  var _useState = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false),\n    _useState2 = _slicedToArray(_useState, 2),\n    isOpen = _useState2[0],\n    setIsOpen = _useState2[1];\n  var _useState3 = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(null),\n    _useState4 = _slicedToArray(_useState3, 2),\n    position = _useState4[0],\n    setPosition = _useState4[1];\n  var triggerRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n  var menuRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n  var calculatePosition = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(function () {\n    var _menuRef$current, _menuRef$current2, _menuRef$current3, _menuRef$current4;\n    if (!triggerRef.current) return;\n    var triggerRect = triggerRef.current.getBoundingClientRect();\n    var scrollY = window.scrollY;\n    var scrollX = window.scrollX;\n    switch (placement) {\n      case \"bottomLeft\":\n        return {\n          top: triggerRect.bottom + scrollY,\n          left: triggerRect.left + scrollX\n        };\n      case \"bottomRight\":\n        return {\n          top: triggerRect.bottom + scrollY,\n          left: triggerRect.right + scrollX - (((_menuRef$current = menuRef.current) === null || _menuRef$current === void 0 ? void 0 : _menuRef$current.offsetWidth) || 0)\n        };\n      case \"topLeft\":\n        return {\n          top: triggerRect.top + scrollY - (((_menuRef$current2 = menuRef.current) === null || _menuRef$current2 === void 0 ? void 0 : _menuRef$current2.offsetHeight) || 0),\n          left: triggerRect.left + scrollX\n        };\n      case \"topRight\":\n        return {\n          top: triggerRect.top + scrollY - (((_menuRef$current3 = menuRef.current) === null || _menuRef$current3 === void 0 ? void 0 : _menuRef$current3.offsetHeight) || 0),\n          left: triggerRect.right + scrollX - (((_menuRef$current4 = menuRef.current) === null || _menuRef$current4 === void 0 ? void 0 : _menuRef$current4.offsetWidth) || 0)\n        };\n      default:\n        return {\n          top: triggerRect.bottom + scrollY,\n          left: triggerRect.left + scrollX\n        };\n    }\n  }, [placement]);\n  var handleTrigger = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(function (open) {\n    if (disabled) return;\n    if (open) {\n      var pos = calculatePosition();\n      setPosition(pos);\n    }\n    setTimeout(function () {\n      setIsOpen(open);\n    }, 50);\n  }, [calculatePosition, disabled]);\n  var handleClickOutside = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(function (event) {\n    if (menuRef.current !== event.target && !menuRef.current.contains(event.target) && triggerRef.current !== event.target && !triggerRef.current.contains(event.target)) {\n      handleTrigger(false);\n    }\n  }, [handleTrigger]);\n  (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {\n    if (isOpen && closeOnOutsideClick) {\n      document.addEventListener(\"mousedown\", handleClickOutside);\n    }\n    return function () {\n      document.removeEventListener(\"mousedown\", handleClickOutside);\n    };\n  }, [isOpen, closeOnOutsideClick, handleClickOutside]);\n  var handleMenuItemClick = function handleMenuItemClick(menuItem) {\n    if (menuItem.disabled) return;\n    onChange === null || onChange === void 0 || onChange(menuItem);\n    handleTrigger(false);\n  };\n  var triggerProps = _objectSpread({}, trigger === \"hover\" ? {\n    onMouseEnter: function onMouseEnter() {\n      return setTimeout(function () {\n        handleTrigger(true);\n      }, 150);\n    },\n    onMouseLeave: function onMouseLeave() {\n      return setTimeout(function () {\n        handleTrigger(false);\n      }, 150);\n    }\n  } : {\n    onClick: function onClick() {\n      return handleTrigger(!isOpen);\n    }\n  });\n  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", _extends({\n    className: \"dd-dropdown-wrapper \".concat(wrapperClassName),\n    ref: triggerRef\n  }, triggerProps), triggerButton, isOpen && /*#__PURE__*/(0,react_dom__WEBPACK_IMPORTED_MODULE_1__.createPortal)(/*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n    ref: menuRef,\n    className: \"dd-dropdown-menu \".concat(placement, \" \").concat(isOpen ? \"open\" : \"\"),\n    style: {\n      top: position === null || position === void 0 ? void 0 : position.top,\n      left: position === null || position === void 0 ? void 0 : position.left\n    },\n    onMouseLeave: trigger === \"hover\" ? function () {\n      return handleTrigger(false);\n    } : undefined\n  }, menuItems.map(function (item, index) {\n    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n      key: index\n    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Option__WEBPACK_IMPORTED_MODULE_2__[\"default\"], {\n      option: {\n        label: item.label,\n        value: item.label\n      },\n      selectOp: function selectOp() {\n        return handleMenuItemClick(item);\n      },\n      buttonClassName: \"dd-menu-item \".concat(item.disabled ? \"disabled\" : \"\")\n    }), item.divided && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n      className: \"dd-menu-divider\"\n    }));\n  })), document.body)));\n};\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (DropdownMenu);\n\n//# sourceURL=webpack://RPB/./src/Index.tsx?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"react\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react-dom */ \"react-dom\");\n/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_dom__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _Option__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./Option */ \"./src/Option.tsx\");\n/* harmony import */ var _Index_scss__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./Index.scss */ \"./src/Index.scss\");\nfunction _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); }\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction 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; }\nfunction _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; }\nfunction _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }\nfunction _toPropertyKey(t) { var i = _toPrimitive(t, \"string\"); return \"symbol\" == _typeof(i) ? i : i + \"\"; }\nfunction _toPrimitive(t, r) { if (\"object\" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || \"default\"); if (\"object\" != _typeof(i)) return i; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (\"string\" === r ? String : Number)(t); }\nfunction _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }\nfunction _nonIterableRest() { throw new TypeError(\"Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\"); }\nfunction _unsupportedIterableToArray(r, a) { if (r) { if (\"string\" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return \"Object\" === t && r.constructor && (t = r.constructor.name), \"Map\" === t || \"Set\" === t ? Array.from(r) : \"Arguments\" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }\nfunction _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }\nfunction _iterableToArrayLimit(r, l) { var t = null == r ? null : \"undefined\" != typeof Symbol && r[Symbol.iterator] || r[\"@@iterator\"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t[\"return\"] && (u = t[\"return\"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }\nfunction _arrayWithHoles(r) { if (Array.isArray(r)) return r; }\n\n\n\n\nvar DropdownMenu = function DropdownMenu(_ref) {\n  var triggerButton = _ref.triggerButton,\n    menuItems = _ref.menuItems,\n    onChange = _ref.onChange,\n    _ref$disabled = _ref.disabled,\n    disabled = _ref$disabled === void 0 ? false : _ref$disabled,\n    _ref$placement = _ref.placement,\n    placement = _ref$placement === void 0 ? \"bottomLeft\" : _ref$placement,\n    _ref$trigger = _ref.trigger,\n    trigger = _ref$trigger === void 0 ? \"hover\" : _ref$trigger,\n    _ref$wrapperClassName = _ref.wrapperClassName,\n    wrapperClassName = _ref$wrapperClassName === void 0 ? \"\" : _ref$wrapperClassName,\n    _ref$closeOnOutsideCl = _ref.closeOnOutsideClick,\n    closeOnOutsideClick = _ref$closeOnOutsideCl === void 0 ? true : _ref$closeOnOutsideCl;\n  var _useState = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false),\n    _useState2 = _slicedToArray(_useState, 2),\n    isOpen = _useState2[0],\n    setIsOpen = _useState2[1];\n  var _useState3 = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(null),\n    _useState4 = _slicedToArray(_useState3, 2),\n    position = _useState4[0],\n    setPosition = _useState4[1];\n  var triggerRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n  var menuRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n  var calculatePosition = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(function () {\n    var _menuRef$current, _menuRef$current2, _menuRef$current3, _menuRef$current4;\n    if (!triggerRef.current) return;\n    var triggerRect = triggerRef.current.getBoundingClientRect();\n    var scrollY = window.scrollY;\n    var scrollX = window.scrollX;\n    switch (placement) {\n      case \"bottomLeft\":\n        return {\n          top: triggerRect.bottom + scrollY,\n          left: triggerRect.left + scrollX\n        };\n      case \"bottomRight\":\n        return {\n          top: triggerRect.bottom + scrollY,\n          left: triggerRect.right + scrollX - (((_menuRef$current = menuRef.current) === null || _menuRef$current === void 0 ? void 0 : _menuRef$current.offsetWidth) || 0)\n        };\n      case \"topLeft\":\n        return {\n          top: triggerRect.top + scrollY - (((_menuRef$current2 = menuRef.current) === null || _menuRef$current2 === void 0 ? void 0 : _menuRef$current2.offsetHeight) || 0),\n          left: triggerRect.left + scrollX\n        };\n      case \"topRight\":\n        return {\n          top: triggerRect.top + scrollY - (((_menuRef$current3 = menuRef.current) === null || _menuRef$current3 === void 0 ? void 0 : _menuRef$current3.offsetHeight) || 0),\n          left: triggerRect.right + scrollX - (((_menuRef$current4 = menuRef.current) === null || _menuRef$current4 === void 0 ? void 0 : _menuRef$current4.offsetWidth) || 0)\n        };\n      default:\n        return {\n          top: triggerRect.bottom + scrollY,\n          left: triggerRect.left + scrollX\n        };\n    }\n  }, [placement]);\n  var handleTrigger = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(function (open) {\n    if (disabled) return;\n    if (open) {\n      var pos = calculatePosition();\n      setPosition(pos);\n    }\n    setIsOpen(open);\n  }, [calculatePosition, disabled]);\n  var handleClickOutside = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(function (event) {\n    if (menuRef.current !== event.target && !menuRef.current.contains(event.target) && triggerRef.current !== event.target && !triggerRef.current.contains(event.target)) {\n      if (!menuRef.current || !triggerRef.current || menuRef.current.contains(event.target) || triggerRef.current.contains(event.target)) return;\n      handleTrigger(false);\n    }\n  }, [handleTrigger]);\n  (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {\n    if (isOpen && closeOnOutsideClick) {\n      document.addEventListener(\"mousedown\", handleClickOutside);\n    }\n    return function () {\n      document.removeEventListener(\"mousedown\", handleClickOutside);\n    };\n  }, [isOpen, closeOnOutsideClick, handleClickOutside]);\n  var handleMenuItemClick = function handleMenuItemClick(menuItem) {\n    if (menuItem.disabled) return;\n    onChange === null || onChange === void 0 || onChange(menuItem);\n    handleTrigger(false);\n  };\n  var triggerProps = _objectSpread({}, trigger === \"hover\" ? {\n    onMouseEnter: function onMouseEnter() {\n      return handleTrigger(true);\n    },\n    onMouseLeave: function onMouseLeave() {\n      return handleTrigger(false);\n    }\n  } : {\n    onClick: function onClick() {\n      return handleTrigger(!isOpen);\n    }\n  });\n  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", _extends({\n    className: \"dd-dropdown-wrapper \".concat(wrapperClassName, \" \").concat(disabled ? \"dd-disabled\" : \"\"),\n    \"aria-disabled\": disabled,\n    ref: triggerRef\n  }, triggerProps), triggerButton, isOpen && /*#__PURE__*/(0,react_dom__WEBPACK_IMPORTED_MODULE_1__.createPortal)(/*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n    ref: menuRef,\n    className: \"dd-dropdown-menu \".concat(placement, \" \").concat(isOpen ? \"open\" : \"\"),\n    style: {\n      top: position === null || position === void 0 ? void 0 : position.top,\n      left: position === null || position === void 0 ? void 0 : position.left\n    },\n    onMouseLeave: trigger === \"hover\" ? function () {\n      return handleTrigger(false);\n    } : undefined\n  }, menuItems.map(function (item, index) {\n    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n      key: index\n    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Option__WEBPACK_IMPORTED_MODULE_2__[\"default\"], {\n      option: {\n        label: item.label,\n        value: item.label\n      },\n      selectOp: function selectOp() {\n        return handleMenuItemClick(item);\n      },\n      buttonClassName: \"dd-menu-item \".concat(item.disabled ? \"disabled\" : \"\")\n    }), item.divided && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n      className: \"dd-menu-divider\"\n    }));\n  })), document.body)));\n};\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (DropdownMenu);\n\n//# sourceURL=webpack://RPB/./src/Index.tsx?");
 
 /***/ }),
 
@@ -66,7 +66,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
   \*********************************************************************************************************************************************************************/
 /***/ ((module, __webpack_exports__, __webpack_require__) => {
 
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../../node_modules/css-loader/dist/runtime/sourceMaps.js */ \"../../node_modules/css-loader/dist/runtime/sourceMaps.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../node_modules/css-loader/dist/runtime/api.js */ \"../../node_modules/css-loader/dist/runtime/api.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);\n// Imports\n\n\nvar ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, `.dd-dropdown-wrapper {\n  display: inline-block;\n  position: relative;\n  cursor: pointer;\n}\n\n.dd-dropdown-menu {\n  position: absolute;\n  min-width: 120px;\n  background: #fff;\n  border-radius: 4px;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);\n  z-index: 1000;\n  opacity: 0;\n  transform: translateY(-10px);\n  transition: opacity 0.2s, transform 0.2s;\n  pointer-events: none;\n}\n.dd-dropdown-menu.open {\n  opacity: 1;\n  transform: translateY(0);\n  pointer-events: auto;\n}\n.dd-dropdown-menu .dd-menu-item {\n  width: 100%;\n  padding: 8px 12px;\n  text-align: left;\n  background: none;\n  border: none;\n  cursor: pointer;\n  color: rgba(0, 0, 0, 0.85);\n  transition: background 0.2s;\n}\n.dd-dropdown-menu .dd-menu-item:hover:not(.disabled) {\n  background: #f5f5f5;\n}\n.dd-dropdown-menu .dd-menu-item.disabled {\n  color: rgba(0, 0, 0, 0.25);\n  cursor: not-allowed;\n}\n.dd-dropdown-menu .dd-menu-divider {\n  height: 1px;\n  background: #f0f0f0;\n  margin: 4px 0;\n}\n.dd-dropdown-menu.bottomLeft {\n  margin-top: 4px;\n}\n.dd-dropdown-menu.bottomRight {\n  margin-top: 4px;\n}\n.dd-dropdown-menu.topLeft {\n  margin-bottom: 4px;\n}\n.dd-dropdown-menu.topRight {\n  margin-bottom: 4px;\n}`, \"\",{\"version\":3,\"sources\":[\"webpack://./src/Index.scss\"],\"names\":[],\"mappings\":\"AAAA;EACE,qBAAA;EACA,kBAAA;EACA,eAAA;AACF;;AAEA;EACE,kBAAA;EACA,gBAAA;EACA,gBAAA;EACA,kBAAA;EACA,yCAAA;EACA,aAAA;EACA,UAAA;EACA,4BAAA;EACA,wCAAA;EACA,oBAAA;AACF;AACE;EACE,UAAA;EACA,wBAAA;EACA,oBAAA;AACJ;AAEE;EACE,WAAA;EACA,iBAAA;EACA,gBAAA;EACA,gBAAA;EACA,YAAA;EACA,eAAA;EACA,0BAAA;EACA,2BAAA;AAAJ;AAEI;EACE,mBAAA;AAAN;AAGI;EACE,0BAAA;EACA,mBAAA;AADN;AAKE;EACE,WAAA;EACA,mBAAA;EACA,aAAA;AAHJ;AAOE;EACE,eAAA;AALJ;AAQE;EACE,eAAA;AANJ;AASE;EACE,kBAAA;AAPJ;AAUE;EACE,kBAAA;AARJ\",\"sourcesContent\":[\".dd-dropdown-wrapper {\\r\\n  display: inline-block;\\r\\n  position: relative;\\r\\n  cursor: pointer;\\r\\n}\\r\\n\\r\\n.dd-dropdown-menu {\\r\\n  position: absolute;\\r\\n  min-width: 120px;\\r\\n  background: #fff;\\r\\n  border-radius: 4px;\\r\\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);\\r\\n  z-index: 1000;\\r\\n  opacity: 0;\\r\\n  transform: translateY(-10px);\\r\\n  transition: opacity 0.2s, transform 0.2s;\\r\\n  pointer-events: none;\\r\\n\\r\\n  &.open {\\r\\n    opacity: 1;\\r\\n    transform: translateY(0);\\r\\n    pointer-events: auto;\\r\\n  }\\r\\n\\r\\n  .dd-menu-item {\\r\\n    width: 100%;\\r\\n    padding: 8px 12px;\\r\\n    text-align: left;\\r\\n    background: none;\\r\\n    border: none;\\r\\n    cursor: pointer;\\r\\n    color: rgba(0, 0, 0, 0.85);\\r\\n    transition: background 0.2s;\\r\\n\\r\\n    &:hover:not(.disabled) {\\r\\n      background: #f5f5f5;\\r\\n    }\\r\\n\\r\\n    &.disabled {\\r\\n      color: rgba(0, 0, 0, 0.25);\\r\\n      cursor: not-allowed;\\r\\n    }\\r\\n  }\\r\\n\\r\\n  .dd-menu-divider {\\r\\n    height: 1px;\\r\\n    background: #f0f0f0;\\r\\n    margin: 4px 0;\\r\\n  }\\r\\n\\r\\n  // 不同位置的微调\\r\\n  &.bottomLeft {\\r\\n    margin-top: 4px;\\r\\n  }\\r\\n\\r\\n  &.bottomRight {\\r\\n    margin-top: 4px;\\r\\n  }\\r\\n\\r\\n  &.topLeft {\\r\\n    margin-bottom: 4px;\\r\\n  }\\r\\n\\r\\n  &.topRight {\\r\\n    margin-bottom: 4px;\\r\\n  }\\r\\n}\\r\\n\"],\"sourceRoot\":\"\"}]);\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);\n\n\n//# sourceURL=webpack://RPB/./src/Index.scss?../../node_modules/css-loader/dist/cjs.js??ruleSet%5B1%5D.rules%5B1%5D.use%5B1%5D!../../node_modules/sass-loader/dist/cjs.js??ruleSet%5B1%5D.rules%5B1%5D.use%5B2%5D");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../../node_modules/css-loader/dist/runtime/sourceMaps.js */ \"../../node_modules/css-loader/dist/runtime/sourceMaps.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../node_modules/css-loader/dist/runtime/api.js */ \"../../node_modules/css-loader/dist/runtime/api.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);\n// Imports\n\n\nvar ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, `.dd-dropdown-wrapper {\n  display: inline-block;\n  position: relative;\n  cursor: pointer;\n}\n\n.dd-dropdown-menu {\n  position: absolute;\n  min-width: 120px;\n  background: #fff;\n  border-radius: 4px;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);\n  z-index: 1000;\n  opacity: 0;\n  transform: translateY(-10px);\n  transition: opacity 0.2s, transform 0.2s;\n  pointer-events: none;\n}\n.dd-dropdown-menu.open {\n  opacity: 1;\n  transform: translateY(0);\n  pointer-events: auto;\n}\n.dd-dropdown-menu .dd-menu-item {\n  width: 100%;\n  padding: 8px 12px;\n  text-align: left;\n  background: none;\n  border: none;\n  cursor: pointer;\n  color: rgba(0, 0, 0, 0.85);\n  transition: background 0.2s;\n}\n.dd-dropdown-menu .dd-menu-item:hover:not(.disabled) {\n  background: #f5f5f5;\n}\n.dd-dropdown-menu .dd-menu-item.disabled {\n  color: rgba(0, 0, 0, 0.25);\n  cursor: not-allowed;\n}\n.dd-dropdown-menu .dd-menu-divider {\n  height: 1px;\n  background: #f0f0f0;\n  margin: 4px 0;\n}\n.dd-dropdown-menu.bottomLeft {\n  margin-top: 4px;\n}\n.dd-dropdown-menu.bottomRight {\n  margin-top: 4px;\n}\n.dd-dropdown-menu.topLeft {\n  margin-bottom: 4px;\n}\n.dd-dropdown-menu.topRight {\n  margin-bottom: 4px;\n}\n\n.dd-dropdown-wrapper.dd-disabled {\n  opacity: 0.6;\n  cursor: not-allowed;\n}\n.dd-dropdown-wrapper.dd-disabled:hover {\n  background: inherit;\n}\n\n.dd-menu-item.disabled {\n  pointer-events: none;\n}`, \"\",{\"version\":3,\"sources\":[\"webpack://./src/Index.scss\"],\"names\":[],\"mappings\":\"AAAA;EACE,qBAAA;EACA,kBAAA;EACA,eAAA;AACF;;AAEA;EACE,kBAAA;EACA,gBAAA;EACA,gBAAA;EACA,kBAAA;EACA,yCAAA;EACA,aAAA;EACA,UAAA;EACA,4BAAA;EACA,wCAAA;EACA,oBAAA;AACF;AACE;EACE,UAAA;EACA,wBAAA;EACA,oBAAA;AACJ;AAEE;EACE,WAAA;EACA,iBAAA;EACA,gBAAA;EACA,gBAAA;EACA,YAAA;EACA,eAAA;EACA,0BAAA;EACA,2BAAA;AAAJ;AAEI;EACE,mBAAA;AAAN;AAGI;EACE,0BAAA;EACA,mBAAA;AADN;AAKE;EACE,WAAA;EACA,mBAAA;EACA,aAAA;AAHJ;AAOE;EACE,eAAA;AALJ;AAQE;EACE,eAAA;AANJ;AASE;EACE,kBAAA;AAPJ;AAUE;EACE,kBAAA;AARJ;;AAcE;EACE,YAAA;EACA,mBAAA;AAXJ;AAcI;EACE,mBAAA;AAZN;;AAiBA;EACE,oBAAA;AAdF\",\"sourcesContent\":[\".dd-dropdown-wrapper {\\r\\n  display: inline-block;\\r\\n  position: relative;\\r\\n  cursor: pointer;\\r\\n}\\r\\n\\r\\n.dd-dropdown-menu {\\r\\n  position: absolute;\\r\\n  min-width: 120px;\\r\\n  background: #fff;\\r\\n  border-radius: 4px;\\r\\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);\\r\\n  z-index: 1000;\\r\\n  opacity: 0;\\r\\n  transform: translateY(-10px);\\r\\n  transition: opacity 0.2s, transform 0.2s;\\r\\n  pointer-events: none;\\r\\n\\r\\n  &.open {\\r\\n    opacity: 1;\\r\\n    transform: translateY(0);\\r\\n    pointer-events: auto;\\r\\n  }\\r\\n\\r\\n  .dd-menu-item {\\r\\n    width: 100%;\\r\\n    padding: 8px 12px;\\r\\n    text-align: left;\\r\\n    background: none;\\r\\n    border: none;\\r\\n    cursor: pointer;\\r\\n    color: rgba(0, 0, 0, 0.85);\\r\\n    transition: background 0.2s;\\r\\n\\r\\n    &:hover:not(.disabled) {\\r\\n      background: #f5f5f5;\\r\\n    }\\r\\n\\r\\n    &.disabled {\\r\\n      color: rgba(0, 0, 0, 0.25);\\r\\n      cursor: not-allowed;\\r\\n    }\\r\\n  }\\r\\n\\r\\n  .dd-menu-divider {\\r\\n    height: 1px;\\r\\n    background: #f0f0f0;\\r\\n    margin: 4px 0;\\r\\n  }\\r\\n\\r\\n  // 不同位置的微调\\r\\n  &.bottomLeft {\\r\\n    margin-top: 4px;\\r\\n  }\\r\\n\\r\\n  &.bottomRight {\\r\\n    margin-top: 4px;\\r\\n  }\\r\\n\\r\\n  &.topLeft {\\r\\n    margin-bottom: 4px;\\r\\n  }\\r\\n\\r\\n  &.topRight {\\r\\n    margin-bottom: 4px;\\r\\n  }\\r\\n}\\r\\n\\r\\n// 新增样式（Index.scss）\\r\\n.dd-dropdown-wrapper {\\r\\n  &.dd-disabled {\\r\\n    opacity: 0.6;\\r\\n    cursor: not-allowed;\\r\\n\\r\\n    // 禁用 hover 效果\\r\\n    &:hover {\\r\\n      background: inherit;\\r\\n    }\\r\\n  }\\r\\n}\\r\\n\\r\\n.dd-menu-item.disabled {\\r\\n  pointer-events: none; // 阻止鼠标事件\\r\\n}\\r\\n\"],\"sourceRoot\":\"\"}]);\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);\n\n\n//# sourceURL=webpack://RPB/./src/Index.scss?../../node_modules/css-loader/dist/cjs.js??ruleSet%5B1%5D.rules%5B1%5D.use%5B1%5D!../../node_modules/sass-loader/dist/cjs.js??ruleSet%5B1%5D.rules%5B1%5D.use%5B2%5D");
 
 /***/ }),
 

package/README.md

@@ -15,10 +15,10 @@ which does not contain any external style and script libraries.
 
 # Components List
 
-| WEB ELEMENTS | FORMS    | OTHER        |
-| ------------ | -------- | ------------ |
-| Modal mask   | Checkbox | Empty-notice |
-| selectInput  | radio    | Popover      |
-| toolTips     | Input    |              |
-| table        |          |              |
-| Trees        |          |              |
+| WEB ELEMENTS | FORMS    | Navigation    | OTHER        |
+| ------------ | -------- | ------------- | ------------ |
+| Modal Dialog | Checkbox | Dropdown Menu | Empty-notice |
+| selectInput  | radio    |               | Popover      |
+| toolTips     | Input    |               |              |
+| table        |          |               |              |
+| Trees        |          |               |              |

package/SelectInput/index.d.ts

@@ -1,5 +1,10 @@
 import React from "react";
 import "./Index.scss";
+export interface CleanTriggerConfig {
+    valid: boolean;
+    cleanValueLabel?: string;
+    cleanFunc?: Function;
+}
 interface Props {
     type?: "COMMON" | "MULTI";
     label?: string | React.ReactNode;
@@ -24,6 +29,7 @@ interface Props {
     zIndex?: string | any;
     isHandleInput?: boolean;
     isDisableBodyScroll?: boolean;
+    cleanTrigger?: CleanTriggerConfig;
     dataService?: any;
     dataServiceFunction?: string;
     dataServiceFunctionParams?: any[];
@@ -32,5 +38,5 @@ interface Props {
 export default function SelectInput({ type, label, wrapperClassName, wrapperConentInputClassName, popupMenuClassName, id, name, kbcode, dropdownRender, dropdownPosition, inputId, titleId, defaultValue, index, onChange, onKeyDown, onFoused, onBlured, size, zIndex, isHandleInput, isDisableBodyScroll, dataService, dataServiceFunction, // 默认调用 retrieveList 函数
 dataServiceFunctionParams, // 调用函数的传参
 dataServiceRetrieve, // 默认不是检索类的
-renderOption, }: Props): JSX.Element;
+renderOption, cleanTrigger, }: Props): JSX.Element;
 export {};

package/SelectInput/index.js

@@ -56,7 +56,7 @@ eval("\n\nmodule.exports = function (item) {\n  var content = item[1];\n  var cs
   \***********************/
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (/* binding */ SelectInput)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"react\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react-dom */ \"react-dom\");\n/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_dom__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var body_scroll_lock__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! body-scroll-lock */ \"../../node_modules/body-scroll-lock/lib/bodyScrollLock.esm.js\");\n/* harmony import */ var _utils_useKeyboardNavigation__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./utils/useKeyboardNavigation */ \"./src/utils/useKeyboardNavigation.ts\");\n/* harmony import */ var _utils_userDropDown__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./utils/userDropDown */ \"./src/utils/userDropDown.ts\");\n/* harmony import */ var _utils_cls__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../../utils/cls */ \"../../utils/cls.ts\");\n/* harmony import */ var _Index_scss__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./Index.scss */ \"./src/Index.scss\");\nfunction _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }\nfunction _nonIterableSpread() { throw new TypeError(\"Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\"); }\nfunction _iterableToArray(r) { if (\"undefined\" != typeof Symbol && null != r[Symbol.iterator] || null != r[\"@@iterator\"]) return Array.from(r); }\nfunction _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }\nfunction _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }\nfunction _nonIterableRest() { throw new TypeError(\"Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\"); }\nfunction _unsupportedIterableToArray(r, a) { if (r) { if (\"string\" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return \"Object\" === t && r.constructor && (t = r.constructor.name), \"Map\" === t || \"Set\" === t ? Array.from(r) : \"Arguments\" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }\nfunction _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }\nfunction _iterableToArrayLimit(r, l) { var t = null == r ? null : \"undefined\" != typeof Symbol && r[Symbol.iterator] || r[\"@@iterator\"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t[\"return\"] && (u = t[\"return\"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }\nfunction _arrayWithHoles(r) { if (Array.isArray(r)) return r; }\n\n\n\n// my-utils\n\n\n\n\nfunction SelectInput(_ref) {\n  var _dropdown$current, _dropdown$current2;\n  var _ref$type = _ref.type,\n    type = _ref$type === void 0 ? \"COMMON\" : _ref$type,\n    label = _ref.label,\n    wrapperClassName = _ref.wrapperClassName,\n    wrapperConentInputClassName = _ref.wrapperConentInputClassName,\n    popupMenuClassName = _ref.popupMenuClassName,\n    id = _ref.id,\n    name = _ref.name,\n    _ref$kbcode = _ref.kbcode,\n    kbcode = _ref$kbcode === void 0 ? \"kb_code\" : _ref$kbcode,\n    dropdownRender = _ref.dropdownRender,\n    dropdownPosition = _ref.dropdownPosition,\n    inputId = _ref.inputId,\n    titleId = _ref.titleId,\n    defaultValue = _ref.defaultValue,\n    index = _ref.index,\n    onChange = _ref.onChange,\n    onKeyDown = _ref.onKeyDown,\n    onFoused = _ref.onFoused,\n    onBlured = _ref.onBlured,\n    _ref$size = _ref.size,\n    size = _ref$size === void 0 ? \"auto\" : _ref$size,\n    _ref$zIndex = _ref.zIndex,\n    zIndex = _ref$zIndex === void 0 ? 1101 : _ref$zIndex,\n    _ref$isHandleInput = _ref.isHandleInput,\n    isHandleInput = _ref$isHandleInput === void 0 ? false : _ref$isHandleInput,\n    _ref$isDisableBodyScr = _ref.isDisableBodyScroll,\n    isDisableBodyScroll = _ref$isDisableBodyScr === void 0 ? false : _ref$isDisableBodyScr,\n    dataService = _ref.dataService,\n    _ref$dataServiceFunct = _ref.dataServiceFunction,\n    dataServiceFunction = _ref$dataServiceFunct === void 0 ? \"retrieveList\" : _ref$dataServiceFunct,\n    dataServiceFunctionParams = _ref.dataServiceFunctionParams,\n    _ref$dataServiceRetri = _ref.dataServiceRetrieve,\n    dataServiceRetrieve = _ref$dataServiceRetri === void 0 ? false : _ref$dataServiceRetri,\n    renderOption = _ref.renderOption;\n  var _useState = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(\"\"),\n    _useState2 = _slicedToArray(_useState, 2),\n    keyword = _useState2[0],\n    setKeyword = _useState2[1];\n  var _useState3 = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(\"\"),\n    _useState4 = _slicedToArray(_useState3, 2),\n    value = _useState4[0],\n    setValue = _useState4[1];\n  var _useState5 = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false),\n    _useState6 = _slicedToArray(_useState5, 2),\n    isShow = _useState6[0],\n    setIsShow = _useState6[1];\n  var _useState7 = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false),\n    _useState8 = _slicedToArray(_useState7, 2),\n    loading = _useState8[0],\n    setLoading = _useState8[1];\n\n  // 调用dataService获取的值\n  var _useState9 = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)([]),\n    _useState10 = _slicedToArray(_useState9, 2),\n    dataServiceList = _useState10[0],\n    setDataServiceList = _useState10[1];\n  var _useState11 = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)([]),\n    _useState12 = _slicedToArray(_useState11, 2),\n    initialData = _useState12[0],\n    setInitialData = _useState12[1]; // 用来保存初始接口数据\n  var _useState13 = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false),\n    _useState14 = _slicedToArray(_useState13, 2),\n    hasFetchedData = _useState14[0],\n    setHasFetchedData = _useState14[1]; // 判断是否已经调用过接口\n\n  // 判断下拉框位置\n  var _useDropdown = (0,_utils_userDropDown__WEBPACK_IMPORTED_MODULE_4__.useDropdown)(isShow, setIsShow, dataServiceList, loading, dropdownPosition),\n    dropdown = _useDropdown.dropdown,\n    dropdownContent = _useDropdown.dropdownContent;\n\n  // 键盘逻辑\n  var _useKeyboardNavigatio = (0,_utils_useKeyboardNavigation__WEBPACK_IMPORTED_MODULE_3__.useKeyboardNavigation)(dataServiceList.length, function (index) {\n      return chooseOption(dataServiceList[index]);\n    }, onKeyDown),\n    focusedOption = _useKeyboardNavigatio.focusedOption,\n    setFocusedOption = _useKeyboardNavigatio.setFocusedOption,\n    handleKeyDown = _useKeyboardNavigatio.handleKeyDown,\n    handleOptionFocus = _useKeyboardNavigatio.handleOptionFocus,\n    handleOptionBlur = _useKeyboardNavigatio.handleOptionBlur;\n  var dropDownList = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(function () {\n    return dataServiceList;\n  }, [dataServiceList]);\n\n  // input框输入\n  var handleInputChange = function handleInputChange(event) {\n    var newValue = event.target.value.trim().toLowerCase();\n    setKeyword(newValue);\n\n    // 当允许手动输入时，触发 onChange 事件，将输入值传递给父组件\n    if (isHandleInput) {\n      if (index) {\n        onChange(newValue, index);\n      } else {\n        onChange(newValue);\n      }\n    }\n  };\n\n  // 单选选择option\n  function chooseOption(item) {\n    setIsShow(false);\n    if (index) {\n      onChange(item, index);\n    } else {\n      onChange(item);\n    }\n    setValue(item[name]);\n    setKeyword(\"\"); // 清空关键词以重置列表\n    setFocusedOption(null); // 重置焦点选项为 null\n\n    // 失去焦点\n    setTimeout(function () {\n      var input = document.getElementById(\"\".concat(inputId));\n      input.blur();\n    }, 0);\n  }\n\n  // 多选判断是否勾选\n  function toggleSelection(item) {\n    var exists = value.some(function (i) {\n      return i[id] === item[id];\n    });\n    var newValue;\n    if (exists) {\n      newValue = value.filter(function (i) {\n        return i[id] !== item[id];\n      });\n    } else {\n      newValue = [].concat(_toConsumableArray(value), [item]);\n    }\n    setValue(newValue);\n    if (index) {\n      onChange(newValue, index);\n    } else {\n      onChange(newValue);\n    }\n\n    // 如果需要向父组件传递多选结果，可以在此调用 onChange\n    // onChange(newValue)\n  }\n\n  // 检索\n  var handleSearch = function handleSearch(keyword, searchArray) {\n    var filteredList = searchArray.filter(function (obj) {\n      var _obj$name;\n      var nameMatch = obj[name] ? (_obj$name = obj[name]) === null || _obj$name === void 0 ? void 0 : _obj$name.includes(keyword) : false;\n      var kbcodeMatch = obj[kbcode] ? obj[kbcode].includes(keyword) : false;\n      return nameMatch || kbcodeMatch;\n    });\n    return filteredList;\n  };\n  (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {\n    if (isShow) {\n      setLoading(true);\n      if (dataService && dataServiceFunction) {\n        var params = _toConsumableArray(dataServiceFunctionParams || []);\n\n        // 检查是否有 $QUERY_STRING，如果有，替换 keyword\n        var queryIndex = params.indexOf(\"$QUERY_STRING\");\n        if (queryIndex !== -1) {\n          params[queryIndex] = keyword || \"*\"; // 替换为 keyword 或 '*'\n        }\n\n        // 如果该参数是true，则代表是retrieve接口，实时搜索\n        if (dataServiceRetrieve) {\n          dataService[dataServiceFunction].apply(dataService, _toConsumableArray(params)).then(function (result) {\n            if (result.length > 0) {\n              setDataServiceList(result);\n            } else {\n              setDataServiceList([]);\n            }\n          })[\"finally\"](function () {\n            setLoading(false);\n          });\n        } else {\n          if (!hasFetchedData) {\n            // 如果没有调用过接口，则调用一次\n            dataService[dataServiceFunction].apply(dataService, _toConsumableArray(params)).then(function (result) {\n              setHasFetchedData(true); // 标记已经获取过数据\n\n              if (result.length > 0) {\n                setInitialData(result); // 保存原始数据\n                setDataServiceList(result);\n              } else {\n                setDataServiceList([]);\n                setInitialData([]);\n              }\n            })[\"finally\"](function () {\n              setLoading(false);\n            });\n          } else {\n            // 本地过滤检索\n            var filteredList = handleSearch(keyword, initialData);\n            setDataServiceList(filteredList);\n            setLoading(false);\n          }\n        }\n      } else {\n        var _filteredList = handleSearch(keyword, dropdownRender);\n        setDataServiceList(_filteredList);\n        setLoading(false);\n      }\n    } else {\n      setDataServiceList([]);\n      setHasFetchedData(false);\n      setInitialData([]);\n    }\n  }, [keyword, isShow, dropdownRender]);\n  (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {\n    if (defaultValue) {\n      setValue(defaultValue);\n      var renderList = dropdownRender.length > 0 ? dropdownRender : dropDownList;\n\n      // 根据 defaultValue 找到对应的选项索引，并设置 focusedOption\n      var defaultOptionIndex = renderList.findIndex(function (item) {\n        return item[name] === defaultValue;\n      });\n      if (defaultOptionIndex !== -1) {\n        setFocusedOption(defaultOptionIndex);\n      } else {\n        setFocusedOption(null); // 如果没有找到匹配项，重置为 null\n      }\n    } else {\n      setValue(\"\");\n      setFocusedOption(null); // 没有默认值时，重置 focusedOption\n    }\n  }, [defaultValue, dropDownList, dropdownRender]);\n  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n    className: (0,_utils_cls__WEBPACK_IMPORTED_MODULE_5__.clsCombine)(wrapperClassName, \"select-input__wrapper\")\n  }, label ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, typeof label === \"string\" ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"label\", null, label) : label) : null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n    className: \"select-input__content\",\n    style: {\n      width: typeof size === \"number\" ? \"\".concat(size, \"px\") : \"auto\"\n    },\n    ref: dropdown\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"input\", {\n    type: \"text\",\n    onChange: handleInputChange,\n    id: inputId,\n    className: (0,_utils_cls__WEBPACK_IMPORTED_MODULE_5__.clsCombine)((0,_utils_cls__WEBPACK_IMPORTED_MODULE_5__.clsWrite)(wrapperConentInputClassName, \"form-control\"), \"select-input__content__input\"),\n    onFocus: function onFocus() {\n      if (isDisableBodyScroll) {\n        var targetElement = document.body;\n        (0,body_scroll_lock__WEBPACK_IMPORTED_MODULE_2__.disableBodyScroll)(targetElement);\n      }\n      if (type === \"MULTI\") {\n        setKeyword(\"\");\n      }\n\n      // 外部聚焦方法\n      if (onFoused) {\n        onFoused();\n      }\n      setIsShow(true);\n      var title = document.getElementById(\"\".concat(titleId));\n      title.classList.add(\"text-secondary-emphasis\", \"z-n1\");\n    },\n    onBlur: function onBlur() {\n      var title = document.getElementById(\"\".concat(titleId));\n      var input = document.getElementById(\"\".concat(inputId));\n      title.classList.remove(\"text-secondary-emphasis\", \"z-n1\");\n      input.value = \"\";\n\n      // 外部失焦方法\n      if (onBlured) {\n        onBlured();\n      }\n      setTimeout(function () {\n        if (isDisableBodyScroll) {\n          (0,body_scroll_lock__WEBPACK_IMPORTED_MODULE_2__.clearAllBodyScrollLocks)();\n        }\n        if (type === \"COMMON\") {\n          setKeyword(\"\");\n          // setIsShow(false);\n        }\n        setFocusedOption(null);\n      }, 100);\n    },\n    onKeyDown: handleKeyDown,\n    autoComplete: \"off\"\n  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"span\", {\n    className: \"select-input__content__arrow \".concat(isShow ? \"select-input__content__arrow--reverse\" : \"\"),\n    onClick: function onClick() {\n      var input = document.getElementById(\"\".concat(inputId));\n      input.focus();\n    }\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"svg\", {\n    width: \"10px\",\n    height: \"10px\",\n    viewBox: \"0 -4.5 20 20\"\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"g\", {\n    stroke: \"none\",\n    strokeWidth: \"1\",\n    fill: \"none\"\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"g\", {\n    transform: \"translate(-180.000000, -6684.000000)\",\n    className: \"arrow-fill-g\",\n    fill: \"#a5a5a5\"\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"g\", {\n    transform: \"translate(56.000000, 160.000000)\"\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"path\", {\n    d: \"M144,6525.39 L142.594,6524 L133.987,6532.261 L133.069,6531.38 L133.074,6531.385 L125.427,6524.045 L124,6525.414 C126.113,6527.443 132.014,6533.107 133.987,6535 C135.453,6533.594 134.024,6534.965 144,6525.39\"\n  })))))), isShow && /*#__PURE__*/(0,react_dom__WEBPACK_IMPORTED_MODULE_1__.createPortal)(/*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n    ref: dropdownContent,\n    className: \"select-input__popup__menu position-absolute shadow border rounded \".concat(isShow ? \"select-input__popup__menu--isShow\" : \"\", \" \").concat((0,_utils_cls__WEBPACK_IMPORTED_MODULE_5__.clsCombine)(popupMenuClassName)),\n    style: {\n      zIndex: zIndex,\n      width: \"\".concat((_dropdown$current = dropdown.current) === null || _dropdown$current === void 0 ? void 0 : _dropdown$current.getBoundingClientRect().width, \"px\")\n    }\n  }, loading && dataService ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n    className: \"select-input__popup__list py-1 px-1\"\n  }, \"\\u52A0\\u8F7D\\u4E2D...\") : dropDownList.length !== 0 ? type === \"COMMON\" ? dropDownList === null || dropDownList === void 0 ? void 0 : dropDownList.map(function (item, index) {\n    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n      className: \"select-input__popup__list py-1 px-1 \".concat(index + 1 === dropDownList.length ? \"\" : \"border-bottom\", \" \").concat(focusedOption === index ? \"text-bg-primary\" : \"\"),\n      key: item[id] || \"\",\n      onMouseDown: function onMouseDown(e) {\n        e.stopPropagation();\n        chooseOption(item);\n      },\n      onFocus: function onFocus() {\n        return handleOptionFocus(item);\n      },\n      onBlur: handleOptionBlur,\n      \"data-id\": item[id],\n      \"data-name\": item[name]\n    }, renderOption ? renderOption(item) // 使用自定义渲染函数\n    : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"span\", null, item[name]) // 默认渲染\n    );\n  }) : dropDownList === null || dropDownList === void 0 ? void 0 : dropDownList.map(function (item, index) {\n    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n      className: \"select-input__popup__list py-1 px-1 \".concat(index + 1 === dropDownList.length ? \"\" : \"border-bottom\", \" \").concat(focusedOption === index ? \"text-bg-primary\" : \"\"),\n      key: item[id] || \"\",\n      onMouseDown: function onMouseDown(e) {\n        e.stopPropagation();\n        toggleSelection(item);\n      },\n      onFocus: function onFocus() {\n        return handleOptionFocus(item);\n      },\n      onBlur: handleOptionBlur,\n      \"data-id\": item[id],\n      \"data-name\": item[name]\n    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"input\", {\n      type: \"checkbox\",\n      className: \"form-check-input me-2\",\n      onMouseDown: function onMouseDown(e) {\n        return e.stopPropagation();\n      },\n      checked: value.some(function (i) {\n        return i[id] === item[id];\n      }),\n      onChange: function onChange() {\n        return toggleSelection(item);\n      }\n    }), renderOption ? renderOption(item) // 使用自定义渲染函数\n    : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"span\", null, item[name]) // 默认渲染\n    );\n  }) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n    className: \"select-input__popup__list py-1 px-1\"\n  }, \"\\u6CA1\\u6709\\u66F4\\u591A\\u6570\\u636E\")), document.body), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n    id: \"\".concat(titleId),\n    className: \"position-absolute ms-2 select-input__content__word__container\",\n    style: {\n      transform: \"translateY(-50%)\",\n      top: \"50%\",\n      width: \"\".concat((_dropdown$current2 = dropdown.current) === null || _dropdown$current2 === void 0 ? void 0 : _dropdown$current2.getBoundingClientRect().width, \"px\")\n    },\n    onMouseDown: function onMouseDown(e) {\n      e.preventDefault();\n      var input = document.getElementById(\"\".concat(inputId));\n      input.focus();\n    },\n    title: Array.isArray(value) && value.length > 0 ? value.map(function (item) {\n      return item[name];\n    }).join(\", \") : value\n  }, type === \"COMMON\" ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"span\", null, value) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"span\", null, Array.isArray(value) && value.length > 0 ? value.map(function (item) {\n    return item[name];\n  }).join(\", \") : value))));\n}\n\n//# sourceURL=webpack://RPB/./src/Index.tsx?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (/* binding */ SelectInput)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"react\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react-dom */ \"react-dom\");\n/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_dom__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var body_scroll_lock__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! body-scroll-lock */ \"../../node_modules/body-scroll-lock/lib/bodyScrollLock.esm.js\");\n/* harmony import */ var _utils_useKeyboardNavigation__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./utils/useKeyboardNavigation */ \"./src/utils/useKeyboardNavigation.ts\");\n/* harmony import */ var _utils_userDropDown__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./utils/userDropDown */ \"./src/utils/userDropDown.ts\");\n/* harmony import */ var _utils_cls__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../../utils/cls */ \"../../utils/cls.ts\");\n/* harmony import */ var _Index_scss__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./Index.scss */ \"./src/Index.scss\");\nfunction _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }\nfunction _nonIterableSpread() { throw new TypeError(\"Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\"); }\nfunction _iterableToArray(r) { if (\"undefined\" != typeof Symbol && null != r[Symbol.iterator] || null != r[\"@@iterator\"]) return Array.from(r); }\nfunction _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }\nfunction _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }\nfunction _nonIterableRest() { throw new TypeError(\"Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\"); }\nfunction _unsupportedIterableToArray(r, a) { if (r) { if (\"string\" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return \"Object\" === t && r.constructor && (t = r.constructor.name), \"Map\" === t || \"Set\" === t ? Array.from(r) : \"Arguments\" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }\nfunction _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }\nfunction _iterableToArrayLimit(r, l) { var t = null == r ? null : \"undefined\" != typeof Symbol && r[Symbol.iterator] || r[\"@@iterator\"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t[\"return\"] && (u = t[\"return\"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }\nfunction _arrayWithHoles(r) { if (Array.isArray(r)) return r; }\n\n\n\n// my-utils\n\n\n\n\nfunction SelectInput(_ref) {\n  var _dropdown$current, _dropdown$current2;\n  var _ref$type = _ref.type,\n    type = _ref$type === void 0 ? \"COMMON\" : _ref$type,\n    label = _ref.label,\n    wrapperClassName = _ref.wrapperClassName,\n    wrapperConentInputClassName = _ref.wrapperConentInputClassName,\n    popupMenuClassName = _ref.popupMenuClassName,\n    id = _ref.id,\n    name = _ref.name,\n    _ref$kbcode = _ref.kbcode,\n    kbcode = _ref$kbcode === void 0 ? \"kb_code\" : _ref$kbcode,\n    dropdownRender = _ref.dropdownRender,\n    dropdownPosition = _ref.dropdownPosition,\n    inputId = _ref.inputId,\n    titleId = _ref.titleId,\n    defaultValue = _ref.defaultValue,\n    index = _ref.index,\n    onChange = _ref.onChange,\n    onKeyDown = _ref.onKeyDown,\n    onFoused = _ref.onFoused,\n    onBlured = _ref.onBlured,\n    _ref$size = _ref.size,\n    size = _ref$size === void 0 ? \"auto\" : _ref$size,\n    _ref$zIndex = _ref.zIndex,\n    zIndex = _ref$zIndex === void 0 ? 1101 : _ref$zIndex,\n    _ref$isHandleInput = _ref.isHandleInput,\n    isHandleInput = _ref$isHandleInput === void 0 ? false : _ref$isHandleInput,\n    _ref$isDisableBodyScr = _ref.isDisableBodyScroll,\n    isDisableBodyScroll = _ref$isDisableBodyScr === void 0 ? false : _ref$isDisableBodyScr,\n    dataService = _ref.dataService,\n    _ref$dataServiceFunct = _ref.dataServiceFunction,\n    dataServiceFunction = _ref$dataServiceFunct === void 0 ? \"retrieveList\" : _ref$dataServiceFunct,\n    dataServiceFunctionParams = _ref.dataServiceFunctionParams,\n    _ref$dataServiceRetri = _ref.dataServiceRetrieve,\n    dataServiceRetrieve = _ref$dataServiceRetri === void 0 ? false : _ref$dataServiceRetri,\n    renderOption = _ref.renderOption,\n    cleanTrigger = _ref.cleanTrigger;\n  var _useState = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(\"\"),\n    _useState2 = _slicedToArray(_useState, 2),\n    keyword = _useState2[0],\n    setKeyword = _useState2[1];\n  var _useState3 = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(\"\"),\n    _useState4 = _slicedToArray(_useState3, 2),\n    value = _useState4[0],\n    setValue = _useState4[1];\n  var _useState5 = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false),\n    _useState6 = _slicedToArray(_useState5, 2),\n    isShow = _useState6[0],\n    setIsShow = _useState6[1];\n  var _useState7 = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false),\n    _useState8 = _slicedToArray(_useState7, 2),\n    loading = _useState8[0],\n    setLoading = _useState8[1];\n\n  // 调用dataService获取的值\n  var _useState9 = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)([]),\n    _useState10 = _slicedToArray(_useState9, 2),\n    dataServiceList = _useState10[0],\n    setDataServiceList = _useState10[1];\n  var _useState11 = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)([]),\n    _useState12 = _slicedToArray(_useState11, 2),\n    initialData = _useState12[0],\n    setInitialData = _useState12[1]; // 用来保存初始接口数据\n  var _useState13 = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false),\n    _useState14 = _slicedToArray(_useState13, 2),\n    hasFetchedData = _useState14[0],\n    setHasFetchedData = _useState14[1]; // 判断是否已经调用过接口\n\n  // 判断下拉框位置\n  var _useDropdown = (0,_utils_userDropDown__WEBPACK_IMPORTED_MODULE_4__.useDropdown)(isShow, setIsShow, dataServiceList, loading, dropdownPosition),\n    dropdown = _useDropdown.dropdown,\n    dropdownContent = _useDropdown.dropdownContent;\n\n  // 键盘逻辑\n  var _useKeyboardNavigatio = (0,_utils_useKeyboardNavigation__WEBPACK_IMPORTED_MODULE_3__.useKeyboardNavigation)(dataServiceList.length, function (index) {\n      return chooseOption(dataServiceList[index]);\n    }, onKeyDown),\n    focusedOption = _useKeyboardNavigatio.focusedOption,\n    setFocusedOption = _useKeyboardNavigatio.setFocusedOption,\n    handleKeyDown = _useKeyboardNavigatio.handleKeyDown,\n    handleOptionFocus = _useKeyboardNavigatio.handleOptionFocus,\n    handleOptionBlur = _useKeyboardNavigatio.handleOptionBlur;\n  var dropDownList = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(function () {\n    return dataServiceList;\n  }, [dataServiceList]);\n\n  // input框输入\n  var handleInputChange = function handleInputChange(event) {\n    var newValue = event.target.value.trim().toLowerCase();\n    setKeyword(newValue);\n\n    // 当允许手动输入时，触发 onChange 事件，将输入值传递给父组件\n    if (isHandleInput) {\n      if (index) {\n        onChange(newValue, index);\n      } else {\n        onChange(newValue);\n      }\n    }\n  };\n\n  // 单选选择option\n  function chooseOption(item) {\n    setIsShow(false);\n    if (index) {\n      onChange(item, index);\n    } else {\n      onChange(item);\n    }\n    setValue(item[name]);\n    setKeyword(\"\"); // 清空关键词以重置列表\n    setFocusedOption(null); // 重置焦点选项为 null\n\n    // 失去焦点\n    setTimeout(function () {\n      var input = document.getElementById(\"\".concat(inputId));\n      input.blur();\n    }, 0);\n  }\n\n  // 多选判断是否勾选\n  function toggleSelection(item) {\n    var exists = value.some(function (i) {\n      return i[id] === item[id];\n    });\n    var newValue;\n    if (exists) {\n      newValue = value.filter(function (i) {\n        return i[id] !== item[id];\n      });\n    } else {\n      newValue = [].concat(_toConsumableArray(value), [item]);\n    }\n    setValue(newValue);\n    if (index) {\n      onChange(newValue, index);\n    } else {\n      onChange(newValue);\n    }\n\n    // 如果需要向父组件传递多选结果，可以在此调用 onChange\n    // onChange(newValue)\n  }\n\n  // 检索\n  var handleSearch = function handleSearch(keyword, searchArray) {\n    var filteredList = searchArray.filter(function (obj) {\n      var _obj$name;\n      var nameMatch = obj[name] ? (_obj$name = obj[name]) === null || _obj$name === void 0 ? void 0 : _obj$name.includes(keyword) : false;\n      var kbcodeMatch = obj[kbcode] ? obj[kbcode].includes(keyword) : false;\n      return nameMatch || kbcodeMatch;\n    });\n    return filteredList;\n  };\n\n  // 清空\n  function clearSelection() {\n    setIsShow(false);\n    setValue(\"\");\n    setKeyword(\"\");\n    setFocusedOption(null); // 重置焦点\n\n    if (cleanTrigger !== null && cleanTrigger !== void 0 && cleanTrigger.cleanFunc) {\n      cleanTrigger.cleanFunc();\n    }\n\n    // 失去焦点\n    setTimeout(function () {\n      var input = document.getElementById(\"\".concat(inputId));\n      input.blur();\n    }, 0);\n  }\n  (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {\n    if (isShow) {\n      setLoading(true);\n      if (dataService && dataServiceFunction) {\n        var params = _toConsumableArray(dataServiceFunctionParams || []);\n\n        // 检查是否有 $QUERY_STRING，如果有，替换 keyword\n        var queryIndex = params.indexOf(\"$QUERY_STRING\");\n        if (queryIndex !== -1) {\n          params[queryIndex] = keyword || \"*\"; // 替换为 keyword 或 '*'\n        }\n\n        // 如果该参数是true，则代表是retrieve接口，实时搜索\n        if (dataServiceRetrieve) {\n          dataService[dataServiceFunction].apply(dataService, _toConsumableArray(params)).then(function (result) {\n            if (result.length > 0) {\n              setDataServiceList(result);\n            } else {\n              setDataServiceList([]);\n            }\n          })[\"finally\"](function () {\n            setLoading(false);\n          });\n        } else {\n          if (!hasFetchedData) {\n            // 如果没有调用过接口，则调用一次\n            dataService[dataServiceFunction].apply(dataService, _toConsumableArray(params)).then(function (result) {\n              setHasFetchedData(true); // 标记已经获取过数据\n\n              if (result.length > 0) {\n                setInitialData(result); // 保存原始数据\n                setDataServiceList(result);\n              } else {\n                setDataServiceList([]);\n                setInitialData([]);\n              }\n            })[\"finally\"](function () {\n              setLoading(false);\n            });\n          } else {\n            // 本地过滤检索\n            var filteredList = handleSearch(keyword, initialData);\n            setDataServiceList(filteredList);\n            setLoading(false);\n          }\n        }\n      } else {\n        var _filteredList = handleSearch(keyword, dropdownRender);\n        setDataServiceList(_filteredList);\n        setLoading(false);\n      }\n    } else {\n      setDataServiceList([]);\n      setHasFetchedData(false);\n      setInitialData([]);\n    }\n  }, [keyword, isShow, dropdownRender]);\n  (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {\n    if (defaultValue) {\n      setValue(defaultValue);\n      var renderList = dropdownRender.length > 0 ? dropdownRender : dropDownList;\n\n      // 根据 defaultValue 找到对应的选项索引，并设置 focusedOption\n      var defaultOptionIndex = renderList.findIndex(function (item) {\n        return item[name] === defaultValue;\n      });\n      if (defaultOptionIndex !== -1) {\n        setFocusedOption(defaultOptionIndex);\n      } else {\n        setFocusedOption(null); // 如果没有找到匹配项，重置为 null\n      }\n    } else {\n      setValue(\"\");\n      setFocusedOption(null); // 没有默认值时，重置 focusedOption\n    }\n  }, [defaultValue, dropDownList, dropdownRender]);\n  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n    className: (0,_utils_cls__WEBPACK_IMPORTED_MODULE_5__.clsCombine)(wrapperClassName, \"select-input__wrapper\")\n  }, label ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, typeof label === \"string\" ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"label\", null, label) : label) : null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n    className: \"select-input__content\",\n    style: {\n      width: typeof size === \"number\" ? \"\".concat(size, \"px\") : \"auto\"\n    },\n    ref: dropdown\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"input\", {\n    type: \"text\",\n    onChange: handleInputChange,\n    id: inputId,\n    className: (0,_utils_cls__WEBPACK_IMPORTED_MODULE_5__.clsCombine)((0,_utils_cls__WEBPACK_IMPORTED_MODULE_5__.clsWrite)(wrapperConentInputClassName, \"form-control\"), \"select-input__content__input\"),\n    onFocus: function onFocus() {\n      if (isDisableBodyScroll) {\n        var targetElement = document.body;\n        (0,body_scroll_lock__WEBPACK_IMPORTED_MODULE_2__.disableBodyScroll)(targetElement);\n      }\n      if (type === \"MULTI\") {\n        setKeyword(\"\");\n      }\n\n      // 外部聚焦方法\n      if (onFoused) {\n        onFoused();\n      }\n      setIsShow(true);\n      var title = document.getElementById(\"\".concat(titleId));\n      title.classList.add(\"text-secondary-emphasis\", \"z-n1\");\n    },\n    onBlur: function onBlur() {\n      var title = document.getElementById(\"\".concat(titleId));\n      var input = document.getElementById(\"\".concat(inputId));\n      title.classList.remove(\"text-secondary-emphasis\", \"z-n1\");\n      input.value = \"\";\n\n      // 外部失焦方法\n      if (onBlured) {\n        onBlured();\n      }\n      setTimeout(function () {\n        if (isDisableBodyScroll) {\n          (0,body_scroll_lock__WEBPACK_IMPORTED_MODULE_2__.clearAllBodyScrollLocks)();\n        }\n        if (type === \"COMMON\") {\n          setKeyword(\"\");\n          // setIsShow(false);\n        }\n        setFocusedOption(null);\n      }, 100);\n    },\n    onKeyDown: handleKeyDown,\n    autoComplete: \"off\"\n  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"span\", {\n    className: \"select-input__content__arrow \".concat(isShow ? \"select-input__content__arrow--reverse\" : \"\"),\n    onClick: function onClick() {\n      var input = document.getElementById(\"\".concat(inputId));\n      input.focus();\n    }\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"svg\", {\n    width: \"10px\",\n    height: \"10px\",\n    viewBox: \"0 -4.5 20 20\"\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"g\", {\n    stroke: \"none\",\n    strokeWidth: \"1\",\n    fill: \"none\"\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"g\", {\n    transform: \"translate(-180.000000, -6684.000000)\",\n    className: \"arrow-fill-g\",\n    fill: \"#a5a5a5\"\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"g\", {\n    transform: \"translate(56.000000, 160.000000)\"\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"path\", {\n    d: \"M144,6525.39 L142.594,6524 L133.987,6532.261 L133.069,6531.38 L133.074,6531.385 L125.427,6524.045 L124,6525.414 C126.113,6527.443 132.014,6533.107 133.987,6535 C135.453,6533.594 134.024,6534.965 144,6525.39\"\n  })))))), isShow && /*#__PURE__*/(0,react_dom__WEBPACK_IMPORTED_MODULE_1__.createPortal)(/*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n    ref: dropdownContent,\n    className: \"select-input__popup__menu position-absolute shadow border rounded \".concat(isShow ? \"select-input__popup__menu--isShow\" : \"\", \" \").concat((0,_utils_cls__WEBPACK_IMPORTED_MODULE_5__.clsCombine)(popupMenuClassName)),\n    style: {\n      zIndex: zIndex,\n      width: \"\".concat((_dropdown$current = dropdown.current) === null || _dropdown$current === void 0 ? void 0 : _dropdown$current.getBoundingClientRect().width, \"px\")\n    }\n  }, (cleanTrigger === null || cleanTrigger === void 0 ? void 0 : cleanTrigger.valid) && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n    className: \"select-input__popup__list py-1 px-1 border-bottom bg-light\",\n    onMouseDown: function onMouseDown(e) {\n      e.stopPropagation();\n      clearSelection(); // 清空选项\n    }\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"span\", {\n    className: \"btn btn-sm btn-secondary\"\n  }, cleanTrigger.cleanValueLabel)), loading && dataService ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n    className: \"select-input__popup__list py-1 px-1\"\n  }, \"\\u52A0\\u8F7D\\u4E2D...\") : dropDownList.length !== 0 ? type === \"COMMON\" ? dropDownList === null || dropDownList === void 0 ? void 0 : dropDownList.map(function (item, index) {\n    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n      className: \"select-input__popup__list py-1 px-1 \".concat(index + 1 === dropDownList.length ? \"\" : \"border-bottom\", \" \").concat(focusedOption === index ? \"text-bg-primary\" : \"\"),\n      key: item[id] || \"\",\n      onMouseDown: function onMouseDown(e) {\n        e.stopPropagation();\n        chooseOption(item);\n      },\n      onFocus: function onFocus() {\n        return handleOptionFocus(item);\n      },\n      onBlur: handleOptionBlur,\n      \"data-id\": item[id],\n      \"data-name\": item[name]\n    }, renderOption ? renderOption(item) // 使用自定义渲染函数\n    : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"span\", null, item[name]) // 默认渲染\n    );\n  }) : dropDownList === null || dropDownList === void 0 ? void 0 : dropDownList.map(function (item, index) {\n    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n      className: \"select-input__popup__list py-1 px-1 \".concat(index + 1 === dropDownList.length ? \"\" : \"border-bottom\", \" \").concat(focusedOption === index ? \"text-bg-primary\" : \"\"),\n      key: item[id] || \"\",\n      onMouseDown: function onMouseDown(e) {\n        e.stopPropagation();\n        toggleSelection(item);\n      },\n      onFocus: function onFocus() {\n        return handleOptionFocus(item);\n      },\n      onBlur: handleOptionBlur,\n      \"data-id\": item[id],\n      \"data-name\": item[name]\n    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"input\", {\n      type: \"checkbox\",\n      className: \"form-check-input me-2\",\n      onMouseDown: function onMouseDown(e) {\n        return e.stopPropagation();\n      },\n      checked: value.some(function (i) {\n        return i[id] === item[id];\n      }),\n      onChange: function onChange() {\n        return toggleSelection(item);\n      }\n    }), renderOption ? renderOption(item) // 使用自定义渲染函数\n    : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"span\", null, item[name]) // 默认渲染\n    );\n  }) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n    className: \"select-input__popup__list py-1 px-1\"\n  }, \"\\u6CA1\\u6709\\u66F4\\u591A\\u6570\\u636E\")), document.body), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n    id: \"\".concat(titleId),\n    className: \"position-absolute ms-2 select-input__content__word__container\",\n    style: {\n      transform: \"translateY(-50%)\",\n      top: \"50%\",\n      width: \"\".concat((_dropdown$current2 = dropdown.current) === null || _dropdown$current2 === void 0 ? void 0 : _dropdown$current2.getBoundingClientRect().width, \"px\")\n    },\n    onMouseDown: function onMouseDown(e) {\n      e.preventDefault();\n      var input = document.getElementById(\"\".concat(inputId));\n      input.focus();\n    },\n    title: Array.isArray(value) && value.length > 0 ? value.map(function (item) {\n      return item[name];\n    }).join(\", \") : value\n  }, type === \"COMMON\" ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"span\", null, value) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"span\", null, Array.isArray(value) && value.length > 0 ? value.map(function (item) {\n    return item[name];\n  }).join(\", \") : value))));\n}\n\n//# sourceURL=webpack://RPB/./src/Index.tsx?");
 
 /***/ }),
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pocko-ui",
-  "version": "1.0.20",
+  "version": "1.0.22",
   "description": "React components using pure Bootstrap 5+ which does not contain any external style and script libraries.",
   "main": "index.js",
   "scripts": {