chenw-tool/pocket-selectInput/pocket-selectInput.js

React components using pure Bootstrap 5+ which does not contain any external style and script libraries.

/*
 * ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
 * This devtool is neither made for production nor for readable output files.
 * It uses "eval()" calls to create a separate source file in the browser devtools.
 * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
 * or disable the default devtool with "devtool: false".
 * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
 */
(function webpackUniversalModuleDefinition(root, factory) {
	if(typeof exports === 'object' && typeof module === 'object')
		module.exports = factory(require("react"), require("react-dom"));
	else if(typeof define === 'function' && define.amd)
		define("mySelectInput", ["react", "react-dom"], factory);
	else if(typeof exports === 'object')
		exports["mySelectInput"] = factory(require("react"), require("react-dom"));
	else
		root["mySelectInput"] = factory(root["react"], root["react-dom"]);
})(this, (__WEBPACK_EXTERNAL_MODULE_react__, __WEBPACK_EXTERNAL_MODULE_react_dom__) => {
return /******/ (() => { // webpackBootstrap
/******/ 	"use strict";
/******/ 	var __webpack_modules__ = ({

/***/ "./node_modules/body-scroll-lock/lib/bodyScrollLock.esm.js":
/*!*****************************************************************!*\
  !*** ./node_modules/body-scroll-lock/lib/bodyScrollLock.esm.js ***!
  \*****************************************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   clearAllBodyScrollLocks: () => (/* binding */ clearAllBodyScrollLocks),\n/* harmony export */   disableBodyScroll: () => (/* binding */ disableBodyScroll),\n/* harmony export */   enableBodyScroll: () => (/* binding */ enableBodyScroll)\n/* harmony export */ });\nfunction _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }\n\n// Older browsers don't support event options, feature detect it.\n\n// Adopted and modified solution from Bohdan Didukh (2017)\n// https://stackoverflow.com/questions/41594997/ios-10-safari-prevent-scrolling-behind-a-fixed-overlay-and-maintain-scroll-posi\n\nvar hasPassiveEvents = false;\nif (typeof window !== 'undefined') {\n  var passiveTestOptions = {\n    get passive() {\n      hasPassiveEvents = true;\n      return undefined;\n    }\n  };\n  window.addEventListener('testPassive', null, passiveTestOptions);\n  window.removeEventListener('testPassive', null, passiveTestOptions);\n}\n\nvar isIosDevice = typeof window !== 'undefined' && window.navigator && window.navigator.platform && (/iP(ad|hone|od)/.test(window.navigator.platform) || window.navigator.platform === 'MacIntel' && window.navigator.maxTouchPoints > 1);\n\n\nvar locks = [];\nvar documentListenerAdded = false;\nvar initialClientY = -1;\nvar previousBodyOverflowSetting = void 0;\nvar previousBodyPosition = void 0;\nvar previousBodyPaddingRight = void 0;\n\n// returns true if `el` should be allowed to receive touchmove events.\nvar allowTouchMove = function allowTouchMove(el) {\n  return locks.some(function (lock) {\n    if (lock.options.allowTouchMove && lock.options.allowTouchMove(el)) {\n      return true;\n    }\n\n    return false;\n  });\n};\n\nvar preventDefault = function preventDefault(rawEvent) {\n  var e = rawEvent || window.event;\n\n  // For the case whereby consumers adds a touchmove event listener to document.\n  // Recall that we do document.addEventListener('touchmove', preventDefault, { passive: false })\n  // in disableBodyScroll - so if we provide this opportunity to allowTouchMove, then\n  // the touchmove event on document will break.\n  if (allowTouchMove(e.target)) {\n    return true;\n  }\n\n  // Do not prevent if the event has more than one touch (usually meaning this is a multi touch gesture like pinch to zoom).\n  if (e.touches.length > 1) return true;\n\n  if (e.preventDefault) e.preventDefault();\n\n  return false;\n};\n\nvar setOverflowHidden = function setOverflowHidden(options) {\n  // If previousBodyPaddingRight is already set, don't set it again.\n  if (previousBodyPaddingRight === undefined) {\n    var _reserveScrollBarGap = !!options && options.reserveScrollBarGap === true;\n    var scrollBarGap = window.innerWidth - document.documentElement.clientWidth;\n\n    if (_reserveScrollBarGap && scrollBarGap > 0) {\n      var computedBodyPaddingRight = parseInt(window.getComputedStyle(document.body).getPropertyValue('padding-right'), 10);\n      previousBodyPaddingRight = document.body.style.paddingRight;\n      document.body.style.paddingRight = computedBodyPaddingRight + scrollBarGap + 'px';\n    }\n  }\n\n  // If previousBodyOverflowSetting is already set, don't set it again.\n  if (previousBodyOverflowSetting === undefined) {\n    previousBodyOverflowSetting = document.body.style.overflow;\n    document.body.style.overflow = 'hidden';\n  }\n};\n\nvar restoreOverflowSetting = function restoreOverflowSetting() {\n  if (previousBodyPaddingRight !== undefined) {\n    document.body.style.paddingRight = previousBodyPaddingRight;\n\n    // Restore previousBodyPaddingRight to undefined so setOverflowHidden knows it\n    // can be set again.\n    previousBodyPaddingRight = undefined;\n  }\n\n  if (previousBodyOverflowSetting !== undefined) {\n    document.body.style.overflow = previousBodyOverflowSetting;\n\n    // Restore previousBodyOverflowSetting to undefined\n    // so setOverflowHidden knows it can be set again.\n    previousBodyOverflowSetting = undefined;\n  }\n};\n\nvar setPositionFixed = function setPositionFixed() {\n  return window.requestAnimationFrame(function () {\n    // If previousBodyPosition is already set, don't set it again.\n    if (previousBodyPosition === undefined) {\n      previousBodyPosition = {\n        position: document.body.style.position,\n        top: document.body.style.top,\n        left: document.body.style.left\n      };\n\n      // Update the dom inside an animation frame \n      var _window = window,\n          scrollY = _window.scrollY,\n          scrollX = _window.scrollX,\n          innerHeight = _window.innerHeight;\n\n      document.body.style.position = 'fixed';\n      document.body.style.top = -scrollY;\n      document.body.style.left = -scrollX;\n\n      setTimeout(function () {\n        return window.requestAnimationFrame(function () {\n          // Attempt to check if the bottom bar appeared due to the position change\n          var bottomBarHeight = innerHeight - window.innerHeight;\n          if (bottomBarHeight && scrollY >= innerHeight) {\n            // Move the content further up so that the bottom bar doesn't hide it\n            document.body.style.top = -(scrollY + bottomBarHeight);\n          }\n        });\n      }, 300);\n    }\n  });\n};\n\nvar restorePositionSetting = function restorePositionSetting() {\n  if (previousBodyPosition !== undefined) {\n    // Convert the position from \"px\" to Int\n    var y = -parseInt(document.body.style.top, 10);\n    var x = -parseInt(document.body.style.left, 10);\n\n    // Restore styles\n    document.body.style.position = previousBodyPosition.position;\n    document.body.style.top = previousBodyPosition.top;\n    document.body.style.left = previousBodyPosition.left;\n\n    // Restore scroll\n    window.scrollTo(x, y);\n\n    previousBodyPosition = undefined;\n  }\n};\n\n// https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight#Problems_and_solutions\nvar isTargetElementTotallyScrolled = function isTargetElementTotallyScrolled(targetElement) {\n  return targetElement ? targetElement.scrollHeight - targetElement.scrollTop <= targetElement.clientHeight : false;\n};\n\nvar handleScroll = function handleScroll(event, targetElement) {\n  var clientY = event.targetTouches[0].clientY - initialClientY;\n\n  if (allowTouchMove(event.target)) {\n    return false;\n  }\n\n  if (targetElement && targetElement.scrollTop === 0 && clientY > 0) {\n    // element is at the top of its scroll.\n    return preventDefault(event);\n  }\n\n  if (isTargetElementTotallyScrolled(targetElement) && clientY < 0) {\n    // element is at the bottom of its scroll.\n    return preventDefault(event);\n  }\n\n  event.stopPropagation();\n  return true;\n};\n\nvar disableBodyScroll = function disableBodyScroll(targetElement, options) {\n  // targetElement must be provided\n  if (!targetElement) {\n    // eslint-disable-next-line no-console\n    console.error('disableBodyScroll unsuccessful - targetElement must be provided when calling disableBodyScroll on IOS devices.');\n    return;\n  }\n\n  // disableBodyScroll must not have been called on this targetElement before\n  if (locks.some(function (lock) {\n    return lock.targetElement === targetElement;\n  })) {\n    return;\n  }\n\n  var lock = {\n    targetElement: targetElement,\n    options: options || {}\n  };\n\n  locks = [].concat(_toConsumableArray(locks), [lock]);\n\n  if (isIosDevice) {\n    setPositionFixed();\n  } else {\n    setOverflowHidden(options);\n  }\n\n  if (isIosDevice) {\n    targetElement.ontouchstart = function (event) {\n      if (event.targetTouches.length === 1) {\n        // detect single touch.\n        initialClientY = event.targetTouches[0].clientY;\n      }\n    };\n    targetElement.ontouchmove = function (event) {\n      if (event.targetTouches.length === 1) {\n        // detect single touch.\n        handleScroll(event, targetElement);\n      }\n    };\n\n    if (!documentListenerAdded) {\n      document.addEventListener('touchmove', preventDefault, hasPassiveEvents ? { passive: false } : undefined);\n      documentListenerAdded = true;\n    }\n  }\n};\n\nvar clearAllBodyScrollLocks = function clearAllBodyScrollLocks() {\n  if (isIosDevice) {\n    // Clear all locks ontouchstart/ontouchmove handlers, and the references.\n    locks.forEach(function (lock) {\n      lock.targetElement.ontouchstart = null;\n      lock.targetElement.ontouchmove = null;\n    });\n\n    if (documentListenerAdded) {\n      document.removeEventListener('touchmove', preventDefault, hasPassiveEvents ? { passive: false } : undefined);\n      documentListenerAdded = false;\n    }\n\n    // Reset initial clientY.\n    initialClientY = -1;\n  }\n\n  if (isIosDevice) {\n    restorePositionSetting();\n  } else {\n    restoreOverflowSetting();\n  }\n\n  locks = [];\n};\n\nvar enableBodyScroll = function enableBodyScroll(targetElement) {\n  if (!targetElement) {\n    // eslint-disable-next-line no-console\n    console.error('enableBodyScroll unsuccessful - targetElement must be provided when calling enableBodyScroll on IOS devices.');\n    return;\n  }\n\n  locks = locks.filter(function (lock) {\n    return lock.targetElement !== targetElement;\n  });\n\n  if (isIosDevice) {\n    targetElement.ontouchstart = null;\n    targetElement.ontouchmove = null;\n\n    if (documentListenerAdded && locks.length === 0) {\n      document.removeEventListener('touchmove', preventDefault, hasPassiveEvents ? { passive: false } : undefined);\n      documentListenerAdded = false;\n    }\n  }\n\n  if (isIosDevice) {\n    restorePositionSetting();\n  } else {\n    restoreOverflowSetting();\n  }\n};\n\n\n\n//# sourceURL=webpack://mySelectInput/./node_modules/body-scroll-lock/lib/bodyScrollLock.esm.js?");

/***/ }),

