@sunggang/ui-lib 0.4.62 → 0.4.64

package/Form.esm.js

@@ -253,16 +253,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) {
@@ -280,7 +280,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 = [];
@@ -304,7 +304,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() {
@@ -349,19 +349,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);
@@ -587,7 +587,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
@@ -6105,12 +6105,12 @@ dt.div(_templateObject4(), function(props) {
 });
 var StyleText = 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) {
@@ -6126,7 +6126,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 = [];
@@ -6150,7 +6150,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) {
@@ -6192,16 +6192,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?: {
@@ -6230,9 +6230,9 @@ var CityDistrict = function(param) {
     var item = param.item;
     var _errors_city, _errors_district;
     var _useFormContext = useFormContext(), register = _useFormContext.register, setValue = _useFormContext.setValue, getValues = _useFormContext.getValues, errors = _useFormContext.formState.errors;
-    var _useState = _sliced_to_array$6(useState(null), 2), currentCity = _useState[0], setCurrentCity = _useState[1];
-    var _useState1 = _sliced_to_array$6(useState(DistrictData), 1), city = _useState1[0];
-    var _useState2 = _sliced_to_array$6(useState([]), 2), district = _useState2[0], setDistrict = _useState2[1];
+    var _useState = _sliced_to_array$7(useState(null), 2), currentCity = _useState[0], setCurrentCity = _useState[1];
+    var _useState1 = _sliced_to_array$7(useState(DistrictData), 1), city = _useState1[0];
+    var _useState2 = _sliced_to_array$7(useState([]), 2), district = _useState2[0], setDistrict = _useState2[1];
     var cityValue = getValues().city;
     var districtValue = getValues().district;
     useEffect(function() {
@@ -6368,15 +6368,15 @@ var CityDistrict = function(param) {
     }, 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 = [];
@@ -6400,23 +6400,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(useState(null), 2), tempImage = _useState[0], setTempImage = _useState[1];
+    var _useState = _sliced_to_array$6(useState(null), 2), tempImage = _useState[0], setTempImage = _useState[1];
     useEffect(function() {
         var fileReader;
         var isCancel = false;
@@ -6550,12 +6550,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) {
@@ -6565,7 +6565,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 = [];
@@ -6589,25 +6589,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(useState(null), 2), modal = _useState[0], setModal = _useState[1];
+    var _useState = _sliced_to_array$5(useState(null), 2), modal = _useState[0], setModal = _useState[1];
     var hiddenFileInput = useRef(null);
     useEffect(function() {
         if (modal) {
@@ -6784,15 +6784,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 = [];
@@ -6816,27 +6816,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 = useFormContext(), control = _useFormContext.control, errors = _useFormContext.formState.errors;
     var dropdownRef = useRef(null);
-    var _useState = _sliced_to_array$3(useState(""), 2), query = _useState[0], setQuery = _useState[1];
-    var _useState1 = _sliced_to_array$3(useState(false), 2), open = _useState1[0], setOpen = _useState1[1];
+    var _useState = _sliced_to_array$4(useState(""), 2), query = _useState[0], setQuery = _useState[1];
+    var _useState1 = _sliced_to_array$4(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());
@@ -7353,6 +7353,198 @@ 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(useState(false), 2), isOpen = _useState[0], setIsOpen = _useState[1];
+    var _useState1 = _sliced_to_array$3(useState(value), 2), inputValue = _useState1[0], setInputValue = _useState1[1];
+    var _useState2 = _sliced_to_array$3(useState(false), 2), isTyping = _useState2[0], setIsTyping = _useState2[1];
+    var dropdownRef = useRef(null);
+    var inputRef = useRef(null);
+    useEffect(function() {
+        setInputValue(value);
+    }, [
+        value
+    ]);
+    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__*/ jsxs("div", {
+        ref: dropdownRef,
+        className: "relative ".concat(className),
+        children: [
+            /*#__PURE__*/ jsxs("div", {
+                className: "relative",
+                children: [
+                    /*#__PURE__*/ jsx$1("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__*/ jsxs("div", {
+                        className: "absolute right-2 top-1/2 -translate-y-1/2 flex items-center gap-1",
+                        children: [
+                            inputValue && !disabled && /*#__PURE__*/ jsx$1("button", {
+                                onClick: handleClear,
+                                className: "p-1.5 hover:bg-gray-100 rounded-full transition-colors",
+                                type: "button",
+                                tabIndex: -1,
+                                children: /*#__PURE__*/ jsx$1(Icon, {
+                                    icon: "mdi:close",
+                                    className: "w-4 h-4"
+                                })
+                            }),
+                            /*#__PURE__*/ jsx$1("button", {
+                                onClick: handleDropdownToggle,
+                                className: "p-1.5 hover:bg-gray-100 rounded-full transition-colors",
+                                type: "button",
+                                tabIndex: -1,
+                                disabled: disabled,
+                                children: /*#__PURE__*/ jsx$1(Icon, {
+                                    icon: "mdi:chevron-down",
+                                    className: "w-5 h-5 transition-transform duration-200 ".concat(isOpen ? "rotate-180" : "")
+                                })
+                            })
+                        ]
+                    })
+                ]
+            }),
+            isOpen && !disabled && /*#__PURE__*/ jsx$1("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__*/ jsx$1("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__*/ jsx$1("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__*/ jsx$1("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];
@@ -7601,9 +7793,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__*/ jsx$1("optgroup", {
+                                        var _group_options;
+                                        return "label" in group && "options" in group ? /*#__PURE__*/ jsx$1("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__*/ jsx$1("option", {
                                                     value: o.value,
                                                     children: o.name
@@ -8011,9 +8204,12 @@ 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.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) || "新增";
-    (config === null || config === void 0 ? void 0 : config.removeButtonText) || "刪除";
     var maxItems = config === null || config === void 0 ? void 0 : config.maxItems;
     var minItems = (config === null || config === void 0 ? void 0 : config.minItems) || 0;
     var defaultItemCount = (config === null || config === void 0 ? void 0 : config.defaultItemCount) || 1;
@@ -8021,7 +8217,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.useEffect(function() {
         var currentValues = getValues(item.name);
         if (!currentValues || currentValues.length === 0) {
@@ -8035,8 +8230,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 = {};
@@ -8089,119 +8289,139 @@ var FieldArray = function(param) {
             (item === null || item === void 0 ? void 0 : item.label) && /*#__PURE__*/ jsx$1(FieldLabel, {
                 item: item
             }),
+            addButtonPosition === "top" && canAdd && /*#__PURE__*/ jsxs("button", {
+                type: "button",
+                onClick: handleAdd,
+                className: addButtonClassName || [
+                    "h-11 px-4 rounded-2xl border border-solid border-[#6f6f6f]",
+                    "text-[#6f6f6f] bg-white hover:bg-[#F5F5F5]",
+                    "transition-colors duration-200",
+                    "flex items-center whitespace-nowrap mb-4"
+                ].join(" "),
+                children: [
+                    "+ ",
+                    addButtonText
+                ]
+            }),
             /*#__PURE__*/ jsxs("div", {
                 className: "space-y-2",
                 children: [
                     fields.map(function(field, index) {
                         return /*#__PURE__*/ jsx$1("div", {
-                            className: "bg-white overflow-scroll",
-                            children: /*#__PURE__*/ jsxs("div", {
-                                className: "flex items-start gap-2 flex-wrap lg:flex-nowrap h-[96px]",
-                                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;
-                                        return /*#__PURE__*/ jsxs("div", {
-                                            className: [
-                                                isLastField ? "flex items-start gap-2 flex-1" : "flex-1",
-                                                "min-w-[200px]"
-                                            ].join(" "),
-                                            children: [
-                                                /*#__PURE__*/ jsxs("div", {
-                                                    className: "flex-1",
+                            className: "bg-white",
+                            children: /*#__PURE__*/ jsx$1("div", {
+                                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__*/ jsxs("div", {
+                                        className: [
+                                            isLastField ? "flex items-start gap-1 flex-1" : "flex-1",
+                                            "min-w-[200px]"
+                                        ].join(" "),
+                                        children: [
+                                            /*#__PURE__*/ jsxs("div", {
+                                                className: "flex-1",
+                                                children: [
+                                                    /*#__PURE__*/ jsxs("div", {
+                                                        className: "font-medium mb-2",
+                                                        children: [
+                                                            fieldConfig.label,
+                                                            (fieldConfig === null || fieldConfig === void 0 ? void 0 : (_fieldConfig_validateOption = fieldConfig.validateOption) === null || _fieldConfig_validateOption === void 0 ? void 0 : _fieldConfig_validateOption.required) && /*#__PURE__*/ jsx$1("span", {
+                                                                className: "pl-1 text-[#EF5533] font-bold",
+                                                                children: "*"
+                                                            })
+                                                        ]
+                                                    }),
+                                                    /*#__PURE__*/ jsx$1(Controller, {
+                                                        name: fieldName,
+                                                        control: control,
+                                                        rules: fieldConfig === null || fieldConfig === void 0 ? void 0 : fieldConfig.validateOption,
+                                                        render: function(param) {
+                                                            var controllerField = param.field;
+                                                            var _fieldConfig_options;
+                                                            return /*#__PURE__*/ jsx$1("div", {
+                                                                className: "relative",
+                                                                children: hasOptions ? // ✅ 使用可編輯下拉選單 - 既可以輸入也可以選擇
+                                                                /*#__PURE__*/ jsx$1(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__*/ jsx$1("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 && "message" in fieldError && typeof fieldError.message === "string" && /*#__PURE__*/ jsxs("div", {
+                                                        className: "pt-1 text-xs text-[#EF5533]",
+                                                        children: [
+                                                            "*",
+                                                            fieldError.message
+                                                        ]
+                                                    })
+                                                ]
+                                            }),
+                                            /*#__PURE__*/ jsx$1("div", {
+                                                className: "flex gap-1 items-center",
+                                                children: isLastField && /*#__PURE__*/ jsxs("div", {
+                                                    className: [
+                                                        "flex items-center justify-center flex-shrink-0",
+                                                        "mt-[30px]"
+                                                    ].join(" "),
                                                     children: [
-                                                        /*#__PURE__*/ jsxs("div", {
-                                                            className: "font-medium mb-2 text-sm",
+                                                        addButtonPosition === "inline" && canAdd && index === fields.length - 1 && /*#__PURE__*/ jsxs("button", {
+                                                            type: "button",
+                                                            onClick: handleAdd,
+                                                            className: addButtonClassName || [
+                                                                "h-11 px-4 rounded-2xl border border-solid border-[#6f6f6f]",
+                                                                "text-[#6f6f6f] bg-white hover:bg-[#F5F5F5]",
+                                                                "transition-colors duration-200",
+                                                                "flex items-center gap-2 whitespace-nowrap flex-shrink-0"
+                                                            ].join(" "),
                                                             children: [
-                                                                fieldConfig.label,
-                                                                (fieldConfig === null || fieldConfig === void 0 ? void 0 : (_fieldConfig_validateOption = fieldConfig.validateOption) === null || _fieldConfig_validateOption === void 0 ? void 0 : _fieldConfig_validateOption.required) && /*#__PURE__*/ jsx$1("span", {
-                                                                    className: "pl-1 text-[#EF5533] font-bold",
-                                                                    children: "*"
-                                                                })
+                                                                /*#__PURE__*/ jsx$1(Icon, {
+                                                                    icon: "mdi:plus",
+                                                                    className: "w-5 h-5"
+                                                                }),
+                                                                addButtonText
                                                             ]
                                                         }),
-                                                        /*#__PURE__*/ jsx$1(Controller, {
-                                                            name: fieldName,
-                                                            control: control,
-                                                            rules: fieldConfig === null || fieldConfig === void 0 ? void 0 : fieldConfig.validateOption,
-                                                            render: function(param) {
-                                                                var controllerField = param.field;
-                                                                return /*#__PURE__*/ jsxs("div", {
-                                                                    className: "relative",
-                                                                    children: [
-                                                                        /*#__PURE__*/ jsx$1("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__*/ jsx$1("datalist", {
-                                                                            id: "".concat(fieldName, "-datalist"),
-                                                                            children: fieldConfig.options.map(function(option, optIndex) {
-                                                                                return /*#__PURE__*/ jsx$1("option", {
-                                                                                    value: option.value || option.name,
-                                                                                    children: option.name
-                                                                                }, optIndex);
-                                                                            })
-                                                                        })
-                                                                    ]
-                                                                });
-                                                            }
-                                                        }),
-                                                        (fieldError === null || fieldError === void 0 ? void 0 : fieldError.message) && /*#__PURE__*/ jsxs("div", {
-                                                            className: "pt-1 text-xs text-[#EF5533]",
-                                                            children: [
-                                                                "*",
-                                                                String(fieldError.message)
-                                                            ]
+                                                        canRemove && fields.length > 1 && /*#__PURE__*/ jsx$1("div", {
+                                                            className: "p-2 rounded-2xl text-[#EF5533] bg-white hover:bg-[#FFF5F3] transition-colors duration-200 cursor-pointer",
+                                                            children: /*#__PURE__*/ jsx$1(Icon, {
+                                                                icon: "fluent-mdl2:delete",
+                                                                className: "w-6 h-6",
+                                                                onClick: function() {
+                                                                    return handleRemove(index);
+                                                                }
+                                                            })
                                                         })
                                                     ]
-                                                }),
-                                                isLastField && canRemove && /*#__PURE__*/ jsx$1("button", {
-                                                    type: "button",
-                                                    onClick: function() {
-                                                        return handleRemove(index);
-                                                    },
-                                                    className: [
-                                                        "h-11 px-2 rounded-2xl",
-                                                        "text-[#EF5533] bg-white hover:bg-[#FFF5F3]",
-                                                        "transition-colors duration-200",
-                                                        "flex items-center justify-center flex-shrink-0",
-                                                        "mt-[30px]"
-                                                    ].join(" "),
-                                                    children: /*#__PURE__*/ jsx$1(Icon, {
-                                                        icon: "fluent-mdl2:delete",
-                                                        className: "w-6 h-6"
-                                                    })
                                                 })
-                                            ]
-                                        }, fieldIndex);
-                                    }),
-                                    addButtonPosition === "inline" && canAdd && index === fields.length - 1 && /*#__PURE__*/ jsxs("button", {
-                                        type: "button",
-                                        onClick: handleAdd,
-                                        className: addButtonClassName || [
-                                            "h-11 px-4 rounded-2xl border border-solid border-[#6f6f6f]",
-                                            "text-[#6f6f6f] bg-white hover:bg-[#F5F5F5]",
-                                            "transition-colors duration-200",
-                                            "flex items-center gap-2 whitespace-nowrap flex-shrink-0",
-                                            "mt-[30px]"
-                                        ].join(" "),
-                                        children: [
-                                            /*#__PURE__*/ jsx$1(Icon, {
-                                                icon: "mdi:plus",
-                                                className: "w-5 h-5"
-                                            }),
-                                            addButtonText
+                                            })
                                         ]
-                                    })
-                                ]
+                                    }, fieldIndex);
+                                })
                             })
                         }, field.id);
                     }),