@wishket/design-system 3.4.0 → 3.4.2

package/dist/Components/Inputs/FilterList/FilterList.js

@@ -1,4 +1,4 @@
-import{jsxs as e,jsx as t}from"react/jsx-runtime";import{twMerge as s}from"tailwind-merge";import{Typography as a}from"../../Base/Typography/Typography.js";import{Box as l}from"../../Base/Layouts/Box/Box.js";import"../../Base/Layouts/FullBleed/FullBleed.js";import"../../DataDisplays/Avatar/Avatar.js";import"react";import{SystemIcon as i}from"../../DataDisplays/SystemIcon/SystemIcon.js";import"../../DataDisplays/SystemIcon/SystemIcon.constants.js";import{Divider as r}from"../../DataDisplays/Divider/Divider.js";import"../../DataDisplays/Accordion/Accordion.js";import{Button as n}from"../Button/Button.js";import{Checkbox as o}from"../Checkbox/Checkbox.js";import{CheckboxListItem as c}from"../CheckboxListItem/CheckboxListItem.js";
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import{twMerge as s}from"tailwind-merge";import{Typography as a}from"../../Base/Typography/Typography.js";import{Box as l}from"../../Base/Layouts/Box/Box.js";import"../../Base/Layouts/FullBleed/FullBleed.js";import"../../DataDisplays/Avatar/Avatar.js";import"react";import{SystemIcon as i}from"../../DataDisplays/SystemIcon/SystemIcon.js";import"../../DataDisplays/SystemIcon/SystemIcon.constants.js";import{Divider as r}from"../../DataDisplays/Divider/Divider.js";import"../../DataDisplays/Accordion/Accordion.js";import{Button as n}from"../Button/Button.js";import{Checkbox as o}from"../Checkbox/Checkbox.js";import{CheckboxListItem as m}from"../CheckboxListItem/CheckboxListItem.js";
 /**
  * 필터 목록을 표시하고 관리하는 컴포넌트입니다.
  *
@@ -39,18 +39,17 @@ import{jsxs as e,jsx as t}from"react/jsx-runtime";import{twMerge as s}from"tailw
  *   onSubmit={() => {}}
  * />
  * ```
- */const m=({title:m,buttonName:d="적용하기",name:p,onSelectAll:u,isAllSelected:y,isViewOnly:f=!1,data:h,className:x,selectedValues:g,onReset:b,onViewOnly:D,onSubmit:j})=>{console.log("selectedValues: ",g);/*#__PURE__*/
-return e(l,{"data-testid":"design-system-filter-list",className:s("bg-w-white shadow-graymedium desktop:w-[360px] w-full rounded-xl",x),children:[
+ */const c=({title:c,buttonName:d="적용하기",name:p,onSelectAll:u,isAllSelected:y,isViewOnly:f=!1,data:h,className:x,selectedValues:g,onReset:b,onViewOnly:D,onSubmit:j})=>/*#__PURE__*/e(l,{"data-testid":"design-system-filter-list",className:s("bg-w-white shadow-graymedium desktop:w-[360px] w-full rounded-xl",x),children:[
 /*#__PURE__*/e(l,{className:"flex flex-col gap-5 px-8 py-6",children:[
 /*#__PURE__*/e(l,{className:"flex items-center justify-between",children:[
-/*#__PURE__*/t(a,{variant:"subTitle18",className:"text-w-gray-900 font-medium",children:m}),u&&/*#__PURE__*/e("button",{"data-testid":"design-system-filter--select-all",className:"group flex w-fit items-center gap-1",onClick:e=>{e.preventDefault(),null==u||u()},children:[
+/*#__PURE__*/t(a,{variant:"subTitle18",className:"text-w-gray-900 font-medium",children:c}),u&&/*#__PURE__*/e("button",{"data-testid":"design-system-filter--select-all",className:"group flex w-fit items-center gap-1",onClick:e=>{e.preventDefault(),null==u||u()},children:[
 /*#__PURE__*/t(o,{type:"sub",checked:y}),
 /*#__PURE__*/t(a,{variant:"body14",className:"text-w-gray-600",children:y?"선택 해제":"전체 선택"})]})]}),
 /*#__PURE__*/e(l,{className:"flex flex-col gap-4",children:[h.map((e=>{const{value:s,label:a,onChange:l}=e;/*#__PURE__*/
-return t(c,{name:p,label:a,value:s,checked:null==g?void 0:g.includes(s),onChange:l},s)})),D&&/*#__PURE__*/t(c,{type:"circle",label:"선택한 카테고리만 보기",checked:f,onChange:D})]})]}),
+return t(m,{name:p,label:a,value:s,checked:null==g?void 0:g.includes(s),onChange:l},s)})),D&&/*#__PURE__*/t(m,{type:"circle",label:"선택한 카테고리만 보기",checked:f,onChange:D})]})]}),
 /*#__PURE__*/t(r,{}),
 /*#__PURE__*/e(l,{className:"flex items-center justify-between px-8 py-4",children:[
 /*#__PURE__*/e(n,{"data-testid":"design-system-filter--reset",variant:"outlined",onClick:e=>{e.preventDefault(),null==b||b()},children:[
 /*#__PURE__*/t(i,{name:"medium_reset",className:"text-current"}),
 /*#__PURE__*/t("span",{children:"초기화"})]}),
-/*#__PURE__*/t(n,{"data-testid":"design-system-filter--submit",variant:"solid",onClick:e=>{e.preventDefault(),null==j||j()},children:d})]})]})};export{m as FilterList};
+/*#__PURE__*/t(n,{"data-testid":"design-system-filter--submit",variant:"solid",onClick:e=>{e.preventDefault(),null==j||j()},children:d})]})]});export{c as FilterList};