/***/ "./src/SelectInput.scss":
/*!******************************!*\
  !*** ./src/SelectInput.scss ***!
  \******************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

eval("__webpack_require__.r(__webpack_exports__);\n// extracted by mini-css-extract-plugin\n\n\n//# sourceURL=webpack://mySelectInput/./src/SelectInput.scss?");

/***/ }),

/***/ "./src/SelectInput.tsx":
/*!*****************************!*\
  !*** ./src/SelectInput.tsx ***!
  \*****************************/
/***/ ((__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 _SelectInput_scss__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./SelectInput.scss */ \"./src/SelectInput.scss\");\nvar __spreadArray = (undefined && undefined.__spreadArray) || function (to, from, pack) {\n    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {\n        if (ar || !(i in from)) {\n            if (!ar) ar = Array.prototype.slice.call(from, 0, i);\n            ar[i] = from[i];\n        }\n    }\n    return to.concat(ar || Array.prototype.slice.call(from));\n};\n\n\n\n// my-utils\n\n\n\n\nfunction SelectInput(_a) {\n    var _b, _c;\n    var _d = _a.type, type = _d === void 0 ? \"COMMON\" : _d, label = _a.label, wrapperClassName = _a.wrapperClassName, wrapperConentInputClassName = _a.wrapperConentInputClassName, popupMenuClassName = _a.popupMenuClassName, id = _a.id, name = _a.name, _e = _a.kbcode, kbcode = _e === void 0 ? \"kb_code\" : _e, dropdownRender = _a.dropdownRender, inputId = _a.inputId, titleId = _a.titleId, defaultValue = _a.defaultValue, index = _a.index, onChange = _a.onChange, onKeyDown = _a.onKeyDown, _f = _a.size, size = _f === void 0 ? \"auto\" : _f, _g = _a.zIndex, zIndex = _g === void 0 ? 1101 : _g, _h = _a.isHandleInput, isHandleInput = _h === void 0 ? false : _h, _j = _a.isDisableBodyScroll, isDisableBodyScroll = _j === void 0 ? false : _j, dataService = _a.dataService, _k = _a.dataServiceFunction, dataServiceFunction = _k === void 0 ? \"retrieveList\" : _k, // 默认调用 retrieveList 函数\n    dataServiceFunctionParams = _a.dataServiceFunctionParams, // 调用函数的传参\n    _l = _a.dataServiceRetrieve, // 调用函数的传参\n    dataServiceRetrieve = _l === void 0 ? false : _l;\n    var _m = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(\"\"), keyword = _m[0], setKeyword = _m[1];\n    var _o = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(\"\"), value = _o[0], setValue = _o[1];\n    var _p = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false), isShow = _p[0], setIsShow = _p[1];\n    var _q = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false), loading = _q[0], setLoading = _q[1];\n    // 调用dataService获取的值\n    var _r = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)([]), dataServiceList = _r[0], setDataServiceList = _r[1];\n    var _s = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)([]), initialData = _s[0], setInitialData = _s[1]; // 用来保存初始接口数据\n    var _t = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false), hasFetchedData = _t[0], setHasFetchedData = _t[1]; // 判断是否已经调用过接口\n    // 判断下拉框位置\n    var _u = (0,_utils_userDropDown__WEBPACK_IMPORTED_MODULE_4__.useDropdown)(isShow, setIsShow, dataServiceList, loading), dropdown = _u.dropdown, dropdownContent = _u.dropdownContent;\n    // 键盘逻辑\n    var _v = (0,_utils_useKeyboardNavigation__WEBPACK_IMPORTED_MODULE_3__.useKeyboardNavigation)(dataServiceList.length, function (index) { return chooseOption(dataServiceList[index]); }, onKeyDown), focusedOption = _v.focusedOption, setFocusedOption = _v.setFocusedOption, handleKeyDown = _v.handleKeyDown, handleOptionFocus = _v.handleOptionFocus, handleOptionBlur = _v.handleOptionBlur;\n    var dropDownList = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(function () { return dataServiceList; }, [dataServiceList]);\n    // input框输入\n    var handleInputChange = function (event) {\n        var newValue = event.target.value.trim().toLowerCase();\n        setKeyword(newValue);\n        // 当允许手动输入时，触发 onChange 事件，将输入值传递给父组件\n        if (isHandleInput) {\n            if (index) {\n                onChange(newValue, index);\n            }\n            else {\n                onChange(newValue);\n            }\n        }\n    };\n    // 单选选择option\n    function chooseOption(item) {\n        setIsShow(false);\n        if (index) {\n            onChange(item, index);\n        }\n        else {\n            onChange(item);\n        }\n        setValue(item[name]);\n        setKeyword(\"\"); // 清空关键词以重置列表\n        setFocusedOption(null); // 重置焦点选项为 null\n        // 失去焦点\n        setTimeout(function () {\n            var input = document.getElementById(\"\".concat(inputId));\n            input.blur();\n        }, 0);\n    }\n    // 多选判断是否勾选\n    function toggleSelection(item) {\n        var exists = value.some(function (i) { return i[id] === item[id]; });\n        var newValue;\n        if (exists) {\n            newValue = value.filter(function (i) { return i[id] !== item[id]; });\n        }\n        else {\n            newValue = __spreadArray(__spreadArray([], value, true), [item], false);\n        }\n        setValue(newValue);\n        if (index) {\n            onChange(newValue, index);\n        }\n        else {\n            onChange(newValue);\n        }\n        // 如果需要向父组件传递多选结果，可以在此调用 onChange\n        // onChange(newValue)\n    }\n    // 检索\n    var handleSearch = function (keyword, searchArray) {\n        var filteredList = searchArray.filter(function (obj) {\n            var _a;\n            var nameMatch = obj[name] ? (_a = obj[name]) === null || _a === void 0 ? void 0 : _a.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 = __spreadArray([], (dataServiceFunctionParams || []), true);\n                // 检查是否有 $QUERY_STRING，如果有，替换 keyword\n                var queryIndex = params.indexOf(\"$QUERY_STRING\");\n                if (queryIndex !== -1) {\n                    params[queryIndex] = keyword || \"*\"; // 替换为 keyword 或 '*'\n                }\n                // 如果该参数是true，则代表是retrieve接口，实时搜索\n                if (dataServiceRetrieve) {\n                    dataService[dataServiceFunction].apply(dataService, params).then(function (result) {\n                        if (result.length > 0) {\n                            setDataServiceList(result);\n                        }\n                        else {\n                            setDataServiceList([]);\n                        }\n                    })\n                        .finally(function () {\n                        setLoading(false);\n                    });\n                }\n                else {\n                    if (!hasFetchedData) {\n                        // 如果没有调用过接口，则调用一次\n                        dataService[dataServiceFunction].apply(dataService, params).then(function (result) {\n                            setHasFetchedData(true); // 标记已经获取过数据\n                            if (result.length > 0) {\n                                setInitialData(result); // 保存原始数据\n                                setDataServiceList(result);\n                            }\n                            else {\n                                setDataServiceList([]);\n                                setInitialData([]);\n                            }\n                        })\n                            .finally(function () {\n                            setLoading(false);\n                        });\n                    }\n                    else {\n                        // 本地过滤检索\n                        var filteredList = handleSearch(keyword, initialData);\n                        setDataServiceList(filteredList);\n                        setLoading(false);\n                    }\n                }\n            }\n            else {\n                var filteredList = handleSearch(keyword, dropdownRender);\n                setDataServiceList(filteredList);\n                setLoading(false);\n            }\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            // 根据 defaultValue 找到对应的选项索引，并设置 focusedOption\n            var defaultOptionIndex = renderList.findIndex(function (item) { return item[name] === defaultValue; });\n            if (defaultOptionIndex !== -1) {\n                setFocusedOption(defaultOptionIndex);\n            }\n            else {\n                setFocusedOption(null); // 如果没有找到匹配项，重置为 null\n            }\n        }\n        else {\n            setValue(\"\");\n            setFocusedOption(null); // 没有默认值时，重置 focusedOption\n        }\n    }, [defaultValue, dropDownList, dropdownRender]);\n    return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: (0,_utils_cls__WEBPACK_IMPORTED_MODULE_5__.clsCombine)(wrapperClassName, \"select-input__wrapper\") },\n        label ? (react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, typeof label === \"string\" ? react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"label\", null, label) : label)) : null,\n        react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"select-input__content\", style: { width: size === \"auto\" ? \"auto\" : \"\".concat(size, \"px\") }, ref: dropdown },\n            react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"input\", { type: \"text\", onChange: handleInputChange, id: inputId, className: (0,_utils_cls__WEBPACK_IMPORTED_MODULE_5__.clsCombine)((0,_utils_cls__WEBPACK_IMPORTED_MODULE_5__.clsWrite)(wrapperConentInputClassName, \"form-control\"), \"select-input__content__input\"), onFocus: function () {\n                    var targetElement = document.body;\n                    if (isDisableBodyScroll) {\n                        (0,body_scroll_lock__WEBPACK_IMPORTED_MODULE_2__.disableBodyScroll)(targetElement);\n                    }\n                    if (type === \"MULTI\") {\n                        setKeyword(\"\");\n                    }\n                    setIsShow(true);\n                    var title = document.getElementById(\"\".concat(titleId));\n                    title.classList.add(\"text-secondary-emphasis\", \"z-n1\");\n                }, onBlur: function () {\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                    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                }, onKeyDown: handleKeyDown, autoComplete: \"off\" }),\n            react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"span\", { className: \"select-input__content__arrow \".concat(isShow ? \"select-input__content__arrow--reverse\" : \"\") },\n                react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"svg\", { width: \"10px\", height: \"10px\", viewBox: \"0 -4.5 20 20\" },\n                    react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"g\", { stroke: \"none\", \"stroke-width\": \"1\", fill: \"none\" },\n                        react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"g\", { transform: \"translate(-180.000000, -6684.000000)\", className: \"arrow-fill-g\", fill: \"#a5a5a5\" },\n                            react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"g\", { transform: \"translate(56.000000, 160.000000)\" },\n                                react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"path\", { 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 &&\n                (0,react_dom__WEBPACK_IMPORTED_MODULE_1__.createPortal)(react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { ref: dropdownContent, 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)), style: {\n                        zIndex: \"\".concat(zIndex),\n                        width: \"\".concat((_b = dropdown.current) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect().width, \"px\"),\n                    } }, loading && dataService ? (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"select-input__popup__list py-1 px-1\" }, \"\\u52A0\\u8F7D\\u4E2D...\")) : dropDownList.length !== 0 ? (type === \"COMMON\" ? (dropDownList === null || dropDownList === void 0 ? void 0 : dropDownList.map(function (item, index) {\n                    return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"select-input__popup__list py-1 px-1 \".concat(index + 1 === dropDownList.length\n                            ? \"\"\n                            : \"border-bottom\", \" \").concat(focusedOption === index ? \"text-bg-primary\" : \"\"), key: item[id] || \"\", onClick: function (e) {\n                            e.stopPropagation();\n                            chooseOption(item);\n                        }, onFocus: function () { return handleOptionFocus(item); }, onBlur: handleOptionBlur, \"data-id\": item[id], \"data-name\": item[name] }, item[name]));\n                })) : (dropDownList === null || dropDownList === void 0 ? void 0 : dropDownList.map(function (item, index) {\n                    return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"select-input__popup__list py-1 px-1 \".concat(index + 1 === dropDownList.length\n                            ? \"\"\n                            : \"border-bottom\", \" \").concat(focusedOption === index ? \"text-bg-primary\" : \"\"), key: item[id] || \"\", onClick: function (e) {\n                            e.stopPropagation();\n                            toggleSelection(item);\n                        }, onFocus: function () { return handleOptionFocus(item); }, onBlur: handleOptionBlur, \"data-id\": item[id], \"data-name\": item[name] },\n                        react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"input\", { type: \"checkbox\", className: \"form-check-input me-2\", onClick: function (e) { return e.stopPropagation(); }, checked: value.some(function (i) { return i[id] === item[id]; }), onChange: function () { return toggleSelection(item); } }),\n                        item[name]));\n                }))) : (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"select-input__popup__list py-1 px-1\" }, \"\\u6CA1\\u6709\\u66F4\\u591A\\u6570\\u636E\"))), document.body),\n            react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { id: \"\".concat(titleId), className: \"position-absolute ms-2 select-input__content__word__container\", style: {\n                    transform: \"translateY(-50%)\",\n                    top: \"50%\",\n                    width: \"\".concat((_c = dropdown.current) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect().width, \"px\"),\n                }, onClick: function () {\n                    var input = document.getElementById(\"\".concat(inputId));\n                    input.focus();\n                }, title: Array.isArray(value) && value.length > 0\n                    ? value.map(function (item) { return item[name]; }).join(\", \")\n                    : value }, type === \"COMMON\" ? (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"span\", null, value)) : (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"span\", null, Array.isArray(value) && value.length > 0\n                ? value.map(function (item) { return item[name]; }).join(\", \")\n                : value))))));\n}\n\n\n//# sourceURL=webpack://mySelectInput/./src/SelectInput.tsx?");

/***/ }),

