@bds-web/ui 1.5.0 → 1.7.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: 1000,
+        }, 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/dist/TextInput/ui/index.d.ts

@@ -1,3 +1,3 @@
 import { TextInputProps } from "../types/props";
-export declare const TextInput: ({ label, errorMessage, ...props }: TextInputProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TextInput: ({ label, errorMessage, width, id, name, ...props }: TextInputProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/TextInput/ui/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAGhD,eAAO,MAAM,SAAS,GAAI,mCAAmC,cAAc,4CAQ1E,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/TextInput/ui/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAGhD,eAAO,MAAM,SAAS,GAAI,oDAAqD,cAAc,4CAQ5F,CAAC"}

package/dist/TextInput/ui/index.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as S from "./style";
-export const TextInput = ({ label, errorMessage, ...props }) => {
-    return (_jsxs(S.Container, { children: [label && _jsx(S.Label, { children: label }), _jsx(S.TextInput, { "$isError": !!errorMessage, ...props }), errorMessage && _jsx(S.ErrorMessage, { children: errorMessage })] }));
+export const TextInput = ({ label, errorMessage, width, id, name, ...props }) => {
+    return (_jsxs(S.Container, { "$width": width, children: [label && _jsx(S.Label, { htmlFor: id, children: label }), _jsx(S.TextInput, { id: id, name: name, "$isError": !!errorMessage, ...props }), errorMessage && _jsx(S.ErrorMessage, { children: errorMessage })] }));
 };

package/dist/TextInput/ui/style.d.ts

@@ -1,6 +1,8 @@
 export declare const Container: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
+} & {
+    $width?: string | number;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const TextInput: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;

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

@@ -1 +1 @@
-{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../../../src/TextInput/ui/style.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,SAAS;;;yGAKrB,CAAC;AAEF,eAAO,MAAM,SAAS;;;;cAA4B,OAAO;kHA+BxD,CAAC;AAEF,eAAO,MAAM,KAAK;;;kHAGjB,CAAC;AAEF,eAAO,MAAM,YAAY;;;2GAGxB,CAAC"}
+{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../../../src/TextInput/ui/style.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,SAAS;;;;aAAyB,MAAM,GAAG,MAAM;yGAM7D,CAAC;AAEF,eAAO,MAAM,SAAS;;;;cAA4B,OAAO;kHAgCxD,CAAC;AAEF,eAAO,MAAM,KAAK;;;kHAGjB,CAAC;AAEF,eAAO,MAAM,YAAY;;;2GAGxB,CAAC"}

package/dist/TextInput/ui/style.js

@@ -3,12 +3,14 @@ import { shapes } from "@bds-web/shapes";
 import { typoCss } from "@bds-web/typography";
 import styled from "@emotion/styled";
 export const Container = styled.div `
+  width: ${({ $width }) => $width};
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   gap: 4px;
 `;
 export const TextInput = styled.input `
+  width: 100%;
   ${typoCss("Body")};
   height: 48px;
   border-radius: ${shapes.medium};

package/package.json

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