@edu-tosel/design 1.0.168 → 1.0.169

package/board/design/Header.design.js

@@ -18,5 +18,5 @@ export default function BoardHeader({ titles, tag, option, }) {
         displays: "xl:hidden block ",
         sizes: "w-full h-19",
     };
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: cn(container), children: [_jsxs("div", { className: "flex items-center gap-2.5", children: [icon && _jsx("img", { src: icon, className: "fill-blue-500" }), _jsx("div", { className: `text-2xl font-pretendard-bold ${titleColor}`, children: title })] }), _jsxs("div", { className: "flex items-center ml-auto gap-4", children: [selects?.map(({ selectOptions, option, state }, index) => (_jsx("div", { className: "flex items-center gap-2", children: _jsx(Select, { option: option, selectOptions: selectOptions, state: state }, title) }, index))), inputs?.map((prop, index) => (_jsx(Input, { ...prop }, index)))] })] }), _jsx("div", { className: cn(block) })] }));
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: cn(container), children: [_jsxs("div", { className: "flex items-center gap-2.5", children: [icon && _jsx("img", { src: icon, className: "fill-blue-500" }), _jsx("div", { className: `text-2xl font-pretendard-bold ${titleColor}`, children: title })] }), _jsxs("div", { className: "relative flex items-center ml-auto gap-4", children: [selects?.map(({ selectOptions, option, state }) => (_jsx(Select, { option: option, selectOptions: selectOptions, state: state }, title))), inputs?.map((prop, index) => (_jsx(Input, { ...prop }, index)))] })] }), _jsx("div", { className: cn(block) })] }));
 }

package/package.json

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

package/version.txt

@@ -1 +1 @@
-1.0.168
+1.0.169

package/widget/template/Select/Select.js

@@ -27,7 +27,6 @@ export default function Select({ state, selectOptions: selectOptionsInput, place
     const [index, setIndex] = useState();
     const [uniqueKey] = useState(Math.floor(Math.random() * 1000000));
     useFlag({ state: [false, setIsOpen], safe: "overlay" });
-    // scrollIntoViews
     const listRef = useRef(null);
     const itemRefs = useRef([]);
     useEffect(() => {
@@ -37,7 +36,7 @@ export default function Select({ state, selectOptions: selectOptionsInput, place
     }, [index]);
     const isLong = selectOptions && selectOptions.length >= 4;
     const container = {
-        positions: "",
+        positions: "relative",
         displays: "flex flex-col gap-2",
     };
     const button = {
@@ -49,12 +48,12 @@ export default function Select({ state, selectOptions: selectOptionsInput, place
         animations: "duration-300",
     };
     const input = {
-        positions: "z-30",
-        layouts: cn(button),
+        positions: "absolute z-30",
+        layout: cn(button),
         styles: "focus:outline-1 outline-0 outline-green-dark text-xs pl-1.5 text-gray-medium",
     };
     const body = {
-        positions: "z-30",
+        positions: "absolute z-30",
         displays: "flex flex-col gap-1 shadow-main hover:shadow-green",
         sizes: `${widthSize[option?.width ?? "md"]} min-h-6.5 max-h-[170px]`,
         paddings: "px-1 py-1",
@@ -88,13 +87,13 @@ export default function Select({ state, selectOptions: selectOptionsInput, place
     });
     const bodyTransitions = useTransition(isOpen, {
         from: {
-            top: isLong ? 64 : 32,
+            top: isLong ? 48 : 32,
         },
         enter: {
-            top: isLong ? 64 : 32,
+            top: isLong ? 48 : 32,
         },
         leave: {
-            top: isLong ? 64 : 32,
+            top: isLong ? 48 : 32,
         },
         config: {
             duration: 0,
@@ -105,8 +104,7 @@ export default function Select({ state, selectOptions: selectOptionsInput, place
     }, [flag]);
     return (_jsxs("div", { className: cn(container), id: `select-box-${uniqueKey}`, onClick: (e) => e.stopPropagation(), children: [_jsx("button", { onClick: () => {
                     setIsOpen(!isOpen), console.log(uniqueKey);
-                }, className: cn(button, "border-1 border-gray-light hover:border-none"), onMouseEnter: () => setIsHover(true), onMouseLeave: () => setIsHover(false), children: value ? (_jsx("div", { className: cn(label, "bg-white/0"), 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, "shadow-main bg-[#f6f6f6]/50"), onChange: (e) => setSearch(e.target.value) }))), bodyTransitions((styles, item) => {
+                }, className: cn(button, "border-1 border-gray-light hover:border-none"), onMouseEnter: () => setIsHover(true), onMouseLeave: () => setIsHover(false), children: value ? (_jsx("div", { className: cn(label, "bg-white/0"), children: selectOptions?.find((option) => value === option.value)?.title })) : (_jsx("div", { className: "text-xs pl-1", children: placeholder ?? "선택해주세요" })) }), bodyTransitions((styles, item) => {
                 return (item && (_jsx(animated.div, { style: styles, className: cn(body), ref: listRef, children: selectOptions?.map(({ value, title }, order) => (_jsx("section", { children: _jsx("div", { className: cn(labelCoating), onClick: () => {
                                 setValue(value);
                                 setText(String(title));