/***/ "./src/utils/useKeyboardNavigation.ts":
/*!********************************************!*\
  !*** ./src/utils/useKeyboardNavigation.ts ***!
  \********************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   useKeyboardNavigation: () => (/* binding */ useKeyboardNavigation)\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\nvar useKeyboardNavigation = function (optionsCount, chooseOption, onKeyDown) {\n    var _a = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(null), focusedOption = _a[0], setFocusedOption = _a[1];\n    var handleKeyDown = function (event) {\n        var key = event.key;\n        switch (key) {\n            case \"ArrowUp\":\n                event.preventDefault();\n                setFocusedOption(function (prev) {\n                    return prev === null\n                        ? optionsCount - 1\n                        : (prev - 1 + optionsCount) % optionsCount;\n                });\n                break;\n            case \"ArrowDown\":\n                event.preventDefault();\n                setFocusedOption(function (prev) {\n                    return prev === null ? 0 : (prev + 1) % optionsCount;\n                });\n                break;\n            case \"Enter\":\n                if (focusedOption !== null) {\n                    chooseOption(focusedOption);\n                }\n                break;\n            default:\n                break;\n        }\n        // 回调函数，传键盘按下的值\n        if (onKeyDown) {\n            onKeyDown(event);\n        }\n    };\n    (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {\n        var visibleItems = document.querySelectorAll(\".select-input__popup__list\");\n        if (focusedOption !== null && visibleItems[focusedOption]) {\n            visibleItems[focusedOption].scrollIntoView({\n                behavior: \"smooth\",\n                block: \"center\",\n                inline: \"nearest\",\n            });\n        }\n    }, [focusedOption]);\n    // 设置焦点选项\n    function handleOptionFocus(item) {\n        setFocusedOption(item);\n    }\n    // 清除焦点选项\n    function handleOptionBlur() {\n        setFocusedOption(null);\n    }\n    return {\n        focusedOption: focusedOption,\n        setFocusedOption: setFocusedOption,\n        handleKeyDown: handleKeyDown,\n        handleOptionFocus: handleOptionFocus,\n        handleOptionBlur: handleOptionBlur,\n    };\n};\n\n\n//# sourceURL=webpack://mySelectInput/./src/utils/useKeyboardNavigation.ts?");

/***/ }),

