@wishket/design-system 3.1.0 → 3.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Components/DataDisplays/ProductIcon/Icons/WebSearch.d.ts +4 -0
- package/dist/Components/DataDisplays/ProductIcon/Icons/WebSearch.js +21 -0
- package/dist/Components/DataDisplays/ProductIcon/Icons/index.d.ts +1 -0
- package/dist/Components/DataDisplays/ProductIcon/ProductIcon.constants.d.ts +1 -1
- package/dist/Components/DataDisplays/ProductIcon/ProductIcon.constants.js +1 -1
- package/dist/Components/Inputs/TextFieldDropdown/TextFieldDropdown.d.ts +20 -3
- package/dist/Components/Inputs/TextFieldDropdown/TextFieldDropdown.js +20 -5
- package/dist/Components/Inputs/TextFieldDropdown/TextFieldDropdown.parts.d.ts +5 -2
- package/dist/Components/Inputs/TextFieldDropdown/TextFieldDropdown.parts.js +5 -3
- package/dist/cjs/Components/DataDisplays/ProductIcon/Icons/WebSearch.js +21 -0
- package/dist/cjs/Components/DataDisplays/ProductIcon/ProductIcon.constants.js +1 -1
- package/dist/cjs/Components/Inputs/TextFieldDropdown/TextFieldDropdown.js +5 -3
- package/dist/cjs/Components/Inputs/TextFieldDropdown/TextFieldDropdown.parts.js +5 -3
- package/package.json +1 -1
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import{jsxs as t,jsx as e}from"react/jsx-runtime";import"react";const r=({disabled:r})=>/*#__PURE__*/t("svg",r?{xmlns:"http://www.w3.org/2000/svg",width:"60",height:"60",viewBox:"0 0 60 60",fill:"none","data-testid":"design-system-productIcon-icon-web_search--disabled",children:[
|
|
2
|
+
/*#__PURE__*/e("rect",{x:"6",y:"10",width:"48",height:"40",rx:"6",fill:"white",stroke:"#9E9E9E",strokeWidth:"1.4"}),
|
|
3
|
+
/*#__PURE__*/e("path",{d:"M6 14C6 11.7909 7.79086 10 10 10H50C52.2091 10 54 11.7909 54 14V18H6V14Z",fill:"#E0E0E0",stroke:"#9E9E9E",strokeWidth:"1.4"}),
|
|
4
|
+
/*#__PURE__*/e("circle",{cx:"49",cy:"14",r:"1",fill:"white"}),
|
|
5
|
+
/*#__PURE__*/e("circle",{cx:"45",cy:"14",r:"1",fill:"white"}),
|
|
6
|
+
/*#__PURE__*/e("circle",{cx:"41",cy:"14",r:"1",fill:"white"}),
|
|
7
|
+
/*#__PURE__*/e("path",{d:"M30.0159 45.5773C36.0325 45.5448 40.8826 40.4777 40.849 34.2597C40.8153 28.0417 35.9106 23.0274 29.894 23.06C23.8774 23.0925 19.0273 28.1596 19.0609 34.3776C19.0946 40.5956 23.9993 45.6099 30.0159 45.5773Z",fill:"white",stroke:"#9E9E9E",strokeWidth:"1.4",strokeLinecap:"round",strokeLinejoin:"round"}),
|
|
8
|
+
/*#__PURE__*/e("path",{d:"M36.8296 43.0491L39.5189 46.0803",stroke:"#9E9E9E",strokeWidth:"1.4",strokeLinecap:"round",strokeLinejoin:"round"}),
|
|
9
|
+
/*#__PURE__*/e("path",{d:"M48.4871 55.5285L47.9059 56.0869C47.2563 56.7136 46.2421 56.6681 45.6496 55.9957L39.5415 49.2609C38.9489 48.5886 38.9831 47.5288 39.6327 46.9134L40.2139 46.355C40.8634 45.7283 41.8776 45.7739 42.4702 46.4462L48.5782 53.181C49.1708 53.8533 49.1366 54.9131 48.4871 55.5285Z",fill:"white",stroke:"#9E9E9E",strokeWidth:"1.4",strokeLinecap:"round",strokeLinejoin:"round"}),
|
|
10
|
+
/*#__PURE__*/e("path",{d:"M25 40V39.6465C25.0782 38.5347 25.6615 35 30.003 35H29.997C34.3385 35 34.9218 38.5283 35 39.6465V40",stroke:"#9E9E9E",strokeWidth:"1.4",strokeLinecap:"round",strokeLinejoin:"round"}),
|
|
11
|
+
/*#__PURE__*/e("path",{d:"M30 33C31.3807 33 32.5 31.8807 32.5 30.5C32.5 29.1193 31.3807 28 30 28C28.6193 28 27.5 29.1193 27.5 30.5C27.5 31.8807 28.6193 33 30 33Z",stroke:"#9E9E9E",strokeWidth:"1.4",strokeLinecap:"round",strokeLinejoin:"round"})]}:{xmlns:"http://www.w3.org/2000/svg",width:"60",height:"60",viewBox:"0 0 60 60",fill:"none","data-testid":"design-system-productIcon-icon-web_search",className:"text-primary",children:[
|
|
12
|
+
/*#__PURE__*/e("rect",{x:"6",y:"10",width:"48",height:"40",rx:"6",fill:"white",stroke:"#212121",strokeWidth:"1.4"}),
|
|
13
|
+
/*#__PURE__*/e("path",{d:"M6 14C6 11.7909 7.79086 10 10 10H50C52.2091 10 54 11.7909 54 14V18H6V14Z",fill:"currentColor",stroke:"#212121",strokeWidth:"1.4"}),
|
|
14
|
+
/*#__PURE__*/e("circle",{cx:"49",cy:"14",r:"1",fill:"white"}),
|
|
15
|
+
/*#__PURE__*/e("circle",{cx:"45",cy:"14",r:"1",fill:"white"}),
|
|
16
|
+
/*#__PURE__*/e("circle",{cx:"41",cy:"14",r:"1",fill:"white"}),
|
|
17
|
+
/*#__PURE__*/e("path",{d:"M30.0159 45.5773C36.0325 45.5448 40.8826 40.4777 40.849 34.2597C40.8153 28.0417 35.9106 23.0274 29.894 23.06C23.8774 23.0925 19.0273 28.1596 19.0609 34.3776C19.0946 40.5956 23.9993 45.6099 30.0159 45.5773Z",fill:"white",stroke:"#212121",strokeWidth:"1.4",strokeLinecap:"round",strokeLinejoin:"round"}),
|
|
18
|
+
/*#__PURE__*/e("path",{d:"M36.8296 43.0491L39.5189 46.0803",stroke:"#212121",strokeWidth:"1.4",strokeLinecap:"round",strokeLinejoin:"round"}),
|
|
19
|
+
/*#__PURE__*/e("path",{d:"M48.4871 55.5285L47.9059 56.0869C47.2563 56.7136 46.2421 56.6681 45.6496 55.9957L39.5415 49.2609C38.9489 48.5886 38.9831 47.5288 39.6327 46.9134L40.2139 46.355C40.8634 45.7283 41.8776 45.7739 42.4702 46.4462L48.5782 53.181C49.1708 53.8533 49.1366 54.9131 48.4871 55.5285Z",fill:"white",stroke:"#212121",strokeWidth:"1.4",strokeLinecap:"round",strokeLinejoin:"round"}),
|
|
20
|
+
/*#__PURE__*/e("path",{d:"M25 40V39.6465C25.0782 38.5347 25.6615 35 30.003 35H29.997C34.3385 35 34.9218 38.5283 35 39.6465V40",stroke:"#212121",strokeWidth:"1.4",strokeLinecap:"round",strokeLinejoin:"round"}),
|
|
21
|
+
/*#__PURE__*/e("path",{d:"M30 33C31.3807 33 32.5 31.8807 32.5 30.5C32.5 29.1193 31.3807 28 30 28C28.6193 28 27.5 29.1193 27.5 30.5C27.5 31.8807 28.6193 33 30 33Z",stroke:"#212121",strokeWidth:"1.4",strokeLinecap:"round",strokeLinejoin:"round"})]});export{r as WebSearch};
|
|
@@ -2,6 +2,7 @@ export { WebDevelopment } from './WebDevelopment';
|
|
|
2
2
|
export { WebDomain } from './WebDomain';
|
|
3
3
|
export { WebSecurity } from './WebSecurity';
|
|
4
4
|
export { WebPayment } from './WebPayment';
|
|
5
|
+
export { WebSearch } from './WebSearch';
|
|
5
6
|
export { WidePaperStructure } from './WidePaperStructure';
|
|
6
7
|
export { WidePaperPlan } from './WidePaperPlan';
|
|
7
8
|
export { WidePaperPayment } from './WidePaperPayment';
|
|
@@ -4,7 +4,7 @@ export declare const SmallProductIconNames: readonly ["bookmark", "download", "w
|
|
|
4
4
|
export type SmallProductIconName = (typeof SmallProductIconNames)[number];
|
|
5
5
|
export declare const MediumProductIconNames: readonly ["person_smile", "lock", "logout", "contract_pen", "paper_pen", "paper_hold", "person_office_confirm", "paper_payment_confirm", "search", "search_confirm", "won", "connect", "security", "service", "package", "bubble_person", "write"];
|
|
6
6
|
export type MediumProductIconName = (typeof MediumProductIconNames)[number];
|
|
7
|
-
export declare const LargeProductIconNames: readonly ["web_development", "web_domain", "web_security", "web_payment", "wide_paper_structure", "wide_paper_plan", "wide_paper_payment", "wide_paper_confirm", "paper_project", "paper_contract", "paper_certify", "paper_security", "paper_clock", "paper_confirm", "paper_clip", "paper_clip_clock", "paper_overlap", "paper_hold", "memo_write", "receipt", "document_success", "document_cloud", "person_freelancer", "person_office", "person_smile", "building", "hand_shake", "hand_thumb", "search", "search_confirm", "design", "repair", "card_confirm", "card_write", "bookmark", "idea", "mobile_confirm", "database", "email", "credit", "shield_confirm", "shield_won", "shopping", "bubble_star", "bubble_stars", "calendar", "public", "lock", "logout", "congrats", "discount", "achieve"];
|
|
7
|
+
export declare const LargeProductIconNames: readonly ["web_development", "web_domain", "web_security", "web_payment", "web_search", "wide_paper_structure", "wide_paper_plan", "wide_paper_payment", "wide_paper_confirm", "paper_project", "paper_contract", "paper_certify", "paper_security", "paper_clock", "paper_confirm", "paper_clip", "paper_clip_clock", "paper_overlap", "paper_hold", "memo_write", "receipt", "document_success", "document_cloud", "person_freelancer", "person_office", "person_smile", "building", "hand_shake", "hand_thumb", "search", "search_confirm", "design", "repair", "card_confirm", "card_write", "bookmark", "idea", "mobile_confirm", "database", "email", "credit", "shield_confirm", "shield_won", "shopping", "bubble_star", "bubble_stars", "calendar", "public", "lock", "logout", "congrats", "discount", "achieve"];
|
|
8
8
|
export type LargeProductIconName = (typeof LargeProductIconNames)[number];
|
|
9
9
|
export type ProductIconName = SmallProductIconName | MediumProductIconName | LargeProductIconName;
|
|
10
10
|
export declare const productIcons: Map<ProductIconName, (props: ProductIconPartProps) => React.JSX.Element>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as o}from"react/jsx-runtime";import"react";import{WebDevelopment as r}from"./Icons/WebDevelopment.js";import{WebDomain as e}from"./Icons/WebDomain.js";import{WebSecurity as n}from"./Icons/WebSecurity.js";import{WebPayment as
|
|
1
|
+
import{jsx as o}from"react/jsx-runtime";import"react";import{WebDevelopment as r}from"./Icons/WebDevelopment.js";import{WebDomain as e}from"./Icons/WebDomain.js";import{WebSecurity as n}from"./Icons/WebSecurity.js";import{WebPayment as c}from"./Icons/WebPayment.js";import{WebSearch as p}from"./Icons/WebSearch.js";import{WidePaperStructure as i}from"./Icons/WidePaperStructure.js";import{WidePaperPlan as s}from"./Icons/WidePaperPlan.js";import{WidePaperPayment as m}from"./Icons/WidePaperPayment.js";import{WidePaperConfirm as t}from"./Icons/WidePaperConfirm.js";import{PaperProject as a}from"./Icons/PaperProject.js";import{PaperContract as f}from"./Icons/PaperContract.js";import{PaperCertify as _}from"./Icons/PaperCertify.js";import{PaperSecurity as l}from"./Icons/PaperSecurity.js";import{PaperClock as j}from"./Icons/PaperClock.js";import{PaperConfirm as d}from"./Icons/PaperConfirm.js";import{PaperClip as b}from"./Icons/PaperClip.js";import{PaperOverlap as I}from"./Icons/PaperOverlap.js";import{PaperHold as u}from"./Icons/PaperHold.js";import{MemoWrite as h}from"./Icons/MemoWrite.js";import{Receipt as w}from"./Icons/Receipt.js";import{DocumentSuccess as P}from"./Icons/DocumentSuccess.js";import{DocumentCloud as y}from"./Icons/DocumentCloud.js";import{PersonFreelancer as g}from"./Icons/PersonFreelancer.js";import{PersonOffice as k}from"./Icons/PersonOffice.js";import{PersonSmile as C}from"./Icons/PersonSmile.js";import{Building as S}from"./Icons/Building.js";import{HandShake as v}from"./Icons/HandShake.js";import{HandThumb as W}from"./Icons/HandThumb.js";import{Search as O}from"./Icons/Search.js";import{SearchConfirm as D}from"./Icons/SearchConfirm.js";import{Design as B}from"./Icons/Design.js";import{Repair as H}from"./Icons/Repair.js";import{CardConfirm as M}from"./Icons/CardConfirm.js";import{CardWrite as x}from"./Icons/CardWrite.js";import{Bookmark as E}from"./Icons/Bookmark.js";import{Idea as L}from"./Icons/Idea.js";import{MobileConfirm as R}from"./Icons/MobileConfirm.js";import{Database as A}from"./Icons/Database.js";import{Email as F}from"./Icons/Email.js";import{Credit as T}from"./Icons/Credit.js";import{ShieldConfirm as q}from"./Icons/ShieldConfirm.js";import{ShieldWon as z}from"./Icons/ShieldWon.js";import{Shopping as G}from"./Icons/Shopping.js";import{BubbleStar as J}from"./Icons/BubbleStar.js";import{BubbleStars as K}from"./Icons/BubbleStars.js";import{Calendar as N}from"./Icons/Calendar.js";import{Lock as Q}from"./Icons/Lock.js";import{Logout as U}from"./Icons/Logout.js";import{Congrats as V}from"./Icons/Congrats.js";import{Discount as X}from"./Icons/Discount.js";import{PersonOfficeConfirm as Y}from"./Icons/PersonOfficeConfirm.js";import{PaperPaymentConfirm as Z}from"./Icons/PaperPaymentConfirm.js";import{Won as $}from"./Icons/Won.js";import{Connect as oo}from"./Icons/Connect.js";import{Security as ro}from"./Icons/Security.js";import{Service as eo}from"./Icons/Service.js";import{Download as no}from"./Icons/Download.js";import{Waiting as co}from"./Icons/Waiting.js";import{Achieve as po}from"./Icons/Achieve.js";import{ContractPen as io}from"./Icons/ContractPen.js";import{Package as so}from"./Icons/Package.js";import{PaperClipClock as mo}from"./Icons/PaperClipClock.js";import{PaperPen as to}from"./Icons/PaperPen.js";import{Public as ao}from"./Icons/Public.js";import{BubblePerson as fo}from"./Icons/BubblePerson.js";import{Write as _o}from"./Icons/Write.js";function lo(o,r,e){return r in o?Object.defineProperty(o,r,{value:e,enumerable:!0,configurable:!0,writable:!0}):o[r]=e,o}function jo(o){for(var r=1;r<arguments.length;r++){var e=null!=arguments[r]?arguments[r]:{},n=Object.keys(e);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(e).filter((function(o){return Object.getOwnPropertyDescriptor(e,o).enumerable})))),n.forEach((function(r){lo(o,r,e[r])}))}return o}const bo=["bookmark","download","waiting","search","contract_pen","paper_pen","paper_confirm","won","package"],Io=["person_smile","lock","logout","contract_pen","paper_pen","paper_hold","person_office_confirm","paper_payment_confirm","search","search_confirm","won","connect","security","service","package","bubble_person","write"],uo=["web_development","web_domain","web_security","web_payment","web_search","wide_paper_structure","wide_paper_plan","wide_paper_payment","wide_paper_confirm","paper_project","paper_contract","paper_certify","paper_security","paper_clock","paper_confirm","paper_clip","paper_clip_clock","paper_overlap","paper_hold","memo_write","receipt","document_success","document_cloud","person_freelancer","person_office","person_smile","building","hand_shake","hand_thumb","search","search_confirm","design","repair","card_confirm","card_write","bookmark","idea","mobile_confirm","database","email","credit","shield_confirm","shield_won","shopping","bubble_star","bubble_stars","calendar","public","lock","logout","congrats","discount","achieve"],ho=new Map([["web_development",e=>/*#__PURE__*/o(r,jo({},e))],["web_domain",r=>/*#__PURE__*/o(e,jo({},r))],["web_security",r=>/*#__PURE__*/o(n,jo({},r))],["web_payment",r=>/*#__PURE__*/o(c,jo({},r))],["web_search",r=>/*#__PURE__*/o(p,jo({},r))],["wide_paper_structure",r=>/*#__PURE__*/o(i,jo({},r))],["wide_paper_plan",r=>/*#__PURE__*/o(s,jo({},r))],["wide_paper_payment",r=>/*#__PURE__*/o(m,jo({},r))],["wide_paper_confirm",r=>/*#__PURE__*/o(t,jo({},r))],["paper_project",r=>/*#__PURE__*/o(a,jo({},r))],["paper_contract",r=>/*#__PURE__*/o(f,jo({},r))],["paper_certify",r=>/*#__PURE__*/o(_,jo({},r))],["paper_security",r=>/*#__PURE__*/o(l,jo({},r))],["paper_clock",r=>/*#__PURE__*/o(j,jo({},r))],["paper_confirm",r=>/*#__PURE__*/o(d,jo({},r))],["paper_clip",r=>/*#__PURE__*/o(b,jo({},r))],["paper_overlap",r=>/*#__PURE__*/o(I,jo({},r))],["paper_hold",r=>/*#__PURE__*/o(u,jo({},r))],["memo_write",r=>/*#__PURE__*/o(h,jo({},r))],["receipt",r=>/*#__PURE__*/o(w,jo({},r))],["document_success",r=>/*#__PURE__*/o(P,jo({},r))],["document_cloud",r=>/*#__PURE__*/o(y,jo({},r))],["person_freelancer",r=>/*#__PURE__*/o(g,jo({},r))],["person_office",r=>/*#__PURE__*/o(k,jo({},r))],["person_smile",r=>/*#__PURE__*/o(C,jo({},r))],["building",r=>/*#__PURE__*/o(S,jo({},r))],["hand_shake",r=>/*#__PURE__*/o(v,jo({},r))],["hand_thumb",r=>/*#__PURE__*/o(W,jo({},r))],["search",r=>/*#__PURE__*/o(O,jo({},r))],["search_confirm",r=>/*#__PURE__*/o(D,jo({},r))],["design",r=>/*#__PURE__*/o(B,jo({},r))],["repair",r=>/*#__PURE__*/o(H,jo({},r))],["card_confirm",r=>/*#__PURE__*/o(M,jo({},r))],["card_write",r=>/*#__PURE__*/o(x,jo({},r))],["bookmark",r=>/*#__PURE__*/o(E,jo({},r))],["idea",r=>/*#__PURE__*/o(L,jo({},r))],["mobile_confirm",r=>/*#__PURE__*/o(R,jo({},r))],["database",r=>/*#__PURE__*/o(A,jo({},r))],["email",r=>/*#__PURE__*/o(F,jo({},r))],["credit",r=>/*#__PURE__*/o(T,jo({},r))],["shield_confirm",r=>/*#__PURE__*/o(q,jo({},r))],["shield_won",r=>/*#__PURE__*/o(z,jo({},r))],["shopping",r=>/*#__PURE__*/o(G,jo({},r))],["bubble_star",r=>/*#__PURE__*/o(J,jo({},r))],["bubble_stars",r=>/*#__PURE__*/o(K,jo({},r))],["calendar",r=>/*#__PURE__*/o(N,jo({},r))],["lock",r=>/*#__PURE__*/o(Q,jo({},r))],["logout",r=>/*#__PURE__*/o(U,jo({},r))],["congrats",r=>/*#__PURE__*/o(V,jo({},r))],["discount",r=>/*#__PURE__*/o(X,jo({},r))],["person_office_confirm",()=>/*#__PURE__*/o(Y,{})],["paper_payment_confirm",()=>/*#__PURE__*/o(Z,{})],["won",r=>/*#__PURE__*/o($,jo({},r))],["connect",()=>/*#__PURE__*/o(oo,{})],["security",()=>/*#__PURE__*/o(ro,{})],["service",()=>/*#__PURE__*/o(eo,{})],["download",()=>/*#__PURE__*/o(no,{})],["waiting",()=>/*#__PURE__*/o(co,{})],["achieve",r=>/*#__PURE__*/o(po,jo({},r))],["contract_pen",r=>/*#__PURE__*/o(io,jo({},r))],["package",r=>/*#__PURE__*/o(so,jo({},r))],["paper_clip_clock",r=>/*#__PURE__*/o(mo,jo({},r))],["paper_pen",r=>/*#__PURE__*/o(to,jo({},r))],["public",r=>/*#__PURE__*/o(ao,jo({},r))],["bubble_person",()=>/*#__PURE__*/o(fo,{})],["write",()=>/*#__PURE__*/o(_o,{})]]);export{uo as LargeProductIconNames,Io as MediumProductIconNames,bo as SmallProductIconNames,ho as productIcons};
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { SystemIconName } from '../../DataDisplays/SystemIcon';
|
|
2
|
+
import { SelectBoxVariant } from './TextFieldDropdown.parts';
|
|
2
3
|
export type Item = {
|
|
3
4
|
key: number | string;
|
|
4
5
|
value: string;
|
|
@@ -6,14 +7,17 @@ export type Item = {
|
|
|
6
7
|
};
|
|
7
8
|
export interface TextFieldDropdownProps {
|
|
8
9
|
items: Item[];
|
|
9
|
-
placeholder: string;
|
|
10
10
|
onItemClick: (item: Item) => void;
|
|
11
|
+
placeholder?: string;
|
|
11
12
|
selectedItem?: Item;
|
|
12
13
|
disabled?: boolean;
|
|
13
14
|
supportMessage?: string;
|
|
14
15
|
errorMessage?: string;
|
|
15
16
|
className?: string;
|
|
16
17
|
isError?: boolean;
|
|
18
|
+
variant?: SelectBoxVariant;
|
|
19
|
+
label?: string;
|
|
20
|
+
panelWidth?: 'trigger' | 'viewport';
|
|
17
21
|
}
|
|
18
22
|
/**
|
|
19
23
|
* 드롭다운 형태의 텍스트 필드 컴포넌트입니다.
|
|
@@ -22,14 +26,17 @@ export interface TextFieldDropdownProps {
|
|
|
22
26
|
*
|
|
23
27
|
* @param {Object} props
|
|
24
28
|
* @param {Item[]} props.items - 드롭다운에 표시될 아이템 배열 ({key, value, leadingIcon}[])
|
|
25
|
-
* @param {string} props.placeholder - 선택되지 않은 상태에서 표시될 안내 텍스트
|
|
26
29
|
* @param {(item: Item) => void} props.onItemClick - 아이템 선택 시 호출되는 콜백 함수
|
|
30
|
+
* @param {string} [props.placeholder] - 선택되지 않은 상태에서 표시될 안내 텍스트
|
|
27
31
|
* @param {Item} [props.selectedItem] - 현재 선택된 아이템
|
|
28
32
|
* @param {boolean} [props.disabled] - 비활성화 여부
|
|
29
33
|
* @param {string} [props.supportMessage] - 입력 필드 아래에 표시될 도움말 메시지
|
|
30
34
|
* @param {string} [props.errorMessage] - 오류 발생 시 표시될 메시지
|
|
31
35
|
* @param {string} [props.className] - 추가적인 CSS 클래스명
|
|
32
36
|
* @param {boolean} [props.isError] - 오류 상태 여부
|
|
37
|
+
* @param {'default' | 'label'} [props.variant='default'] - 트리거(SelectBox)의 디자인 변형 타입. `TextField`의 variant와 동일한 시맨틱입니다.
|
|
38
|
+
* @param {string} [props.label] - `variant="label"`일 때 트리거 위에 플로팅되는 라벨
|
|
39
|
+
* @param {'trigger' | 'viewport'} [props.panelWidth='trigger'] - 옵션 패널의 너비 기준. `'trigger'`(기본)는 트리거와 동일한 너비. `'viewport'`는 트리거가 좁아도(예: 모바일 grid 2열) 패널이 화면 전체 너비로 펼쳐져 옵션이 잘리지 않음.
|
|
33
40
|
*
|
|
34
41
|
* @example
|
|
35
42
|
* ```tsx
|
|
@@ -38,6 +45,7 @@ export interface TextFieldDropdownProps {
|
|
|
38
45
|
* { key: 2, value: '옵션 2', leadingIcon: 'settings' }
|
|
39
46
|
* ];
|
|
40
47
|
*
|
|
48
|
+
* // 기본 동작 — placeholder 기반 트리거
|
|
41
49
|
* <TextFieldDropdown
|
|
42
50
|
* items={items}
|
|
43
51
|
* placeholder="옵션을 선택하세요"
|
|
@@ -45,7 +53,16 @@ export interface TextFieldDropdownProps {
|
|
|
45
53
|
* selectedItem={items[0]}
|
|
46
54
|
* supportMessage="추가 설명이 필요한 경우 이곳에 표시됩니다"
|
|
47
55
|
* />
|
|
56
|
+
*
|
|
57
|
+
* // TextField variant="label"과 동일한 플로팅 라벨 트리거
|
|
58
|
+
* <TextFieldDropdown
|
|
59
|
+
* variant="label"
|
|
60
|
+
* label="업종"
|
|
61
|
+
* items={items}
|
|
62
|
+
* onItemClick={(item) => console.log('선택된 아이템:', item)}
|
|
63
|
+
* selectedItem={items[0]}
|
|
64
|
+
* />
|
|
48
65
|
* ```
|
|
49
66
|
*/
|
|
50
|
-
declare const TextFieldDropdown: ({ selectedItem, items, onItemClick, placeholder, disabled, isError, errorMessage, supportMessage, className, }: TextFieldDropdownProps) => import("react/jsx-runtime").JSX.Element;
|
|
67
|
+
declare const TextFieldDropdown: ({ selectedItem, items, onItemClick, placeholder, disabled, isError, errorMessage, supportMessage, className, variant, label, panelWidth, }: TextFieldDropdownProps) => import("react/jsx-runtime").JSX.Element;
|
|
51
68
|
export { TextFieldDropdown };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use client";import{jsxs as e,jsx as
|
|
1
|
+
"use client";import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useState as o,useLayoutEffect as r}from"react";import{twJoin as i}from"tailwind-merge";import{Box as l}from"../../Base/Layouts/Box/Box.js";import"../../Base/Layouts/FullBleed/FullBleed.js";import{List as s}from"../List/List.js";import{SupportTextContainer as n}from"../SupportTextContainer/SupportTextContainer.js";import{useDropdown as a}from"../../../hooks/useDropdown.js";import{SelectBox as d}from"./TextFieldDropdown.parts.js";
|
|
2
2
|
/**
|
|
3
3
|
* 드롭다운 형태의 텍스트 필드 컴포넌트입니다.
|
|
4
4
|
*
|
|
@@ -6,14 +6,17 @@
|
|
|
6
6
|
*
|
|
7
7
|
* @param {Object} props
|
|
8
8
|
* @param {Item[]} props.items - 드롭다운에 표시될 아이템 배열 ({key, value, leadingIcon}[])
|
|
9
|
-
* @param {string} props.placeholder - 선택되지 않은 상태에서 표시될 안내 텍스트
|
|
10
9
|
* @param {(item: Item) => void} props.onItemClick - 아이템 선택 시 호출되는 콜백 함수
|
|
10
|
+
* @param {string} [props.placeholder] - 선택되지 않은 상태에서 표시될 안내 텍스트
|
|
11
11
|
* @param {Item} [props.selectedItem] - 현재 선택된 아이템
|
|
12
12
|
* @param {boolean} [props.disabled] - 비활성화 여부
|
|
13
13
|
* @param {string} [props.supportMessage] - 입력 필드 아래에 표시될 도움말 메시지
|
|
14
14
|
* @param {string} [props.errorMessage] - 오류 발생 시 표시될 메시지
|
|
15
15
|
* @param {string} [props.className] - 추가적인 CSS 클래스명
|
|
16
16
|
* @param {boolean} [props.isError] - 오류 상태 여부
|
|
17
|
+
* @param {'default' | 'label'} [props.variant='default'] - 트리거(SelectBox)의 디자인 변형 타입. `TextField`의 variant와 동일한 시맨틱입니다.
|
|
18
|
+
* @param {string} [props.label] - `variant="label"`일 때 트리거 위에 플로팅되는 라벨
|
|
19
|
+
* @param {'trigger' | 'viewport'} [props.panelWidth='trigger'] - 옵션 패널의 너비 기준. `'trigger'`(기본)는 트리거와 동일한 너비. `'viewport'`는 트리거가 좁아도(예: 모바일 grid 2열) 패널이 화면 전체 너비로 펼쳐져 옵션이 잘리지 않음.
|
|
17
20
|
*
|
|
18
21
|
* @example
|
|
19
22
|
* ```tsx
|
|
@@ -22,6 +25,7 @@
|
|
|
22
25
|
* { key: 2, value: '옵션 2', leadingIcon: 'settings' }
|
|
23
26
|
* ];
|
|
24
27
|
*
|
|
28
|
+
* // 기본 동작 — placeholder 기반 트리거
|
|
25
29
|
* <TextFieldDropdown
|
|
26
30
|
* items={items}
|
|
27
31
|
* placeholder="옵션을 선택하세요"
|
|
@@ -29,7 +33,18 @@
|
|
|
29
33
|
* selectedItem={items[0]}
|
|
30
34
|
* supportMessage="추가 설명이 필요한 경우 이곳에 표시됩니다"
|
|
31
35
|
* />
|
|
36
|
+
*
|
|
37
|
+
* // TextField variant="label"과 동일한 플로팅 라벨 트리거
|
|
38
|
+
* <TextFieldDropdown
|
|
39
|
+
* variant="label"
|
|
40
|
+
* label="업종"
|
|
41
|
+
* items={items}
|
|
42
|
+
* onItemClick={(item) => console.log('선택된 아이템:', item)}
|
|
43
|
+
* selectedItem={items[0]}
|
|
44
|
+
* />
|
|
32
45
|
* ```
|
|
33
|
-
*/const
|
|
34
|
-
|
|
35
|
-
|
|
46
|
+
*/const p=({selectedItem:p,items:m,onItemClick:c,placeholder:u,disabled:f,isError:g,errorMessage:v,supportMessage:w,className:x,variant:h="default",label:I,panelWidth:L="trigger"})=>{const{isListOpen:y,focusedIndex:b,ref:k,handleItemClick:C,toggleListOpen:j,handleKeyDown:B}=a({items:m,onItemClick:c,disabled:f}),D=!!w||!!v,F="label"===h?72:54,E="viewport"===L,[M,N]=o(0);
|
|
47
|
+
// viewport 패널은 트리거 폭을 벗어나 화면 전체 너비로 떠야 하므로,
|
|
48
|
+
// 트리거의 화면상 위치를 측정해 fixed로 배치한다. (스크롤/리사이즈 시 추적)
|
|
49
|
+
return r((()=>{if(!y||!E)return;const e=k.current;if(!e)return;const t=()=>{N(e.getBoundingClientRect().top+F)};return t(),window.addEventListener("scroll",t,!0),window.addEventListener("resize",t),()=>{window.removeEventListener("scroll",t,!0),window.removeEventListener("resize",t)}}),[y,E,F,k]),/*#__PURE__*/e("div",{"data-testid":"design-system--textFieldDropdown",ref:k,className:"relative flex w-full flex-col gap-2 outline-hidden",onKeyDown:B,tabIndex:0,children:[
|
|
50
|
+
/*#__PURE__*/t(d,{placeholder:u,value:null==p?void 0:p.value,leadingIcon:null==p?void 0:p.leadingIcon,disabled:f,isListOpen:y,onClick:j,error:g,className:x,variant:h,label:I}),D&&/*#__PURE__*/t(n,{errorMessage:v,supportMessage:w}),y&&/*#__PURE__*/t(l,{"data-testid":"design-system--textFieldDropdown-panel",className:i("z-40",E?"fixed right-5 left-5":i("absolute w-full","label"===h?"top-[72px]":"top-[54px]")),style:E?{top:M}:void 0,children:/*#__PURE__*/t(s.Root,{children:m.map(((e,o)=>/*#__PURE__*/t(s.Item,{text:e.value,leadingIcon:e.leadingIcon,onClick:()=>C(e),selected:e.key===(null==p?void 0:p.key),isFocused:o===b},e.key)))})})]})};export{p as TextFieldDropdown};
|
|
@@ -1,13 +1,16 @@
|
|
|
1
1
|
import { SystemIconName } from '../../DataDisplays/SystemIcon';
|
|
2
|
+
export type SelectBoxVariant = 'default' | 'label';
|
|
2
3
|
interface SelectBoxProps {
|
|
3
|
-
placeholder: string;
|
|
4
4
|
isListOpen: boolean;
|
|
5
|
+
placeholder?: string;
|
|
5
6
|
value?: string;
|
|
6
7
|
leadingIcon?: SystemIconName;
|
|
7
8
|
disabled?: boolean;
|
|
8
9
|
error?: boolean;
|
|
9
10
|
onClick?: () => void;
|
|
10
11
|
className?: string;
|
|
12
|
+
variant?: SelectBoxVariant;
|
|
13
|
+
label?: string;
|
|
11
14
|
}
|
|
12
|
-
export declare const SelectBox: ({ placeholder, value, isListOpen, disabled, error, onClick, className, }: SelectBoxProps) => import("react/jsx-runtime").JSX.Element;
|
|
15
|
+
export declare const SelectBox: ({ placeholder, value, isListOpen, disabled, error, onClick, className, variant, label, }: SelectBoxProps) => import("react/jsx-runtime").JSX.Element;
|
|
13
16
|
export {};
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
-
import{jsxs as t,jsx as e}from"react/jsx-runtime";import{twJoin as s}from"tailwind-merge";import"../../DataDisplays/Avatar/Avatar.js";import{Typography as
|
|
2
|
-
/*#__PURE__*/e(
|
|
3
|
-
|
|
1
|
+
import{jsxs as t,jsx as e}from"react/jsx-runtime";import{twJoin as a,twMerge as s}from"tailwind-merge";import"../../DataDisplays/Avatar/Avatar.js";import{Typography as r}from"../../Base/Typography/Typography.js";import{Box as o}from"../../Base/Layouts/Box/Box.js";import"../../Base/Layouts/FullBleed/FullBleed.js";import"react";import{SystemIcon as i}from"../../DataDisplays/SystemIcon/SystemIcon.js";import"../../DataDisplays/SystemIcon/SystemIcon.constants.js";import"../../DataDisplays/Accordion/Accordion.js";import{TextFieldContainer as l}from"../TextFieldContainer/TextFieldContainer.js";const n=({placeholder:s="",value:o="",isListOpen:n,disabled:c=!1,error:m,onClick:y,className:p,variant:x="default",label:g})=>/*#__PURE__*/t(l,{isDisabled:c,isFocused:n,isError:m,testId:"design-system--selectBox",onClick:y,className:p,children:["label"===x?/*#__PURE__*/e(d,{label:g,value:o,placeholder:s,isFocused:n,isError:m,disabled:c}):/*#__PURE__*/e(r,{"data-testid":"design-system--selectBox-text",variant:"body16",className:a(c&&o?"text-w-gray-300":c&&!o?"text-w-gray-200":o?"text-w-gray-600":"text-w-gray-300","w-full"),children:o||s}),
|
|
2
|
+
/*#__PURE__*/e("div",{className:a("transition-transform duration-300",n&&"rotate-180"),children:/*#__PURE__*/e(i,{name:"medium_arrow_down",className:c?"text-w-gray-300":"text-w-gray-600",testId:"design-system--selectBox-icon"})})]}),d=({label:i,value:l,placeholder:n,isFocused:d,isError:c,disabled:m})=>{const y=!!n;/*#__PURE__*/
|
|
3
|
+
return t(o,{className:"relative flex h-[42px] w-full flex-col gap-0.5 py-px","data-testid":"design-system--selectBox-label",children:[
|
|
4
|
+
/*#__PURE__*/e("div",{className:s("tracking-default absolute",m?"text-w-gray-400":c?"text-w-red-500":d?"text-primary-500":"text-w-gray-400 group-hover:text-primary-500",y?"typo-caption11":d||l?"scale-[0.6875] -translate-y-0.5 origin-top-left transition-transform duration-300":"typo-body16 transition-transform duration-300 translate-y-2 origin-top-left"),"data-testid":"design-system--label-text",children:i}),
|
|
5
|
+
/*#__PURE__*/e(r,{"data-testid":"design-system--selectBox-text",variant:"body16",className:a(m?"text-w-gray-300":l?"text-w-gray-600":"text-w-gray-300","w-full pt-[14px]"),children:l||(y?n:"")})]})};export{n as SelectBox};
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
"use strict";var e=require("react/jsx-runtime");require("react");exports.WebSearch=({disabled:t})=>t?/*#__PURE__*/e.jsxs("svg",{xmlns:"http://www.w3.org/2000/svg",width:"60",height:"60",viewBox:"0 0 60 60",fill:"none","data-testid":"design-system-productIcon-icon-web_search--disabled",children:[
|
|
2
|
+
/*#__PURE__*/e.jsx("rect",{x:"6",y:"10",width:"48",height:"40",rx:"6",fill:"white",stroke:"#9E9E9E",strokeWidth:"1.4"}),
|
|
3
|
+
/*#__PURE__*/e.jsx("path",{d:"M6 14C6 11.7909 7.79086 10 10 10H50C52.2091 10 54 11.7909 54 14V18H6V14Z",fill:"#E0E0E0",stroke:"#9E9E9E",strokeWidth:"1.4"}),
|
|
4
|
+
/*#__PURE__*/e.jsx("circle",{cx:"49",cy:"14",r:"1",fill:"white"}),
|
|
5
|
+
/*#__PURE__*/e.jsx("circle",{cx:"45",cy:"14",r:"1",fill:"white"}),
|
|
6
|
+
/*#__PURE__*/e.jsx("circle",{cx:"41",cy:"14",r:"1",fill:"white"}),
|
|
7
|
+
/*#__PURE__*/e.jsx("path",{d:"M30.0159 45.5773C36.0325 45.5448 40.8826 40.4777 40.849 34.2597C40.8153 28.0417 35.9106 23.0274 29.894 23.06C23.8774 23.0925 19.0273 28.1596 19.0609 34.3776C19.0946 40.5956 23.9993 45.6099 30.0159 45.5773Z",fill:"white",stroke:"#9E9E9E",strokeWidth:"1.4",strokeLinecap:"round",strokeLinejoin:"round"}),
|
|
8
|
+
/*#__PURE__*/e.jsx("path",{d:"M36.8296 43.0491L39.5189 46.0803",stroke:"#9E9E9E",strokeWidth:"1.4",strokeLinecap:"round",strokeLinejoin:"round"}),
|
|
9
|
+
/*#__PURE__*/e.jsx("path",{d:"M48.4871 55.5285L47.9059 56.0869C47.2563 56.7136 46.2421 56.6681 45.6496 55.9957L39.5415 49.2609C38.9489 48.5886 38.9831 47.5288 39.6327 46.9134L40.2139 46.355C40.8634 45.7283 41.8776 45.7739 42.4702 46.4462L48.5782 53.181C49.1708 53.8533 49.1366 54.9131 48.4871 55.5285Z",fill:"white",stroke:"#9E9E9E",strokeWidth:"1.4",strokeLinecap:"round",strokeLinejoin:"round"}),
|
|
10
|
+
/*#__PURE__*/e.jsx("path",{d:"M25 40V39.6465C25.0782 38.5347 25.6615 35 30.003 35H29.997C34.3385 35 34.9218 38.5283 35 39.6465V40",stroke:"#9E9E9E",strokeWidth:"1.4",strokeLinecap:"round",strokeLinejoin:"round"}),
|
|
11
|
+
/*#__PURE__*/e.jsx("path",{d:"M30 33C31.3807 33 32.5 31.8807 32.5 30.5C32.5 29.1193 31.3807 28 30 28C28.6193 28 27.5 29.1193 27.5 30.5C27.5 31.8807 28.6193 33 30 33Z",stroke:"#9E9E9E",strokeWidth:"1.4",strokeLinecap:"round",strokeLinejoin:"round"})]}):/*#__PURE__*/e.jsxs("svg",{xmlns:"http://www.w3.org/2000/svg",width:"60",height:"60",viewBox:"0 0 60 60",fill:"none","data-testid":"design-system-productIcon-icon-web_search",className:"text-primary",children:[
|
|
12
|
+
/*#__PURE__*/e.jsx("rect",{x:"6",y:"10",width:"48",height:"40",rx:"6",fill:"white",stroke:"#212121",strokeWidth:"1.4"}),
|
|
13
|
+
/*#__PURE__*/e.jsx("path",{d:"M6 14C6 11.7909 7.79086 10 10 10H50C52.2091 10 54 11.7909 54 14V18H6V14Z",fill:"currentColor",stroke:"#212121",strokeWidth:"1.4"}),
|
|
14
|
+
/*#__PURE__*/e.jsx("circle",{cx:"49",cy:"14",r:"1",fill:"white"}),
|
|
15
|
+
/*#__PURE__*/e.jsx("circle",{cx:"45",cy:"14",r:"1",fill:"white"}),
|
|
16
|
+
/*#__PURE__*/e.jsx("circle",{cx:"41",cy:"14",r:"1",fill:"white"}),
|
|
17
|
+
/*#__PURE__*/e.jsx("path",{d:"M30.0159 45.5773C36.0325 45.5448 40.8826 40.4777 40.849 34.2597C40.8153 28.0417 35.9106 23.0274 29.894 23.06C23.8774 23.0925 19.0273 28.1596 19.0609 34.3776C19.0946 40.5956 23.9993 45.6099 30.0159 45.5773Z",fill:"white",stroke:"#212121",strokeWidth:"1.4",strokeLinecap:"round",strokeLinejoin:"round"}),
|
|
18
|
+
/*#__PURE__*/e.jsx("path",{d:"M36.8296 43.0491L39.5189 46.0803",stroke:"#212121",strokeWidth:"1.4",strokeLinecap:"round",strokeLinejoin:"round"}),
|
|
19
|
+
/*#__PURE__*/e.jsx("path",{d:"M48.4871 55.5285L47.9059 56.0869C47.2563 56.7136 46.2421 56.6681 45.6496 55.9957L39.5415 49.2609C38.9489 48.5886 38.9831 47.5288 39.6327 46.9134L40.2139 46.355C40.8634 45.7283 41.8776 45.7739 42.4702 46.4462L48.5782 53.181C49.1708 53.8533 49.1366 54.9131 48.4871 55.5285Z",fill:"white",stroke:"#212121",strokeWidth:"1.4",strokeLinecap:"round",strokeLinejoin:"round"}),
|
|
20
|
+
/*#__PURE__*/e.jsx("path",{d:"M25 40V39.6465C25.0782 38.5347 25.6615 35 30.003 35H29.997C34.3385 35 34.9218 38.5283 35 39.6465V40",stroke:"#212121",strokeWidth:"1.4",strokeLinecap:"round",strokeLinejoin:"round"}),
|
|
21
|
+
/*#__PURE__*/e.jsx("path",{d:"M30 33C31.3807 33 32.5 31.8807 32.5 30.5C32.5 29.1193 31.3807 28 30 28C28.6193 28 27.5 29.1193 27.5 30.5C27.5 31.8807 28.6193 33 30 33Z",stroke:"#212121",strokeWidth:"1.4",strokeLinecap:"round",strokeLinejoin:"round"})]});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var e=require("react/jsx-runtime");require("react");var r=require("./Icons/WebDevelopment.js"),s=require("./Icons/WebDomain.js"),o=require("./Icons/WebSecurity.js"),n=require("./Icons/WebPayment.js"),i=require("./Icons/
|
|
1
|
+
"use strict";var e=require("react/jsx-runtime");require("react");var r=require("./Icons/WebDevelopment.js"),s=require("./Icons/WebDomain.js"),o=require("./Icons/WebSecurity.js"),n=require("./Icons/WebPayment.js"),i=require("./Icons/WebSearch.js"),c=require("./Icons/WidePaperStructure.js"),a=require("./Icons/WidePaperPlan.js"),p=require("./Icons/WidePaperPayment.js"),t=require("./Icons/WidePaperConfirm.js"),u=require("./Icons/PaperProject.js"),j=require("./Icons/PaperContract.js"),l=require("./Icons/PaperCertify.js"),_=require("./Icons/PaperSecurity.js"),m=require("./Icons/PaperClock.js"),d=require("./Icons/PaperConfirm.js"),b=require("./Icons/PaperClip.js"),I=require("./Icons/PaperOverlap.js"),x=require("./Icons/PaperHold.js"),q=require("./Icons/MemoWrite.js"),f=require("./Icons/Receipt.js"),P=require("./Icons/DocumentSuccess.js"),h=require("./Icons/DocumentCloud.js"),C=require("./Icons/PersonFreelancer.js"),w=require("./Icons/PersonOffice.js"),g=require("./Icons/PersonSmile.js"),y=require("./Icons/Building.js"),S=require("./Icons/HandShake.js"),k=require("./Icons/HandThumb.js"),W=require("./Icons/Search.js"),v=require("./Icons/SearchConfirm.js"),D=require("./Icons/Design.js"),O=require("./Icons/Repair.js"),B=require("./Icons/CardConfirm.js"),H=require("./Icons/CardWrite.js"),M=require("./Icons/Bookmark.js"),L=require("./Icons/Idea.js"),R=require("./Icons/MobileConfirm.js"),E=require("./Icons/Database.js"),N=require("./Icons/Email.js"),A=require("./Icons/Credit.js"),F=require("./Icons/ShieldConfirm.js"),T=require("./Icons/ShieldWon.js"),z=require("./Icons/Shopping.js"),G=require("./Icons/BubbleStar.js"),J=require("./Icons/BubbleStars.js"),K=require("./Icons/Calendar.js"),Q=require("./Icons/Lock.js"),U=require("./Icons/Logout.js"),V=require("./Icons/Congrats.js"),X=require("./Icons/Discount.js"),Y=require("./Icons/PersonOfficeConfirm.js"),Z=require("./Icons/PaperPaymentConfirm.js"),$=require("./Icons/Won.js"),ee=require("./Icons/Connect.js"),re=require("./Icons/Security.js"),se=require("./Icons/Service.js"),oe=require("./Icons/Download.js"),ne=require("./Icons/Waiting.js"),ie=require("./Icons/Achieve.js"),ce=require("./Icons/ContractPen.js"),ae=require("./Icons/Package.js"),pe=require("./Icons/PaperClipClock.js"),te=require("./Icons/PaperPen.js"),ue=require("./Icons/Public.js"),je=require("./Icons/BubblePerson.js"),le=require("./Icons/Write.js");function _e(e,r,s){return r in e?Object.defineProperty(e,r,{value:s,enumerable:!0,configurable:!0,writable:!0}):e[r]=s,e}function me(e){for(var r=1;r<arguments.length;r++){var s=null!=arguments[r]?arguments[r]:{},o=Object.keys(s);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(s).filter((function(e){return Object.getOwnPropertyDescriptor(s,e).enumerable})))),o.forEach((function(r){_e(e,r,s[r])}))}return e}const de=new Map([["web_development",s=>/*#__PURE__*/e.jsx(r.WebDevelopment,me({},s))],["web_domain",r=>/*#__PURE__*/e.jsx(s.WebDomain,me({},r))],["web_security",r=>/*#__PURE__*/e.jsx(o.WebSecurity,me({},r))],["web_payment",r=>/*#__PURE__*/e.jsx(n.WebPayment,me({},r))],["web_search",r=>/*#__PURE__*/e.jsx(i.WebSearch,me({},r))],["wide_paper_structure",r=>/*#__PURE__*/e.jsx(c.WidePaperStructure,me({},r))],["wide_paper_plan",r=>/*#__PURE__*/e.jsx(a.WidePaperPlan,me({},r))],["wide_paper_payment",r=>/*#__PURE__*/e.jsx(p.WidePaperPayment,me({},r))],["wide_paper_confirm",r=>/*#__PURE__*/e.jsx(t.WidePaperConfirm,me({},r))],["paper_project",r=>/*#__PURE__*/e.jsx(u.PaperProject,me({},r))],["paper_contract",r=>/*#__PURE__*/e.jsx(j.PaperContract,me({},r))],["paper_certify",r=>/*#__PURE__*/e.jsx(l.PaperCertify,me({},r))],["paper_security",r=>/*#__PURE__*/e.jsx(_.PaperSecurity,me({},r))],["paper_clock",r=>/*#__PURE__*/e.jsx(m.PaperClock,me({},r))],["paper_confirm",r=>/*#__PURE__*/e.jsx(d.PaperConfirm,me({},r))],["paper_clip",r=>/*#__PURE__*/e.jsx(b.PaperClip,me({},r))],["paper_overlap",r=>/*#__PURE__*/e.jsx(I.PaperOverlap,me({},r))],["paper_hold",r=>/*#__PURE__*/e.jsx(x.PaperHold,me({},r))],["memo_write",r=>/*#__PURE__*/e.jsx(q.MemoWrite,me({},r))],["receipt",r=>/*#__PURE__*/e.jsx(f.Receipt,me({},r))],["document_success",r=>/*#__PURE__*/e.jsx(P.DocumentSuccess,me({},r))],["document_cloud",r=>/*#__PURE__*/e.jsx(h.DocumentCloud,me({},r))],["person_freelancer",r=>/*#__PURE__*/e.jsx(C.PersonFreelancer,me({},r))],["person_office",r=>/*#__PURE__*/e.jsx(w.PersonOffice,me({},r))],["person_smile",r=>/*#__PURE__*/e.jsx(g.PersonSmile,me({},r))],["building",r=>/*#__PURE__*/e.jsx(y.Building,me({},r))],["hand_shake",r=>/*#__PURE__*/e.jsx(S.HandShake,me({},r))],["hand_thumb",r=>/*#__PURE__*/e.jsx(k.HandThumb,me({},r))],["search",r=>/*#__PURE__*/e.jsx(W.Search,me({},r))],["search_confirm",r=>/*#__PURE__*/e.jsx(v.SearchConfirm,me({},r))],["design",r=>/*#__PURE__*/e.jsx(D.Design,me({},r))],["repair",r=>/*#__PURE__*/e.jsx(O.Repair,me({},r))],["card_confirm",r=>/*#__PURE__*/e.jsx(B.CardConfirm,me({},r))],["card_write",r=>/*#__PURE__*/e.jsx(H.CardWrite,me({},r))],["bookmark",r=>/*#__PURE__*/e.jsx(M.Bookmark,me({},r))],["idea",r=>/*#__PURE__*/e.jsx(L.Idea,me({},r))],["mobile_confirm",r=>/*#__PURE__*/e.jsx(R.MobileConfirm,me({},r))],["database",r=>/*#__PURE__*/e.jsx(E.Database,me({},r))],["email",r=>/*#__PURE__*/e.jsx(N.Email,me({},r))],["credit",r=>/*#__PURE__*/e.jsx(A.Credit,me({},r))],["shield_confirm",r=>/*#__PURE__*/e.jsx(F.ShieldConfirm,me({},r))],["shield_won",r=>/*#__PURE__*/e.jsx(T.ShieldWon,me({},r))],["shopping",r=>/*#__PURE__*/e.jsx(z.Shopping,me({},r))],["bubble_star",r=>/*#__PURE__*/e.jsx(G.BubbleStar,me({},r))],["bubble_stars",r=>/*#__PURE__*/e.jsx(J.BubbleStars,me({},r))],["calendar",r=>/*#__PURE__*/e.jsx(K.Calendar,me({},r))],["lock",r=>/*#__PURE__*/e.jsx(Q.Lock,me({},r))],["logout",r=>/*#__PURE__*/e.jsx(U.Logout,me({},r))],["congrats",r=>/*#__PURE__*/e.jsx(V.Congrats,me({},r))],["discount",r=>/*#__PURE__*/e.jsx(X.Discount,me({},r))],["person_office_confirm",()=>/*#__PURE__*/e.jsx(Y.PersonOfficeConfirm,{})],["paper_payment_confirm",()=>/*#__PURE__*/e.jsx(Z.PaperPaymentConfirm,{})],["won",r=>/*#__PURE__*/e.jsx($.Won,me({},r))],["connect",()=>/*#__PURE__*/e.jsx(ee.Connect,{})],["security",()=>/*#__PURE__*/e.jsx(re.Security,{})],["service",()=>/*#__PURE__*/e.jsx(se.Service,{})],["download",()=>/*#__PURE__*/e.jsx(oe.Download,{})],["waiting",()=>/*#__PURE__*/e.jsx(ne.Waiting,{})],["achieve",r=>/*#__PURE__*/e.jsx(ie.Achieve,me({},r))],["contract_pen",r=>/*#__PURE__*/e.jsx(ce.ContractPen,me({},r))],["package",r=>/*#__PURE__*/e.jsx(ae.Package,me({},r))],["paper_clip_clock",r=>/*#__PURE__*/e.jsx(pe.PaperClipClock,me({},r))],["paper_pen",r=>/*#__PURE__*/e.jsx(te.PaperPen,me({},r))],["public",r=>/*#__PURE__*/e.jsx(ue.Public,me({},r))],["bubble_person",()=>/*#__PURE__*/e.jsx(je.BubblePerson,{})],["write",()=>/*#__PURE__*/e.jsx(le.Write,{})]]);exports.LargeProductIconNames=["web_development","web_domain","web_security","web_payment","web_search","wide_paper_structure","wide_paper_plan","wide_paper_payment","wide_paper_confirm","paper_project","paper_contract","paper_certify","paper_security","paper_clock","paper_confirm","paper_clip","paper_clip_clock","paper_overlap","paper_hold","memo_write","receipt","document_success","document_cloud","person_freelancer","person_office","person_smile","building","hand_shake","hand_thumb","search","search_confirm","design","repair","card_confirm","card_write","bookmark","idea","mobile_confirm","database","email","credit","shield_confirm","shield_won","shopping","bubble_star","bubble_stars","calendar","public","lock","logout","congrats","discount","achieve"],exports.MediumProductIconNames=["person_smile","lock","logout","contract_pen","paper_pen","paper_hold","person_office_confirm","paper_payment_confirm","search","search_confirm","won","connect","security","service","package","bubble_person","write"],exports.SmallProductIconNames=["bookmark","download","waiting","search","contract_pen","paper_pen","paper_confirm","won","package"],exports.productIcons=de;
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
-
"use client";"use strict";var e=require("react/jsx-runtime")
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
"use client";"use strict";var e=require("react/jsx-runtime"),t=require("react"),r=require("tailwind-merge"),s=require("../../Base/Layouts/Box/Box.js");require("../../Base/Layouts/FullBleed/FullBleed.js");var i=require("../List/List.js"),l=require("../SupportTextContainer/SupportTextContainer.js"),o=require("../../../hooks/useDropdown.js"),n=require("./TextFieldDropdown.parts.js");exports.TextFieldDropdown=({selectedItem:a,items:d,onItemClick:u,placeholder:c,disabled:p,isError:x,errorMessage:w,supportMessage:v,className:g,variant:m="default",label:f,panelWidth:L="trigger"})=>{const{isListOpen:j,focusedIndex:h,ref:y,handleItemClick:I,toggleListOpen:b,handleKeyDown:k}=o.useDropdown({items:d,onItemClick:u,disabled:p}),q=!!v||!!w,B="label"===m?72:54,C="viewport"===L,[D,F]=t.useState(0);
|
|
2
|
+
// viewport 패널은 트리거 폭을 벗어나 화면 전체 너비로 떠야 하므로,
|
|
3
|
+
// 트리거의 화면상 위치를 측정해 fixed로 배치한다. (스크롤/리사이즈 시 추적)
|
|
4
|
+
return t.useLayoutEffect((()=>{if(!j||!C)return;const e=y.current;if(!e)return;const t=()=>{F(e.getBoundingClientRect().top+B)};return t(),window.addEventListener("scroll",t,!0),window.addEventListener("resize",t),()=>{window.removeEventListener("scroll",t,!0),window.removeEventListener("resize",t)}}),[j,C,B,y]),/*#__PURE__*/e.jsxs("div",{"data-testid":"design-system--textFieldDropdown",ref:y,className:"relative flex w-full flex-col gap-2 outline-hidden",onKeyDown:k,tabIndex:0,children:[
|
|
5
|
+
/*#__PURE__*/e.jsx(n.SelectBox,{placeholder:c,value:null==a?void 0:a.value,leadingIcon:null==a?void 0:a.leadingIcon,disabled:p,isListOpen:j,onClick:b,error:x,className:g,variant:m,label:f}),q&&/*#__PURE__*/e.jsx(l.SupportTextContainer,{errorMessage:w,supportMessage:v}),j&&/*#__PURE__*/e.jsx(s.Box,{"data-testid":"design-system--textFieldDropdown-panel",className:r.twJoin("z-40",C?"fixed right-5 left-5":r.twJoin("absolute w-full","label"===m?"top-[72px]":"top-[54px]")),style:C?{top:D}:void 0,children:/*#__PURE__*/e.jsx(i.List.Root,{children:d.map(((t,r)=>/*#__PURE__*/e.jsx(i.List.Item,{text:t.value,leadingIcon:t.leadingIcon,onClick:()=>I(t),selected:t.key===(null==a?void 0:a.key),isFocused:r===h},t.key)))})})]})};
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
-
"use strict";var e=require("react/jsx-runtime"),
|
|
2
|
-
|
|
3
|
-
/*#__PURE__*/e.jsx("div",{className:
|
|
1
|
+
"use strict";var e=require("react/jsx-runtime"),t=require("tailwind-merge");require("../../DataDisplays/Avatar/Avatar.js");var a=require("../../Base/Typography/Typography.js"),s=require("../../Base/Layouts/Box/Box.js");require("../../Base/Layouts/FullBleed/FullBleed.js"),require("react");var r=require("../../DataDisplays/SystemIcon/SystemIcon.js");require("../../DataDisplays/SystemIcon/SystemIcon.constants.js"),require("../../DataDisplays/Accordion/Accordion.js");var i=require("../TextFieldContainer/TextFieldContainer.js");const l=({label:r,value:i,placeholder:l,isFocused:o,isError:n,disabled:d})=>{const c=!!l;/*#__PURE__*/
|
|
2
|
+
return e.jsxs(s.Box,{className:"relative flex h-[42px] w-full flex-col gap-0.5 py-px","data-testid":"design-system--selectBox-label",children:[
|
|
3
|
+
/*#__PURE__*/e.jsx("div",{className:t.twMerge("tracking-default absolute",d?"text-w-gray-400":n?"text-w-red-500":o?"text-primary-500":"text-w-gray-400 group-hover:text-primary-500",c?"typo-caption11":o||i?"scale-[0.6875] -translate-y-0.5 origin-top-left transition-transform duration-300":"typo-body16 transition-transform duration-300 translate-y-2 origin-top-left"),"data-testid":"design-system--label-text",children:r}),
|
|
4
|
+
/*#__PURE__*/e.jsx(a.Typography,{"data-testid":"design-system--selectBox-text",variant:"body16",className:t.twJoin(d?"text-w-gray-300":i?"text-w-gray-600":"text-w-gray-300","w-full pt-[14px]"),children:i||(c?l:"")})]})};exports.SelectBox=({placeholder:s="",value:o="",isListOpen:n,disabled:d=!1,error:c,onClick:y,className:x,variant:u="default",label:p})=>/*#__PURE__*/e.jsxs(i.TextFieldContainer,{isDisabled:d,isFocused:n,isError:c,testId:"design-system--selectBox",onClick:y,className:x,children:["label"===u?/*#__PURE__*/e.jsx(l,{label:p,value:o,placeholder:s,isFocused:n,isError:c,disabled:d}):/*#__PURE__*/e.jsx(a.Typography,{"data-testid":"design-system--selectBox-text",variant:"body16",className:t.twJoin(d&&o?"text-w-gray-300":d&&!o?"text-w-gray-200":o?"text-w-gray-600":"text-w-gray-300","w-full"),children:o||s}),
|
|
5
|
+
/*#__PURE__*/e.jsx("div",{className:t.twJoin("transition-transform duration-300",n&&"rotate-180"),children:/*#__PURE__*/e.jsx(r.SystemIcon,{name:"medium_arrow_down",className:d?"text-w-gray-300":"text-w-gray-600",testId:"design-system--selectBox-icon"})})]});
|