@edu-tosel/design 1.0.125 → 1.0.126

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edu-tosel/design",
-  "version": "1.0.125",
+  "version": "1.0.126",
   "description": "UI components for International TOSEL Committee",
   "keywords": [
     "jsx",

package/version.txt

@@ -1 +1 @@
-1.0.125
+1.0.126

package/widget/template/Select/Select.LG.js

@@ -17,6 +17,7 @@ const heightSize = {
 };
 export default function SelectLG({ state, selectOptions: selectOptionsInput, placeholder, option, }) {
     const selectOptions = selectOptionsInput?.map(toSelectOption);
+    const [filteredOptions, setFilteredOptions] = useState();
     const id = useId();
     const { isDark } = option ?? {};
     const { setIsOwn, setIsOwnId } = useActionStore();
@@ -25,7 +26,6 @@ export default function SelectLG({ state, selectOptions: selectOptionsInput, pla
     const [search, setSearch] = useState("");
     const [isOpen, setIsOpen] = useState(false);
     const [isHover, setIsHover] = useState(false);
-    const [filteredOptions, setFilterdOptions] = useState();
     const [index, setIndex] = useState();
     const listRef = useRef(null);
     const itemRefs = useRef([]);
@@ -47,8 +47,9 @@ export default function SelectLG({ state, selectOptions: selectOptionsInput, pla
         }
     };
     useEffect(() => {
-        setFilterdOptions(selectOptions?.filter(({ title }) => title?.includes(search)));
-    }, [search, selectOptions]);
+        const responses = selectOptions?.filter(({ title }) => title?.includes(search));
+        setFilteredOptions(responses);
+    }, [search]);
     useEffect(() => {
         if (typeof index === "number" && itemRefs.current[index]) {
             itemRefs.current[index]?.scrollIntoView({ block: "nearest" });
@@ -105,7 +106,7 @@ export default function SelectLG({ state, selectOptions: selectOptionsInput, pla
         leave: { top: isLong ? 88 : 44 },
         config: { duration: 0 },
     });
-    return (_jsxs("div", { className: cn(container), onKeyDown: onKeyDown, onClick: () => setIsOwn(true), children: [_jsx("button", { onClick: () => setIsOpen(!isOpen), className: cn(button), onMouseEnter: () => setIsHover(true), onMouseLeave: () => setIsHover(false), children: value ? (_jsx("div", { className: cn(label(false)), children: selectOptions?.find((option) => value === option.value)?.title })) : (_jsx("div", { className: "text-xs pl-1", children: placeholder ?? "선택해주세요" })) }), inputTransition((styles, item) => isLong &&
+    return (_jsxs("div", { className: cn(container), onClick: () => setIsOwn(true), onKeyDown: onKeyDown, children: [_jsx("button", { onClick: () => setIsOpen(!isOpen), className: cn(button), onMouseEnter: () => setIsHover(true), onMouseLeave: () => setIsHover(false), children: value ? (_jsx("div", { className: cn(label(false)), children: selectOptions?.find((option) => value === option.value)?.title })) : (_jsx("div", { className: "text-xs pl-1", children: placeholder ?? "선택해주세요" })) }), inputTransition((styles, item) => isLong &&
                 item && (_jsx(animated.input, { style: styles, placeholder: "\uAC80\uC0C9\uC5B4\uB97C \uC785\uB825\uD558\uC138\uC694", className: cn(input), onChange: (e) => setSearch(e.target.value) }))), bodyTransitions((styles, item) => {
                 return (item && (_jsx(animated.div, { style: styles, className: cn(body), ref: listRef, children: filteredOptions?.map(({ value, title }, order) => (_jsx("section", { children: _jsx("button", { ref: (el) => (itemRefs.current[order] = el), onClick: () => {
                                 setValue(value);