/***/ "./src/utils/userDropDown.ts":
/*!***********************************!*\
  !*** ./src/utils/userDropDown.ts ***!
  \***********************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   useDropdown: () => (/* binding */ useDropdown)\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\nvar useDropdown = function (isShow, setIsShow, dropDownList, // 添加下拉框内容作为参数\nloading) {\n    var dropdown = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n    var dropdownContent = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n    var adjustDropdownPosition = function () {\n        if (dropdownContent.current && dropdown.current) {\n            var dropdownRect = dropdown.current.getBoundingClientRect();\n            var scrollX_1 = window.pageXOffset || document.documentElement.scrollLeft;\n            var scrollY_1 = window.pageYOffset || document.documentElement.scrollTop;\n            var viewportHeight = window.innerHeight;\n            var spaceBelow = viewportHeight - dropdownRect.bottom - 20;\n            var spaceAbove = dropdownRect.top - 20;\n            var positionTop = void 0;\n            if (spaceBelow < 100 && spaceAbove > spaceBelow) {\n                // 显示在上方\n                positionTop = \"\".concat(dropdownRect.top + scrollY_1 - dropdownContent.current.offsetHeight, \"px\");\n                dropdownContent.current.style.maxHeight = \"\".concat(Math.min(200, spaceAbove), \"px\");\n            }\n            else {\n                // 显示在下方\n                positionTop = \"\".concat(dropdownRect.bottom + scrollY_1, \"px\");\n                dropdownContent.current.style.maxHeight = \"\".concat(Math.min(200, spaceBelow), \"px\");\n            }\n            dropdownContent.current.style.left = \"\".concat(dropdownRect.left + scrollX_1, \"px\");\n            dropdownContent.current.style.top = positionTop;\n        }\n    };\n    (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {\n        if (isShow) {\n            adjustDropdownPosition();\n        }\n    }, [isShow, dropDownList.length, loading]);\n    (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {\n        var handleClickOutside = function (event) {\n            if (isShow &&\n                dropdown.current !== event.target &&\n                !dropdown.current.contains(event.target) &&\n                dropdownContent.current !== event.target &&\n                !dropdownContent.current.contains(event.target)) {\n                setIsShow(false);\n            }\n        };\n        document.addEventListener(\"pointerdown\", handleClickOutside);\n        return function () {\n            document.removeEventListener(\"pointerdown\", handleClickOutside);\n        };\n    }, [isShow]);\n    return { dropdown: dropdown, dropdownContent: dropdownContent };\n};\n\n\n//# sourceURL=webpack://mySelectInput/./src/utils/userDropDown.ts?");

/***/ }),