package/dist/Components/Inputs/TextFieldDropdown/TextFieldDropdown.js

@@ -1,4 +1,4 @@
-"use client";import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useState as o,useLayoutEffect as i}from"react";import{twJoin as r}from"tailwind-merge";import{Box as l}from"../../Base/Layouts/Box/Box.js";import"../../Base/Layouts/FullBleed/FullBleed.js";import{List as n}from"../List/List.js";import{SupportTextContainer as s}from"../SupportTextContainer/SupportTextContainer.js";import{useDropdown as d}from"../../../hooks/useDropdown.js";import{SelectBox as a}from"./TextFieldDropdown.parts.js";
+"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 n}from"../List/List.js";import{SupportTextContainer as s}from"../SupportTextContainer/SupportTextContainer.js";import{useDropdown as a}from"../../../hooks/useDropdown.js";import{SelectBox as d}from"./TextFieldDropdown.parts.js";
 /**
  * 드롭다운 형태의 텍스트 필드 컴포넌트입니다.
  *
@@ -44,11 +44,11 @@
  *   selectedItem={items[0]}
  * />
  * ```
- */const m=({selectedItem:m,items:c,onItemClick:p,placeholder:u,disabled:f,isError:v,errorMessage:g,supportMessage:w,className:x,variant:h="default",label:L,panelWidth:I="trigger",panelGutter:y=20})=>{const{isListOpen:k,focusedIndex:b,ref:C,handleItemClick:j,toggleListOpen:B,handleKeyDown:D}=d({items:c,onItemClick:p,disabled:f}),E=!!w||!!g,F="viewport"===I,[M,N]=o(void 0);
+ */const p=({selectedItem:p,items:m,onItemClick:c,placeholder:u,disabled:f,isError:g,errorMessage:v,supportMessage:w,className:x,variant:h="default",label:b,panelWidth:L="trigger",panelGutter:I=20})=>{const{isListOpen:y,focusedIndex:k,ref:C,handleItemClick:j,toggleListOpen:B,handleKeyDown:D}=a({items:m,onItemClick:c,disabled:f}),E=!!w||!!v,F="viewport"===L,[M,N]=o(void 0);
 // viewport 패널은 좁은 컨테이너 바깥, 화면 전체 너비로 펼쳐져야 한다.
 // 단 fixed로 띄우면 out-of-flow라 영역을 차지하지 못해 하단에서 잘리므로,
 // in-flow(relative)로 두고 트리거의 화면상 좌측 위치/뷰포트 너비를 측정해
 // 좌우로 full-bleed시킨다. 높이는 in-flow라 실제 영역을 차지하고,
 // 옵션이 많으면 List 내부(max-height)에서 스크롤된다. (리사이즈/스크롤 시 추적)
-return i((()=>{if(!k||!F)return;const e=C.current;if(!e)return;const t=()=>{const{left:t}=e.getBoundingClientRect(),o=document.documentElement.clientWidth;N({marginLeft:y-t,width:o-2*y})};return t(),window.addEventListener("scroll",t,!0),window.addEventListener("resize",t),()=>{window.removeEventListener("scroll",t,!0),window.removeEventListener("resize",t)}}),[k,F,y,C]),/*#__PURE__*/e("div",{"data-testid":"design-system--textFieldDropdown",ref:C,className:"relative flex w-full flex-col gap-2 outline-hidden",onKeyDown:D,tabIndex:0,children:[
-/*#__PURE__*/t(a,{placeholder:u,value:null==m?void 0:m.value,leadingIcon:null==m?void 0:m.leadingIcon,disabled:f,isListOpen:k,onClick:B,error:v,className:x,variant:h,label:L}),E&&/*#__PURE__*/t(s,{errorMessage:g,supportMessage:w}),k&&/*#__PURE__*/t(l,{"data-testid":"design-system--textFieldDropdown-panel",className:r("z-40",F?"relative":r("absolute w-full","label"===h?"top-[72px]":"top-[54px]")),style:F?M:void 0,children:/*#__PURE__*/t(n.Root,{children:c.map(((e,o)=>/*#__PURE__*/t(n.Item,{text:e.value,leadingIcon:e.leadingIcon,onClick:()=>j(e),selected:e.key===(null==m?void 0:m.key),isFocused:o===b},e.key)))})})]})};export{m as TextFieldDropdown};
+return r((()=>{if(!y||!F)return;const e=C.current;if(!e)return;const t=()=>{const{left:t}=e.getBoundingClientRect(),o=document.documentElement.clientWidth;N({marginLeft:I-t,width:o-2*I})};return t(),window.addEventListener("scroll",t,!0),window.addEventListener("resize",t),()=>{window.removeEventListener("scroll",t,!0),window.removeEventListener("resize",t)}}),[y,F,I,C]),/*#__PURE__*/e("div",{"data-testid":"design-system--textFieldDropdown",ref:C,className:"group/dropdown relative flex w-full flex-col gap-2 outline-hidden",onKeyDown:D,tabIndex:f?-1:0,role:"combobox","aria-haspopup":"listbox","aria-expanded":y,"aria-disabled":f,children:[
+/*#__PURE__*/t(d,{placeholder:u,value:null==p?void 0:p.value,leadingIcon:null==p?void 0:p.leadingIcon,disabled:f,isListOpen:y,onClick:B,error:g,className:x,variant:h,label:b}),E&&/*#__PURE__*/t(s,{errorMessage:v,supportMessage:w}),y&&/*#__PURE__*/t(l,{"data-testid":"design-system--textFieldDropdown-panel",className:i("z-40",F?"relative":i("absolute w-full","label"===h?"top-[72px]":"top-[54px]")),style:F?M:void 0,children:/*#__PURE__*/t(n.Root,{children:m.map(((e,o)=>/*#__PURE__*/t(n.Item,{text:e.value,leadingIcon:e.leadingIcon,onClick:()=>j(e),selected:e.key===(null==p?void 0:p.key),isFocused:o===k},e.key)))})})]})};export{p as TextFieldDropdown};

