@sunggang/ui-lib 0.4.63 → 0.4.65

package/Form.cjs.js

@@ -280,16 +280,16 @@ function getFrameElement(win) {
     return win.parent && Object.getPrototypeOf(win.parent) ? win.frameElement : null;
 }
 
-function _array_like_to_array$7(arr, len) {
+function _array_like_to_array$8(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
     return arr2;
 }
-function _array_with_holes$7(arr) {
+function _array_with_holes$8(arr) {
     if (Array.isArray(arr)) return arr;
 }
 function _array_without_holes(arr) {
-    if (Array.isArray(arr)) return _array_like_to_array$7(arr);
+    if (Array.isArray(arr)) return _array_like_to_array$8(arr);
 }
 function _define_property$3(obj, key, value) {
     if (key in obj) {
@@ -307,7 +307,7 @@ function _define_property$3(obj, key, value) {
 function _iterable_to_array(iter) {
     if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
 }
-function _iterable_to_array_limit$7(arr, i) {
+function _iterable_to_array_limit$8(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
     var _arr = [];
@@ -331,7 +331,7 @@ function _iterable_to_array_limit$7(arr, i) {
     }
     return _arr;
 }
-function _non_iterable_rest$7() {
+function _non_iterable_rest$8() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
 function _non_iterable_spread() {
@@ -376,19 +376,19 @@ function _object_spread_props$3(target, source) {
     }
     return target;
 }
-function _sliced_to_array$7(arr, i) {
-    return _array_with_holes$7(arr) || _iterable_to_array_limit$7(arr, i) || _unsupported_iterable_to_array$7(arr, i) || _non_iterable_rest$7();
+function _sliced_to_array$8(arr, i) {
+    return _array_with_holes$8(arr) || _iterable_to_array_limit$8(arr, i) || _unsupported_iterable_to_array$8(arr, i) || _non_iterable_rest$8();
 }
 function _to_consumable_array(arr) {
-    return _array_without_holes(arr) || _iterable_to_array(arr) || _unsupported_iterable_to_array$7(arr) || _non_iterable_spread();
+    return _array_without_holes(arr) || _iterable_to_array(arr) || _unsupported_iterable_to_array$8(arr) || _non_iterable_spread();
 }
-function _unsupported_iterable_to_array$7(o, minLen) {
+function _unsupported_iterable_to_array$8(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$7(o, minLen);
+    if (typeof o === "string") return _array_like_to_array$8(o, minLen);
     var n = Object.prototype.toString.call(o).slice(8, -1);
     if (n === "Object" && o.constructor) n = o.constructor.name;
     if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$7(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$8(o, minLen);
 }
 function getCssDimensions(element) {
     var css = getComputedStyle$1(element);
@@ -614,7 +614,7 @@ function observeMove(element, onMove) {
     var resizeObserver = null;
     if (elementResize) {
         resizeObserver = new ResizeObserver(function(_ref) {
-            var _$_ref = _sliced_to_array$7(_ref, 1), firstEntry = _$_ref[0];
+            var _$_ref = _sliced_to_array$8(_ref, 1), firstEntry = _$_ref[0];
             if (firstEntry && firstEntry.target === referenceEl && resizeObserver) {
                 // Prevent update loops when using the `size` middleware.
                 // https://github.com/floating-ui/floating-ui/issues/1740
@@ -6132,12 +6132,12 @@ styledComponents_esm.dt.div(_templateObject4(), function(props) {
 });
 var StyleText = styledComponents_esm.dt.div(_templateObject5());
 
-/* eslint-disable react/jsx-props-no-spreading */ function _array_like_to_array$6(arr, len) {
+/* eslint-disable react/jsx-props-no-spreading */ function _array_like_to_array$7(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
     return arr2;
 }
-function _array_with_holes$6(arr) {
+function _array_with_holes$7(arr) {
     if (Array.isArray(arr)) return arr;
 }
 function _define_property$2(obj, key, value) {
@@ -6153,7 +6153,7 @@ function _define_property$2(obj, key, value) {
     }
     return obj;
 }
-function _iterable_to_array_limit$6(arr, i) {
+function _iterable_to_array_limit$7(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
     var _arr = [];
@@ -6177,7 +6177,7 @@ function _iterable_to_array_limit$6(arr, i) {
     }
     return _arr;
 }
-function _non_iterable_rest$6() {
+function _non_iterable_rest$7() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
 function _object_spread$2(target) {
@@ -6219,16 +6219,16 @@ function _object_spread_props$2(target, source) {
     }
     return target;
 }
-function _sliced_to_array$6(arr, i) {
-    return _array_with_holes$6(arr) || _iterable_to_array_limit$6(arr, i) || _unsupported_iterable_to_array$6(arr, i) || _non_iterable_rest$6();
+function _sliced_to_array$7(arr, i) {
+    return _array_with_holes$7(arr) || _iterable_to_array_limit$7(arr, i) || _unsupported_iterable_to_array$7(arr, i) || _non_iterable_rest$7();
 }
-function _unsupported_iterable_to_array$6(o, minLen) {
+function _unsupported_iterable_to_array$7(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$6(o, minLen);
+    if (typeof o === "string") return _array_like_to_array$7(o, minLen);
     var n = Object.prototype.toString.call(o).slice(8, -1);
     if (n === "Object" && o.constructor) n = o.constructor.name;
     if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$6(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$7(o, minLen);
 }
 // interface CityDistrictProps {
 //   item?: {
@@ -6257,9 +6257,9 @@ var CityDistrict = function(param) {
     var item = param.item;
     var _errors_city, _errors_district;
     var _useFormContext = index_esm.useFormContext(), register = _useFormContext.register, setValue = _useFormContext.setValue, getValues = _useFormContext.getValues, errors = _useFormContext.formState.errors;
-    var _useState = _sliced_to_array$6(React.useState(null), 2), currentCity = _useState[0], setCurrentCity = _useState[1];
-    var _useState1 = _sliced_to_array$6(React.useState(DistrictData), 1), city = _useState1[0];
-    var _useState2 = _sliced_to_array$6(React.useState([]), 2), district = _useState2[0], setDistrict = _useState2[1];
+    var _useState = _sliced_to_array$7(React.useState(null), 2), currentCity = _useState[0], setCurrentCity = _useState[1];
+    var _useState1 = _sliced_to_array$7(React.useState(DistrictData), 1), city = _useState1[0];
+    var _useState2 = _sliced_to_array$7(React.useState([]), 2), district = _useState2[0], setDistrict = _useState2[1];
     var cityValue = getValues().city;
     var districtValue = getValues().district;
     React.useEffect(function() {
@@ -6395,15 +6395,15 @@ var CityDistrict = function(param) {
     }, Modal.v4());
 };
 
-function _array_like_to_array$5(arr, len) {
+function _array_like_to_array$6(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
     return arr2;
 }
-function _array_with_holes$5(arr) {
+function _array_with_holes$6(arr) {
     if (Array.isArray(arr)) return arr;
 }
-function _iterable_to_array_limit$5(arr, i) {
+function _iterable_to_array_limit$6(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
     var _arr = [];
@@ -6427,23 +6427,23 @@ function _iterable_to_array_limit$5(arr, i) {
     }
     return _arr;
 }
-function _non_iterable_rest$5() {
+function _non_iterable_rest$6() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
-function _sliced_to_array$5(arr, i) {
-    return _array_with_holes$5(arr) || _iterable_to_array_limit$5(arr, i) || _unsupported_iterable_to_array$5(arr, i) || _non_iterable_rest$5();
+function _sliced_to_array$6(arr, i) {
+    return _array_with_holes$6(arr) || _iterable_to_array_limit$6(arr, i) || _unsupported_iterable_to_array$6(arr, i) || _non_iterable_rest$6();
 }
-function _unsupported_iterable_to_array$5(o, minLen) {
+function _unsupported_iterable_to_array$6(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$5(o, minLen);
+    if (typeof o === "string") return _array_like_to_array$6(o, minLen);
     var n = Object.prototype.toString.call(o).slice(8, -1);
     if (n === "Object" && o.constructor) n = o.constructor.name;
     if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$5(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$6(o, minLen);
 }
 var BaseTemplate$1 = function(param) {
     var item = param.item, file = param.file, imageUrl = param.imageUrl, field = param.field;
-    var _useState = _sliced_to_array$5(React.useState(null), 2), tempImage = _useState[0], setTempImage = _useState[1];
+    var _useState = _sliced_to_array$6(React.useState(null), 2), tempImage = _useState[0], setTempImage = _useState[1];
     React.useEffect(function() {
         var fileReader;
         var isCancel = false;
@@ -6577,12 +6577,12 @@ var BaseTemplate$1 = function(param) {
     });
 };
 
-function _array_like_to_array$4(arr, len) {
+function _array_like_to_array$5(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
     return arr2;
 }
-function _array_with_holes$4(arr) {
+function _array_with_holes$5(arr) {
     if (Array.isArray(arr)) return arr;
 }
 function _instanceof(left, right) {
@@ -6592,7 +6592,7 @@ function _instanceof(left, right) {
         return left instanceof right;
     }
 }
-function _iterable_to_array_limit$4(arr, i) {
+function _iterable_to_array_limit$5(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
     var _arr = [];
@@ -6616,25 +6616,25 @@ function _iterable_to_array_limit$4(arr, i) {
     }
     return _arr;
 }
-function _non_iterable_rest$4() {
+function _non_iterable_rest$5() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
-function _sliced_to_array$4(arr, i) {
-    return _array_with_holes$4(arr) || _iterable_to_array_limit$4(arr, i) || _unsupported_iterable_to_array$4(arr, i) || _non_iterable_rest$4();
+function _sliced_to_array$5(arr, i) {
+    return _array_with_holes$5(arr) || _iterable_to_array_limit$5(arr, i) || _unsupported_iterable_to_array$5(arr, i) || _non_iterable_rest$5();
 }
-function _unsupported_iterable_to_array$4(o, minLen) {
+function _unsupported_iterable_to_array$5(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$4(o, minLen);
+    if (typeof o === "string") return _array_like_to_array$5(o, minLen);
     var n = Object.prototype.toString.call(o).slice(8, -1);
     if (n === "Object" && o.constructor) n = o.constructor.name;
     if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$4(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$5(o, minLen);
 }
 var CustomUpload$1 = function(param) {
     var item = param.item, field = param.field;
     var imageMimeType = /image\/(png|jpg|jpeg)/i;
     var DEFAULT_IMAGE_SIZE_LIMIT_IN_BYTES = (item === null || item === void 0 ? void 0 : item.limitSize) || 5242880;
-    var _useState = _sliced_to_array$4(React.useState(null), 2), modal = _useState[0], setModal = _useState[1];
+    var _useState = _sliced_to_array$5(React.useState(null), 2), modal = _useState[0], setModal = _useState[1];
     var hiddenFileInput = React.useRef(null);
     React.useEffect(function() {
         if (modal) {
@@ -6811,15 +6811,15 @@ var BaseSelect = function(param) {
     });
 };
 
-function _array_like_to_array$3(arr, len) {
+function _array_like_to_array$4(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
     return arr2;
 }
-function _array_with_holes$3(arr) {
+function _array_with_holes$4(arr) {
     if (Array.isArray(arr)) return arr;
 }
-function _iterable_to_array_limit$3(arr, i) {
+function _iterable_to_array_limit$4(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
     var _arr = [];
@@ -6843,27 +6843,27 @@ function _iterable_to_array_limit$3(arr, i) {
     }
     return _arr;
 }
-function _non_iterable_rest$3() {
+function _non_iterable_rest$4() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
-function _sliced_to_array$3(arr, i) {
-    return _array_with_holes$3(arr) || _iterable_to_array_limit$3(arr, i) || _unsupported_iterable_to_array$3(arr, i) || _non_iterable_rest$3();
+function _sliced_to_array$4(arr, i) {
+    return _array_with_holes$4(arr) || _iterable_to_array_limit$4(arr, i) || _unsupported_iterable_to_array$4(arr, i) || _non_iterable_rest$4();
 }
-function _unsupported_iterable_to_array$3(o, minLen) {
+function _unsupported_iterable_to_array$4(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$3(o, minLen);
+    if (typeof o === "string") return _array_like_to_array$4(o, minLen);
     var n = Object.prototype.toString.call(o).slice(8, -1);
     if (n === "Object" && o.constructor) n = o.constructor.name;
     if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$3(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$4(o, minLen);
 }
 var DropdownList = function(param) {
     var item = param.item, onUtilsReady = param.onUtilsReady;
     var _item_option, _item_validateOption, _errors_funeralLocation;
     var _useFormContext = index_esm.useFormContext(), control = _useFormContext.control, errors = _useFormContext.formState.errors;
     var dropdownRef = React.useRef(null);
-    var _useState = _sliced_to_array$3(React.useState(""), 2), query = _useState[0], setQuery = _useState[1];
-    var _useState1 = _sliced_to_array$3(React.useState(false), 2), open = _useState1[0], setOpen = _useState1[1];
+    var _useState = _sliced_to_array$4(React.useState(""), 2), query = _useState[0], setQuery = _useState[1];
+    var _useState1 = _sliced_to_array$4(React.useState(false), 2), open = _useState1[0], setOpen = _useState1[1];
     var filtered = (item === null || item === void 0 ? void 0 : (_item_option = item.option) === null || _item_option === void 0 ? void 0 : _item_option.filter(function(opt) {
         var _opt_name;
         return opt === null || opt === void 0 ? void 0 : (_opt_name = opt.name) === null || _opt_name === void 0 ? void 0 : _opt_name.toLowerCase().includes(query.toLowerCase());
@@ -7380,6 +7380,205 @@ var FlatpickrField = function(param) {
     });
 };
 
+function _array_like_to_array$3(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
+    return arr2;
+}
+function _array_with_holes$3(arr) {
+    if (Array.isArray(arr)) return arr;
+}
+function _iterable_to_array_limit$3(arr, i) {
+    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+    if (_i == null) return;
+    var _arr = [];
+    var _n = true;
+    var _d = false;
+    var _s, _e;
+    try {
+        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
+            _arr.push(_s.value);
+            if (i && _arr.length === i) break;
+        }
+    } catch (err) {
+        _d = true;
+        _e = err;
+    } finally{
+        try {
+            if (!_n && _i["return"] != null) _i["return"]();
+        } finally{
+            if (_d) throw _e;
+        }
+    }
+    return _arr;
+}
+function _non_iterable_rest$3() {
+    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _sliced_to_array$3(arr, i) {
+    return _array_with_holes$3(arr) || _iterable_to_array_limit$3(arr, i) || _unsupported_iterable_to_array$3(arr, i) || _non_iterable_rest$3();
+}
+function _unsupported_iterable_to_array$3(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _array_like_to_array$3(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(n);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$3(o, minLen);
+}
+var EditableCombobox = function(param) {
+    var _param_value = param.value, value = _param_value === void 0 ? "" : _param_value, onChange = param.onChange, _param_options = param.options, options = _param_options === void 0 ? [] : _param_options, _param_placeholder = param.placeholder, placeholder = _param_placeholder === void 0 ? "請輸入或選擇" : _param_placeholder, _param_disabled = param.disabled, disabled = _param_disabled === void 0 ? false : _param_disabled, _param_className = param.className, className = _param_className === void 0 ? "" : _param_className;
+    var _useState = _sliced_to_array$3(React.useState(false), 2), isOpen = _useState[0], setIsOpen = _useState[1];
+    var _useState1 = _sliced_to_array$3(React.useState(value), 2), inputValue = _useState1[0], setInputValue = _useState1[1];
+    var _useState2 = _sliced_to_array$3(React.useState(false), 2), isTyping = _useState2[0], setIsTyping = _useState2[1];
+    var _useState3 = _sliced_to_array$3(React.useState(false), 2), isHovered = _useState3[0], setIsHovered = _useState3[1];
+    var dropdownRef = React.useRef(null);
+    var inputRef = React.useRef(null);
+    React.useEffect(function() {
+        setInputValue(value);
+    }, [
+        value
+    ]);
+    React.useEffect(function() {
+        var handleClickOutside = function(event) {
+            if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+                setIsOpen(false);
+                setIsTyping(false);
+            }
+        };
+        document.addEventListener("mousedown", handleClickOutside);
+        return function() {
+            return document.removeEventListener("mousedown", handleClickOutside);
+        };
+    }, []);
+    var filteredOptions = isTyping ? options.filter(function(option) {
+        var optionText = option.name || option.value || "";
+        return optionText.toLowerCase().includes(inputValue.toLowerCase());
+    }) : options;
+    var handleSelect = function(option) {
+        var _inputRef_current;
+        var selectedValue = option.value || option.name;
+        setInputValue(selectedValue);
+        onChange(selectedValue);
+        setIsOpen(false);
+        setIsTyping(false);
+        (_inputRef_current = inputRef.current) === null || _inputRef_current === void 0 ? void 0 : _inputRef_current.focus();
+    };
+    var handleInputChange = function(e) {
+        var newValue = e.target.value;
+        setInputValue(newValue);
+        onChange(newValue);
+        setIsTyping(true);
+        if (!isOpen) {
+            setIsOpen(true);
+        }
+    };
+    var handleInputClick = function() {
+        if (!disabled) {
+            setIsTyping(false);
+            setIsOpen(true);
+        }
+    };
+    var handleClear = function(e) {
+        var _inputRef_current;
+        e.stopPropagation();
+        setInputValue("");
+        onChange("");
+        setIsOpen(false);
+        setIsTyping(false);
+        (_inputRef_current = inputRef.current) === null || _inputRef_current === void 0 ? void 0 : _inputRef_current.focus();
+    };
+    var handleDropdownToggle = function(e) {
+        e.stopPropagation();
+        if (!disabled) {
+            var _inputRef_current;
+            setIsTyping(false);
+            setIsOpen(!isOpen);
+            (_inputRef_current = inputRef.current) === null || _inputRef_current === void 0 ? void 0 : _inputRef_current.focus();
+        }
+    };
+    return /*#__PURE__*/ jsxRuntime.jsxs("div", {
+        ref: dropdownRef,
+        className: "relative ".concat(className),
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                className: "relative",
+                onMouseEnter: function() {
+                    return setIsHovered(true);
+                },
+                onMouseLeave: function() {
+                    return setIsHovered(false);
+                },
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsx("input", {
+                        ref: inputRef,
+                        type: "text",
+                        value: inputValue,
+                        onChange: handleInputChange,
+                        onClick: handleInputClick,
+                        placeholder: placeholder,
+                        disabled: disabled,
+                        className: [
+                            "w-full h-11 rounded-2xl px-4 pr-20 border border-solid border-[#B4B4B4]",
+                            "transition-colors duration-200",
+                            disabled ? "text-[#B0B0B0] bg-[#e5e7eb] cursor-not-allowed" : "bg-white text-[#6f6f6f] hover:border-[#6f6f6f] focus:border-[#6f6f6f] focus:outline-none"
+                        ].join(" ")
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                        className: "absolute right-2 top-1/2 -translate-y-1/2 flex items-center gap-1",
+                        children: [
+                            inputValue && !disabled && isHovered && /*#__PURE__*/ jsxRuntime.jsx("button", {
+                                onClick: handleClear,
+                                className: "p-1.5 hover:bg-gray-100 rounded-full transition-colors",
+                                type: "button",
+                                tabIndex: -1,
+                                children: /*#__PURE__*/ jsxRuntime.jsx(react$1.Icon, {
+                                    icon: "mdi:close",
+                                    className: "w-4 h-4"
+                                })
+                            }),
+                            /*#__PURE__*/ jsxRuntime.jsx("button", {
+                                onClick: handleDropdownToggle,
+                                className: "p-1.5 hover:bg-gray-100 rounded-full transition-colors",
+                                type: "button",
+                                tabIndex: -1,
+                                disabled: disabled,
+                                children: /*#__PURE__*/ jsxRuntime.jsx(react$1.Icon, {
+                                    icon: "mdi:chevron-down",
+                                    className: "w-5 h-5 transition-transform duration-200 ".concat(isOpen ? "rotate-180" : "")
+                                })
+                            })
+                        ]
+                    })
+                ]
+            }),
+            isOpen && !disabled && /*#__PURE__*/ jsxRuntime.jsx("div", {
+                className: "absolute z-50 w-full mt-1 bg-white border border-[#B4B4B4] rounded-2xl shadow-lg max-h-60 overflow-hidden",
+                children: /*#__PURE__*/ jsxRuntime.jsx("div", {
+                    className: "overflow-y-auto max-h-60",
+                    children: filteredOptions.length > 0 ? filteredOptions.map(function(option, index) {
+                        var optionValue = option.value || option.name;
+                        var isSelected = optionValue === inputValue;
+                        return /*#__PURE__*/ jsxRuntime.jsx("div", {
+                            onClick: function() {
+                                return handleSelect(option);
+                            },
+                            className: [
+                                "px-4 py-2.5 cursor-pointer transition-colors",
+                                isSelected ? "bg-[#F5F5F5] text-[#6f6f6f] font-medium" : "hover:bg-[#F5F5F5]"
+                            ].join(" "),
+                            children: option.name
+                        }, index);
+                    }) : /*#__PURE__*/ jsxRuntime.jsx("div", {
+                        className: "px-4 py-3 text-center text-[#B0B0B0]",
+                        children: "沒有符合的選項"
+                    })
+                })
+            })
+        ]
+    });
+};
+
 /* eslint-disable react/no-array-index-key */ /* eslint-disable react/prop-types */ function _array_like_to_array$2(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
@@ -7628,9 +7827,10 @@ var SingleSelect = function(param) {
                                     disabled: (item === null || item === void 0 ? void 0 : item.disable) || (item === null || item === void 0 ? void 0 : item.disabled)
                                 }), field), {
                                     children: item === null || item === void 0 ? void 0 : (_item_option = item.option) === null || _item_option === void 0 ? void 0 : _item_option.map(function(group) {
-                                        return "label" in group ? /*#__PURE__*/ jsxRuntime.jsx("optgroup", {
+                                        var _group_options;
+                                        return "label" in group && "options" in group ? /*#__PURE__*/ jsxRuntime.jsx("optgroup", {
                                             label: group.label,
-                                            children: group.options.map(function(o) {
+                                            children: (_group_options = group.options) === null || _group_options === void 0 ? void 0 : _group_options.map(function(o) {
                                                 return /*#__PURE__*/ jsxRuntime.jsx("option", {
                                                     value: o.value,
                                                     children: o.name
@@ -8038,7 +8238,11 @@ var FieldArray = function(param) {
         name: item.name
     }), fields = _useFieldArray.fields, append = _useFieldArray.append, remove = _useFieldArray.remove;
     var config = item === null || item === void 0 ? void 0 : item.fieldArrayConfig;
-    var fieldConfigs = (config === null || config === void 0 ? void 0 : config.fields) || [];
+    var fieldConfigs = React__default["default"].useMemo(function() {
+        return (config === null || config === void 0 ? void 0 : config.fields) || [];
+    }, [
+        config === null || config === void 0 ? void 0 : config.fields
+    ]);
     var addButtonText = (config === null || config === void 0 ? void 0 : config.addButtonText) || "新增";
     var maxItems = config === null || config === void 0 ? void 0 : config.maxItems;
     var minItems = (config === null || config === void 0 ? void 0 : config.minItems) || 0;
@@ -8047,7 +8251,6 @@ var FieldArray = function(param) {
     var addButtonClassName = config === null || config === void 0 ? void 0 : config.addButtonClassName;
     var canAdd = !maxItems || fields.length < maxItems;
     var canRemove = fields.length > minItems;
-    // 初始化：確保至少有 defaultItemCount 個項目
     React__default["default"].useEffect(function() {
         var currentValues = getValues(item.name);
         if (!currentValues || currentValues.length === 0) {
@@ -8061,8 +8264,13 @@ var FieldArray = function(param) {
             var itemsToAdd = defaultItemCount;
             for(var i = 0; i < itemsToAdd; i++)_loop(i);
         }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
+    }, [
+        append,
+        defaultItemCount,
+        fieldConfigs,
+        getValues,
+        item.name
+    ]);
     var handleAdd = function() {
         if (canAdd) {
             var newItem = {};
@@ -8134,14 +8342,16 @@ var FieldArray = function(param) {
                 children: [
                     fields.map(function(field, index) {
                         return /*#__PURE__*/ jsxRuntime.jsx("div", {
-                            className: "bg-white overflow-scroll",
+                            className: "bg-white",
                             children: /*#__PURE__*/ jsxRuntime.jsx("div", {
-                                className: "flex items-start gap-2 flex-wrap lg:flex-nowrap h-[96px]",
+                                className: "flex items-start gap-2 flex-wrap lg:flex-nowrap",
                                 children: fieldConfigs.map(function(fieldConfig, fieldIndex) {
                                     var _fieldConfig_validateOption;
                                     var fieldName = "".concat(item.name, ".").concat(index, ".").concat(fieldConfig.name);
                                     var fieldError = getFieldError(index, fieldConfig.name);
                                     var isLastField = fieldIndex === fieldConfigs.length - 1;
+                                    // 🎯 關鍵判斷:是否有選項(使用可編輯下拉選單)
+                                    var hasOptions = fieldConfig.options && fieldConfig.options.length > 0;
                                     return /*#__PURE__*/ jsxRuntime.jsxs("div", {
                                         className: [
                                             isLastField ? "flex items-start gap-1 flex-1" : "flex-1",
@@ -8167,37 +8377,40 @@ var FieldArray = function(param) {
                                                         rules: fieldConfig === null || fieldConfig === void 0 ? void 0 : fieldConfig.validateOption,
                                                         render: function(param) {
                                                             var controllerField = param.field;
-                                                            return /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                                                            var _fieldConfig_options;
+                                                            return /*#__PURE__*/ jsxRuntime.jsx("div", {
                                                                 className: "relative",
-                                                                children: [
-                                                                    /*#__PURE__*/ jsxRuntime.jsx("input", _object_spread_props(_object_spread({}, controllerField), {
-                                                                        list: "".concat(fieldName, "-datalist"),
-                                                                        type: "text",
-                                                                        className: [
-                                                                            (item === null || item === void 0 ? void 0 : item.disable) || (item === null || item === void 0 ? void 0 : item.disabled) ? "text-[#B0B0B0] bg-[#e5e7eb] cursor-not-allowed" : "bg-white text-[#6f6f6f]",
-                                                                            "w-full h-11 rounded-2xl px-4 border border-solid border-[#B4B4B4]"
-                                                                        ].join(" "),
-                                                                        placeholder: fieldConfig.placeholder || fieldConfig.label,
-                                                                        disabled: (item === null || item === void 0 ? void 0 : item.disable) || (item === null || item === void 0 ? void 0 : item.disabled)
-                                                                    })),
-                                                                    fieldConfig.options && fieldConfig.options.length > 0 && /*#__PURE__*/ jsxRuntime.jsx("datalist", {
-                                                                        id: "".concat(fieldName, "-datalist"),
-                                                                        children: fieldConfig.options.map(function(option, optIndex) {
-                                                                            return /*#__PURE__*/ jsxRuntime.jsx("option", {
-                                                                                value: option.value || option.name,
-                                                                                children: option.name
-                                                                            }, optIndex);
-                                                                        })
-                                                                    })
-                                                                ]
+                                                                children: hasOptions ? // ✅ 使用可編輯下拉選單 - 既可以輸入也可以選擇
+                                                                /*#__PURE__*/ jsxRuntime.jsx(EditableCombobox, {
+                                                                    value: controllerField.value || "",
+                                                                    onChange: controllerField.onChange,
+                                                                    options: (_fieldConfig_options = fieldConfig.options) === null || _fieldConfig_options === void 0 ? void 0 : _fieldConfig_options.map(function(opt) {
+                                                                        var _opt_value;
+                                                                        return {
+                                                                            name: opt.name,
+                                                                            value: String((_opt_value = opt.value) !== null && _opt_value !== void 0 ? _opt_value : opt.name)
+                                                                        };
+                                                                    }),
+                                                                    placeholder: fieldConfig.placeholder || fieldConfig.label,
+                                                                    disabled: (item === null || item === void 0 ? void 0 : item.disable) || (item === null || item === void 0 ? void 0 : item.disabled)
+                                                                }) : // ✅ 使用一般 input
+                                                                /*#__PURE__*/ jsxRuntime.jsx("input", _object_spread_props(_object_spread({}, controllerField), {
+                                                                    type: "text",
+                                                                    className: [
+                                                                        (item === null || item === void 0 ? void 0 : item.disable) || (item === null || item === void 0 ? void 0 : item.disabled) ? "text-[#B0B0B0] bg-[#e5e7eb] cursor-not-allowed" : "bg-white text-[#6f6f6f]",
+                                                                        "w-full h-11 rounded-2xl px-4 border border-solid border-[#B4B4B4]"
+                                                                    ].join(" "),
+                                                                    placeholder: fieldConfig.placeholder || fieldConfig.label,
+                                                                    disabled: (item === null || item === void 0 ? void 0 : item.disable) || (item === null || item === void 0 ? void 0 : item.disabled)
+                                                                }))
                                                             });
                                                         }
                                                     }),
-                                                    (fieldError === null || fieldError === void 0 ? void 0 : fieldError.message) && /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                                                    fieldError && "message" in fieldError && typeof fieldError.message === "string" && /*#__PURE__*/ jsxRuntime.jsxs("div", {
                                                         className: "pt-1 text-xs text-[#EF5533]",
                                                         children: [
                                                             "*",
-                                                            String(fieldError.message)
+                                                            fieldError.message
                                                         ]
                                                     })
                                                 ]
@@ -8228,7 +8441,7 @@ var FieldArray = function(param) {
                                                             ]
                                                         }),
                                                         canRemove && fields.length > 1 && /*#__PURE__*/ jsxRuntime.jsx("div", {
-                                                            className: "p-2 rounded-2xl text-[#EF5533] bg-white hover:bg-[#FFF5F3] transition-colors duration-200",
+                                                            className: "p-2 rounded-2xl text-[#EF5533] bg-white hover:bg-[#FFF5F3] transition-colors duration-200 cursor-pointer",
                                                             children: /*#__PURE__*/ jsxRuntime.jsx(react$1.Icon, {
                                                                 icon: "fluent-mdl2:delete",
                                                                 className: "w-6 h-6",