/***/ "../utils/cls.ts":
/*!***********************!*\
  !*** ../utils/cls.ts ***!
  \***********************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   clsCombine: () => (/* binding */ clsCombine),\n/* harmony export */   clsWrite: () => (/* binding */ clsWrite)\n/* harmony export */ });\nfunction clsWrite(s, defaultCls, targetCls) {\n    if (s || s === \"\") {\n        return targetCls !== undefined ? targetCls : s;\n    }\n    return defaultCls;\n}\nfunction clsCombine() {\n    var classes = [];\n    for (var _i = 0; _i < arguments.length; _i++) {\n        classes[_i] = arguments[_i];\n    }\n    return classes\n        .map(function (cls) {\n        if (typeof cls === \"string\") {\n            return cls;\n        }\n        else if (typeof cls === \"object\" && cls !== null) {\n            return Object.keys(cls)\n                .filter(function (key) { return cls[key]; }) // 仅选择值为 true 的类名\n                .join(\" \");\n        }\n        return \"\";\n    })\n        .filter(Boolean) // 过滤掉 falsy 值\n        .join(\" \"); // 用空格连接\n}\n\n\n\n//# sourceURL=webpack://mySelectInput/../utils/cls.ts?");

/***/ }),

/***/ "react":
/*!************************!*\
  !*** external "react" ***!
  \************************/