package/dist/Components/Inputs/TextFieldDropdown/TextFieldDropdown.parts.js

@@ -1,5 +1,6 @@
-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}),
-/*#__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__*/
+import{jsxs as t,jsx as e}from"react/jsx-runtime";import{twMerge as a,twJoin as r}from"tailwind-merge";import"../../DataDisplays/Avatar/Avatar.js";import{Typography as s}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 d=({placeholder:o="",value:d="",isListOpen:c,disabled:m=!1,error:p,onClick:y,className:x,variant:g="default",label:u})=>/*#__PURE__*/t(l,{isDisabled:m,isFocused:c,isError:p,testId:"design-system--selectBox",onClick:y,className:a(// 래퍼(group/dropdown)가 키보드 포커스를 받으면 트리거에 포커스링을 표시한다.
+!m&&"group-focus-visible/dropdown:border-primary group-focus-visible/dropdown:ring-primary-100 group-focus-visible/dropdown:ring-2",x),children:["label"===g?/*#__PURE__*/e(n,{label:u,value:d,placeholder:o,isFocused:c,isError:p,disabled:m}):/*#__PURE__*/e(s,{"data-testid":"design-system--selectBox-text",variant:"body16",className:r(m&&d?"text-w-gray-300":m&&!d?"text-w-gray-200":d?"text-w-gray-600":"text-w-gray-300","w-full"),children:d||o}),
+/*#__PURE__*/e("div",{className:r("transition-transform duration-300",c&&"rotate-180"),children:/*#__PURE__*/e(i,{name:"medium_arrow_down",className:m?"text-w-gray-300":"text-w-gray-600",testId:"design-system--selectBox-icon"})})]}),n=({label:i,value:l,placeholder:d,isFocused:n,isError:c,disabled:m})=>{const p=!!d;/*#__PURE__*/
 return t(o,{className:"relative flex h-[42px] w-full flex-col gap-0.5 py-px","data-testid":"design-system--selectBox-label",children:[
-/*#__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}),
-/*#__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};
+/*#__PURE__*/e("div",{className:a("tracking-default absolute",m?"text-w-gray-400":c?"text-w-red-500":n?"text-primary-500":"text-w-gray-400 group-hover:text-primary-500",p?"typo-caption11":n||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}),
+/*#__PURE__*/e(s,{"data-testid":"design-system--selectBox-text",variant:"body16",className:r(m?"text-w-gray-300":l?"text-w-gray-600":"text-w-gray-300","w-full pt-[14px]"),children:l||(p?d:"")})]})};export{d as SelectBox};

package/dist/cjs/Components/Inputs/FilterList/FilterList.js

@@ -1,5 +1,4 @@
-"use strict";var e=require("react/jsx-runtime"),s=require("tailwind-merge"),t=require("../../Base/Typography/Typography.js"),a=require("../../Base/Layouts/Box/Box.js");require("../../Base/Layouts/FullBleed/FullBleed.js"),require("../../DataDisplays/Avatar/Avatar.js"),require("react");var l=require("../../DataDisplays/SystemIcon/SystemIcon.js");require("../../DataDisplays/SystemIcon/SystemIcon.constants.js");var i=require("../../DataDisplays/Divider/Divider.js");require("../../DataDisplays/Accordion/Accordion.js");var r=require("../Button/Button.js"),n=require("../Checkbox/Checkbox.js"),c=require("../CheckboxListItem/CheckboxListItem.js");exports.FilterList=({title:o,buttonName:u="적용하기",name:d,onSelectAll:x,isAllSelected:m,isViewOnly:y=!1,data:p,className:h,selectedValues:j,onReset:g,onViewOnly:b,onSubmit:f})=>{console.log("selectedValues: ",j);/*#__PURE__*/
-return e.jsxs(a.Box,{"data-testid":"design-system-filter-list",className:s.twMerge("bg-w-white shadow-graymedium desktop:w-[360px] w-full rounded-xl",h),children:[
+"use strict";var e=require("react/jsx-runtime"),s=require("tailwind-merge"),t=require("../../Base/Typography/Typography.js"),a=require("../../Base/Layouts/Box/Box.js");require("../../Base/Layouts/FullBleed/FullBleed.js"),require("../../DataDisplays/Avatar/Avatar.js"),require("react");var l=require("../../DataDisplays/SystemIcon/SystemIcon.js");require("../../DataDisplays/SystemIcon/SystemIcon.constants.js");var i=require("../../DataDisplays/Divider/Divider.js");require("../../DataDisplays/Accordion/Accordion.js");var r=require("../Button/Button.js"),n=require("../Checkbox/Checkbox.js"),c=require("../CheckboxListItem/CheckboxListItem.js");exports.FilterList=({title:o,buttonName:u="적용하기",name:d,onSelectAll:x,isAllSelected:m,isViewOnly:y=!1,data:p,className:h,selectedValues:j,onReset:g,onViewOnly:b,onSubmit:f})=>/*#__PURE__*/e.jsxs(a.Box,{"data-testid":"design-system-filter-list",className:s.twMerge("bg-w-white shadow-graymedium desktop:w-[360px] w-full rounded-xl",h),children:[
 /*#__PURE__*/e.jsxs(a.Box,{className:"flex flex-col gap-5 px-8 py-6",children:[
 /*#__PURE__*/e.jsxs(a.Box,{className:"flex items-center justify-between",children:[
 /*#__PURE__*/e.jsx(t.Typography,{variant:"subTitle18",className:"text-w-gray-900 font-medium",children:o}),x&&/*#__PURE__*/e.jsxs("button",{"data-testid":"design-system-filter--select-all",className:"group flex w-fit items-center gap-1",onClick:e=>{e.preventDefault(),null==x||x()},children:[
@@ -12,4 +11,4 @@ return e.jsx(c.CheckboxListItem,{name:d,label:a,value:t,checked:null==j?void 0:j
 /*#__PURE__*/e.jsxs(r.Button,{"data-testid":"design-system-filter--reset",variant:"outlined",onClick:e=>{e.preventDefault(),null==g||g()},children:[
 /*#__PURE__*/e.jsx(l.SystemIcon,{name:"medium_reset",className:"text-current"}),
 /*#__PURE__*/e.jsx("span",{children:"초기화"})]}),
-/*#__PURE__*/e.jsx(r.Button,{"data-testid":"design-system-filter--submit",variant:"solid",onClick:e=>{e.preventDefault(),null==f||f()},children:u})]})]})};
+/*#__PURE__*/e.jsx(r.Button,{"data-testid":"design-system-filter--submit",variant:"solid",onClick:e=>{e.preventDefault(),null==f||f()},children:u})]})]});

package/dist/cjs/Components/Inputs/TextFieldDropdown/TextFieldDropdown.js

@@ -1,8 +1,8 @@
-"use client";"use strict";var e=require("react/jsx-runtime"),t=require("react"),r=require("tailwind-merge"),i=require("../../Base/Layouts/Box/Box.js");require("../../Base/Layouts/FullBleed/FullBleed.js");var s=require("../List/List.js"),n=require("../SupportTextContainer/SupportTextContainer.js"),l=require("../../../hooks/useDropdown.js"),o=require("./TextFieldDropdown.parts.js");exports.TextFieldDropdown=({selectedItem:a,items:d,onItemClick:u,placeholder:c,disabled:p,isError:x,errorMessage:w,supportMessage:m,className:v,variant:g="default",label:L,panelWidth:f="trigger",panelGutter:j=20})=>{const{isListOpen:h,focusedIndex:y,ref:I,handleItemClick:k,toggleListOpen:q,handleKeyDown:B}=l.useDropdown({items:d,onItemClick:u,disabled:p}),C=!!m||!!w,b="viewport"===f,[D,E]=t.useState(void 0);
+"use client";"use strict";var e=require("react/jsx-runtime"),t=require("react"),r=require("tailwind-merge"),i=require("../../Base/Layouts/Box/Box.js");require("../../Base/Layouts/FullBleed/FullBleed.js");var s=require("../List/List.js"),o=require("../SupportTextContainer/SupportTextContainer.js"),n=require("../../../hooks/useDropdown.js"),l=require("./TextFieldDropdown.parts.js");exports.TextFieldDropdown=({selectedItem:a,items:d,onItemClick:u,placeholder:c,disabled:p,isError:x,errorMessage:w,supportMessage:m,className:v,variant:g="default",label:L,panelWidth:f="trigger",panelGutter:h=20})=>{const{isListOpen:j,focusedIndex:b,ref:y,handleItemClick:I,toggleListOpen:k,handleKeyDown:q}=n.useDropdown({items:d,onItemClick:u,disabled:p}),B=!!m||!!w,C="viewport"===f,[D,E]=t.useState(void 0);
 // viewport 패널은 좁은 컨테이너 바깥, 화면 전체 너비로 펼쳐져야 한다.
 // 단 fixed로 띄우면 out-of-flow라 영역을 차지하지 못해 하단에서 잘리므로,
 // in-flow(relative)로 두고 트리거의 화면상 좌측 위치/뷰포트 너비를 측정해
 // 좌우로 full-bleed시킨다. 높이는 in-flow라 실제 영역을 차지하고,
 // 옵션이 많으면 List 내부(max-height)에서 스크롤된다. (리사이즈/스크롤 시 추적)
-return t.useLayoutEffect((()=>{if(!h||!b)return;const e=I.current;if(!e)return;const t=()=>{const{left:t}=e.getBoundingClientRect(),r=document.documentElement.clientWidth;E({marginLeft:j-t,width:r-2*j})};return t(),window.addEventListener("scroll",t,!0),window.addEventListener("resize",t),()=>{window.removeEventListener("scroll",t,!0),window.removeEventListener("resize",t)}}),[h,b,j,I]),/*#__PURE__*/e.jsxs("div",{"data-testid":"design-system--textFieldDropdown",ref:I,className:"relative flex w-full flex-col gap-2 outline-hidden",onKeyDown:B,tabIndex:0,children:[
-/*#__PURE__*/e.jsx(o.SelectBox,{placeholder:c,value:null==a?void 0:a.value,leadingIcon:null==a?void 0:a.leadingIcon,disabled:p,isListOpen:h,onClick:q,error:x,className:v,variant:g,label:L}),C&&/*#__PURE__*/e.jsx(n.SupportTextContainer,{errorMessage:w,supportMessage:m}),h&&/*#__PURE__*/e.jsx(i.Box,{"data-testid":"design-system--textFieldDropdown-panel",className:r.twJoin("z-40",b?"relative":r.twJoin("absolute w-full","label"===g?"top-[72px]":"top-[54px]")),style:b?D:void 0,children:/*#__PURE__*/e.jsx(s.List.Root,{children:d.map(((t,r)=>/*#__PURE__*/e.jsx(s.List.Item,{text:t.value,leadingIcon:t.leadingIcon,onClick:()=>k(t),selected:t.key===(null==a?void 0:a.key),isFocused:r===y},t.key)))})})]})};
+return t.useLayoutEffect((()=>{if(!j||!C)return;const e=y.current;if(!e)return;const t=()=>{const{left:t}=e.getBoundingClientRect(),r=document.documentElement.clientWidth;E({marginLeft:h-t,width:r-2*h})};return t(),window.addEventListener("scroll",t,!0),window.addEventListener("resize",t),()=>{window.removeEventListener("scroll",t,!0),window.removeEventListener("resize",t)}}),[j,C,h,y]),/*#__PURE__*/e.jsxs("div",{"data-testid":"design-system--textFieldDropdown",ref:y,className:"group/dropdown relative flex w-full flex-col gap-2 outline-hidden",onKeyDown:q,tabIndex:p?-1:0,role:"combobox","aria-haspopup":"listbox","aria-expanded":j,"aria-disabled":p,children:[
+/*#__PURE__*/e.jsx(l.SelectBox,{placeholder:c,value:null==a?void 0:a.value,leadingIcon:null==a?void 0:a.leadingIcon,disabled:p,isListOpen:j,onClick:k,error:x,className:v,variant:g,label:L}),B&&/*#__PURE__*/e.jsx(o.SupportTextContainer,{errorMessage:w,supportMessage:m}),j&&/*#__PURE__*/e.jsx(i.Box,{"data-testid":"design-system--textFieldDropdown-panel",className:r.twJoin("z-40",C?"relative":r.twJoin("absolute w-full","label"===g?"top-[72px]":"top-[54px]")),style:C?D:void 0,children:/*#__PURE__*/e.jsx(s.List.Root,{children:d.map(((t,r)=>/*#__PURE__*/e.jsx(s.List.Item,{text:t.value,leadingIcon:t.leadingIcon,onClick:()=>I(t),selected:t.key===(null==a?void 0:a.key),isFocused:r===b},t.key)))})})]})};

package/dist/cjs/Components/Inputs/TextFieldDropdown/TextFieldDropdown.parts.js

@@ -1,5 +1,6 @@
-"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__*/
-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:[
-/*#__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}),
-/*#__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}),
-/*#__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"})})]});
+"use strict";var e=require("react/jsx-runtime"),t=require("tailwind-merge");require("../../DataDisplays/Avatar/Avatar.js");var r=require("../../Base/Typography/Typography.js"),a=require("../../Base/Layouts/Box/Box.js");require("../../Base/Layouts/FullBleed/FullBleed.js"),require("react");var s=require("../../DataDisplays/SystemIcon/SystemIcon.js");require("../../DataDisplays/SystemIcon/SystemIcon.constants.js"),require("../../DataDisplays/Accordion/Accordion.js");var i=require("../TextFieldContainer/TextFieldContainer.js");const o=({label:s,value:i,placeholder:o,isFocused:l,isError:n,disabled:d})=>{const c=!!o;/*#__PURE__*/
+return e.jsxs(a.Box,{className:"relative flex h-[42px] w-full flex-col gap-0.5 py-px","data-testid":"design-system--selectBox-label",children:[
+/*#__PURE__*/e.jsx("div",{className:t.twMerge("tracking-default absolute",d?"text-w-gray-400":n?"text-w-red-500":l?"text-primary-500":"text-w-gray-400 group-hover:text-primary-500",c?"typo-caption11":l||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:s}),
+/*#__PURE__*/e.jsx(r.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?o:"")})]})};exports.SelectBox=({placeholder:a="",value:l="",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:t.twMerge(// 래퍼(group/dropdown)가 키보드 포커스를 받으면 트리거에 포커스링을 표시한다.
+!d&&"group-focus-visible/dropdown:border-primary group-focus-visible/dropdown:ring-primary-100 group-focus-visible/dropdown:ring-2",x),children:["label"===u?/*#__PURE__*/e.jsx(o,{label:p,value:l,placeholder:a,isFocused:n,isError:c,disabled:d}):/*#__PURE__*/e.jsx(r.Typography,{"data-testid":"design-system--selectBox-text",variant:"body16",className:t.twJoin(d&&l?"text-w-gray-300":d&&!l?"text-w-gray-200":l?"text-w-gray-600":"text-w-gray-300","w-full"),children:l||a}),
+/*#__PURE__*/e.jsx("div",{className:t.twJoin("transition-transform duration-300",n&&"rotate-180"),children:/*#__PURE__*/e.jsx(s.SystemIcon,{name:"medium_arrow_down",className:d?"text-w-gray-300":"text-w-gray-600",testId:"design-system--selectBox-icon"})})]});

package/dist/cjs/hooks/useDropdown.js

@@ -1 +1,3 @@
-"use strict";var e=require("react"),t=require("@wishket/yogokit");exports.useDropdown=({items:r,onItemClick:l,disabled:n})=>{const[s,u]=e.useState(!1),[c,o]=e.useState(-1),a=e.useRef(null),i=e.useRef(s),f=e.useCallback((()=>{i.current&&(u(!1),o(-1))}),[]);t.useClickOutside(a,f);const k=e=>{l(e),f()};return{isListOpen:s,focusedIndex:c,ref:a,handleItemClick:k,toggleListOpen:e=>{null==e||e.preventDefault(),n||u((e=>(i.current=!e,!e)))},handleKeyDown:e=>{if(s)switch(e.key){case"ArrowDown":e.preventDefault(),o((e=>{const t=e<r.length-1?e+1:e,l=a.current;if(l){const e=l.querySelectorAll("li")[t];null==e||e.scrollIntoView({block:"nearest"})}return t}));break;case"ArrowUp":e.preventDefault(),o((e=>{const t=e>0?e-1:e,r=a.current;if(r){const e=r.querySelectorAll("li")[t];null==e||e.scrollIntoView({block:"nearest"})}return t}));break;case"Enter":e.preventDefault(),c>=0&&k(r[c]);break;case"Escape":e.preventDefault(),f()}}}};
+"use strict";var e=require("react"),t=require("@wishket/yogokit");exports.useDropdown=({items:r,onItemClick:n,disabled:l})=>{const[s,u]=e.useState(!1),[c,o]=e.useState(-1),a=e.useRef(null),i=e.useRef(s),k=e.useCallback((()=>{i.current&&(u(!1),o(-1))}),[]);t.useClickOutside(a,k);const f=e=>{n(e),k()};return{isListOpen:s,focusedIndex:c,ref:a,handleItemClick:f,toggleListOpen:e=>{null==e||e.preventDefault(),l||u((e=>(i.current=!e,!e)))},handleKeyDown:e=>{
+// 닫힌 상태에서 Enter/Space/ArrowDown으로 리스트를 연다 (WCAG 2.1.1 키보드 접근성)
+if(s)switch(e.key){case"ArrowDown":e.preventDefault(),o((e=>{const t=e<r.length-1?e+1:e,n=a.current;if(n){const e=n.querySelectorAll("li")[t];null==e||e.scrollIntoView({block:"nearest"})}return t}));break;case"ArrowUp":e.preventDefault(),o((e=>{const t=e>0?e-1:e,r=a.current;if(r){const e=r.querySelectorAll("li")[t];null==e||e.scrollIntoView({block:"nearest"})}return t}));break;case"Enter":e.preventDefault(),c>=0&&f(r[c]);break;case"Escape":e.preventDefault(),k()}else"Enter"!==e.key&&" "!==e.key&&"ArrowDown"!==e.key||(e.preventDefault(),l||i.current||(i.current=!0,u(!0)))}}};

package/dist/hooks/useDropdown.js

@@ -1 +1,3 @@
-import{useState as e,useRef as t,useCallback as r}from"react";import{useClickOutside as n}from"@wishket/yogokit";const l=({items:l,onItemClick:o,disabled:c})=>{const[s,a]=e(!1),[i,u]=e(-1),f=t(null),p=t(s),k=r((()=>{p.current&&(a(!1),u(-1))}),[]);n(f,k);const w=e=>{o(e),k()};return{isListOpen:s,focusedIndex:i,ref:f,handleItemClick:w,toggleListOpen:e=>{null==e||e.preventDefault(),c||a((e=>(p.current=!e,!e)))},handleKeyDown:e=>{if(s)switch(e.key){case"ArrowDown":e.preventDefault(),u((e=>{const t=e<l.length-1?e+1:e,r=f.current;if(r){const e=r.querySelectorAll("li")[t];null==e||e.scrollIntoView({block:"nearest"})}return t}));break;case"ArrowUp":e.preventDefault(),u((e=>{const t=e>0?e-1:e,r=f.current;if(r){const e=r.querySelectorAll("li")[t];null==e||e.scrollIntoView({block:"nearest"})}return t}));break;case"Enter":e.preventDefault(),i>=0&&w(l[i]);break;case"Escape":e.preventDefault(),k()}}}};export{l as useDropdown};
+import{useState as e,useRef as r,useCallback as t}from"react";import{useClickOutside as n}from"@wishket/yogokit";const l=({items:l,onItemClick:o,disabled:c})=>{const[s,u]=e(!1),[a,i]=e(-1),f=r(null),k=r(s),p=t((()=>{k.current&&(u(!1),i(-1))}),[]);n(f,p);const w=e=>{o(e),p()};return{isListOpen:s,focusedIndex:a,ref:f,handleItemClick:w,toggleListOpen:e=>{null==e||e.preventDefault(),c||u((e=>(k.current=!e,!e)))},handleKeyDown:e=>{
+// 닫힌 상태에서 Enter/Space/ArrowDown으로 리스트를 연다 (WCAG 2.1.1 키보드 접근성)
+if(s)switch(e.key){case"ArrowDown":e.preventDefault(),i((e=>{const r=e<l.length-1?e+1:e,t=f.current;if(t){const e=t.querySelectorAll("li")[r];null==e||e.scrollIntoView({block:"nearest"})}return r}));break;case"ArrowUp":e.preventDefault(),i((e=>{const r=e>0?e-1:e,t=f.current;if(t){const e=t.querySelectorAll("li")[r];null==e||e.scrollIntoView({block:"nearest"})}return r}));break;case"Enter":e.preventDefault(),a>=0&&w(l[a]);break;case"Escape":e.preventDefault(),p()}else"Enter"!==e.key&&" "!==e.key&&"ArrowDown"!==e.key||(e.preventDefault(),c||k.current||(k.current=!0,u(!0)))}}};export{l as useDropdown};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wishket/design-system",
-  "version": "3.4.0",
+  "version": "3.4.2",
   "type": "module",
   "description": "Wishket Design System",
   "main": "dist/index.js",