@bds-web/ui 1.6.0 → 1.8.0

package/dist/Dropdown/ui/DropdownPortal.d.ts

@@ -0,0 +1,8 @@
+interface DropdownPortalProps {
+    children: React.ReactNode;
+    containerRef: React.RefObject<HTMLElement | null>;
+    isOpen: boolean;
+}
+export declare const DropdownPortal: ({ children, containerRef, isOpen }: DropdownPortalProps) => import("react").ReactPortal | null;
+export {};
+//# sourceMappingURL=DropdownPortal.d.ts.map

package/dist/Dropdown/ui/DropdownPortal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownPortal.d.ts","sourceRoot":"","sources":["../../../src/Dropdown/ui/DropdownPortal.tsx"],"names":[],"mappings":"AAIA,UAAU,mBAAmB;IAC3B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAClD,MAAM,EAAE,OAAO,CAAC;CACjB;AAED,eAAO,MAAM,cAAc,GAAI,oCAAoC,mBAAmB,uCAgCrF,CAAC"}

package/dist/Dropdown/ui/DropdownPortal.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+export const DropdownPortal = ({ children, containerRef, isOpen }) => {
+    const [position, setPosition] = useState({ top: 0, left: 0, width: 0 });
+    const portalRef = useRef(null);
+    useEffect(() => {
+        if (isOpen && containerRef.current) {
+            const rect = containerRef.current.getBoundingClientRect();
+            setPosition({
+                top: rect.bottom + window.scrollY,
+                left: rect.left + window.scrollX,
+                width: rect.width,
+            });
+        }
+    }, [isOpen, containerRef]);
+    if (!isOpen)
+        return null;
+    return createPortal(_jsx("div", { ref: portalRef, style: {
+            position: "absolute",
+            top: position.top,
+            left: position.left,
+            width: position.width,
+            zIndex: 100000,
+        }, children: children }), document.body);
+};

package/dist/Dropdown/ui/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Dropdown/ui/index.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAI/C,eAAO,MAAM,QAAQ,GAAI,uDAMtB,aAAa,4CA+Bf,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Dropdown/ui/index.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAM/C,eAAO,MAAM,QAAQ,GAAI,uDAMtB,aAAa,4CAkCf,CAAC"}

package/dist/Dropdown/ui/index.js

@@ -4,8 +4,9 @@ import { TriangleIcon } from "../../TriangleIcon";
 import { useDropdown } from "../hooks/useDropdown";
 import * as S from "./style";
 import { useOutsideClick } from "../hooks/useOutsideClick";
+import { DropdownPortal } from "./DropdownPortal";
 export const Dropdown = ({ dropdownSize = "small", onSelect, options, selected, width = "auto", }) => {
     const { isOpen, closeDropdown, toggleDropdown } = useDropdown();
     const containerRef = useOutsideClick(isOpen, closeDropdown);
-    return (_jsxs(S.Container, { ref: containerRef, "$size": dropdownSize, "$width": width, onClick: toggleDropdown, children: [_jsxs(S.SelectedItem, { children: [_jsx(S.SelectedText, { children: selected ? selected.name : "선택해주세요." }), _jsx(TriangleIcon, {})] }), isOpen && (_jsx(S.OptionsList, { "$size": dropdownSize, "$isOpen": true, children: options.map((option, idx) => (_jsx(S.OptionItem, { "$isSelected": selected?.value === option.value, "$size": dropdownSize, onClick: () => onSelect(option), children: option.name }, idx))) }))] }));
+    return (_jsxs(S.Container, { ref: containerRef, "$size": dropdownSize, "$width": width, onClick: toggleDropdown, style: { position: "relative" }, children: [_jsxs(S.SelectedItem, { children: [_jsx(S.SelectedText, { children: selected ? selected.name : "선택해주세요." }), _jsx(TriangleIcon, {})] }), _jsx(DropdownPortal, { containerRef: containerRef, isOpen: isOpen, children: _jsx(S.OptionsList, { "$size": dropdownSize, "$isOpen": isOpen, children: options.map((option, idx) => (_jsx(S.OptionItem, { "$isSelected": selected?.value === option.value, "$size": dropdownSize, onClick: () => onSelect(option), children: option.name }, idx))) }) })] }));
 };

package/dist/Dropdown/ui/style.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../../../src/Dropdown/ui/style.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAK9C,eAAO,MAAM,SAAS;;;;WAAuB,YAAY;YAAU,MAAM;yGASxE,CAAC;AAEF,eAAO,MAAM,YAAY;;;yGAQxB,CAAC;AAEF,eAAO,MAAM,YAAY;;;2GAIxB,CAAC;AAEF,eAAO,MAAM,WAAW;;;;WAAsB,YAAY;aAAW,OAAO;6GAkB3E,CAAC;AAEF,eAAO,MAAM,UAAU;;;;WACd,YAAY;iBACN,OAAO;yGAerB,CAAC"}
+{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../../../src/Dropdown/ui/style.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAK9C,eAAO,MAAM,SAAS;;;;WAAuB,YAAY;YAAU,MAAM;yGASxE,CAAC;AAEF,eAAO,MAAM,YAAY;;;yGAQxB,CAAC;AAEF,eAAO,MAAM,YAAY;;;2GAIxB,CAAC;AAEF,eAAO,MAAM,WAAW;;;;WAAsB,YAAY;aAAW,OAAO;6GAgB3E,CAAC;AAEF,eAAO,MAAM,UAAU;;;;WACd,YAAY;iBACN,OAAO;yGAerB,CAAC"}

package/dist/Dropdown/ui/style.js

@@ -38,9 +38,7 @@ export const OptionsList = styled.ul `
     : `
     box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.05);
   `};
-  position: absolute;
-  top: calc(100% + ${({ $size }) => ($size === "small" ? "4px" : "10px")});
-  left: -1px;
+  position: static;
   box-sizing: border-box;
   z-index: ${({ $isOpen }) => ($isOpen ? 100 : -1)};
   overflow: hidden;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bds-web/ui",
-  "version": "1.6.0",
+  "version": "1.8.0",
   "private": false,
   "type": "module",
   "main": "./dist/index.js",