/***/ ((module) => {

module.exports = __WEBPACK_EXTERNAL_MODULE_react__;

/***/ }),

/***/ "react-dom":
/*!****************************!*\
  !*** external "react-dom" ***!
  \****************************/
/***/ ((module) => {

module.exports = __WEBPACK_EXTERNAL_MODULE_react_dom__;

/***/ })

/******/ 	});
/************************************************************************/
/******/ 	// The module cache
/******/ 	var __webpack_module_cache__ = {};
/******/ 	
/******/ 	// The require function
/******/ 	function __webpack_require__(moduleId) {
/******/ 		// Check if module is in cache
/******/ 		var cachedModule = __webpack_module_cache__[moduleId];
/******/ 		if (cachedModule !== undefined) {
/******/ 			return cachedModule.exports;
/******/ 		}
/******/ 		// Create a new module (and put it into the cache)
/******/ 		var module = __webpack_module_cache__[moduleId] = {
/******/ 			// no module.id needed
/******/ 			// no module.loaded needed
/******/ 			exports: {}
/******/ 		};
/******/ 	
/******/ 		// Execute the module function
/******/ 		__webpack_modules__[moduleId](module, module.exports, __webpack_require__);
/******/ 	
/******/ 		// Return the exports of the module
/******/ 		return module.exports;
/******/ 	}
/******/ 	
/************************************************************************/
/******/ 	/* webpack/runtime/compat get default export */
/******/ 	(() => {
/******/ 		// getDefaultExport function for compatibility with non-harmony modules
/******/ 		__webpack_require__.n = (module) => {
/******/ 			var getter = module && module.__esModule ?
/******/ 				() => (module['default']) :
/******/ 				() => (module);
/******/ 			__webpack_require__.d(getter, { a: getter });
/******/ 			return getter;
/******/ 		};
/******/ 	})();
/******/ 	
/******/ 	/* webpack/runtime/define property getters */
/******/ 	(() => {
/******/ 		// define getter functions for harmony exports
/******/ 		__webpack_require__.d = (exports, definition) => {
/******/ 			for(var key in definition) {
/******/ 				if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
/******/ 					Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
/******/ 				}
/******/ 			}
/******/ 		};
/******/ 	})();
/******/ 	
/******/ 	/* webpack/runtime/hasOwnProperty shorthand */
/******/ 	(() => {
/******/ 		__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
/******/ 	})();
/******/ 	
/******/ 	/* webpack/runtime/make namespace object */
/******/ 	(() => {
/******/ 		// define __esModule on exports
/******/ 		__webpack_require__.r = (exports) => {
/******/ 			if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ 				Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ 			}
/******/ 			Object.defineProperty(exports, '__esModule', { value: true });
/******/ 		};
/******/ 	})();
/******/ 	
/************************************************************************/
/******/ 	
/******/ 	// startup
/******/ 	// Load entry module and return exports
/******/ 	// This entry module can't be inlined because the eval devtool is used.
/******/ 	var __webpack_exports__ = __webpack_require__("./src/SelectInput.tsx");
/******/ 	
/******/ 	return __webpack_exports__;
/******/ })()
;
});