@dotss/ui 1.1.3 → 1.2.0

package/NumberKeypad/NumberKeypadBlock/NumberKeypadBlock.cjs

@@ -1,9 +1,9 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("@emotion/react/jsx-runtime"),d=require("react"),u=require("../../hooks/useCheckHoverPossible/useCheckHoverPossible.cjs"),p=require("@emotion/styled"),g=require("../../utils/getContrastingTextColor/getContrastingTextColor.cjs"),h=e=>e&&e.__esModule?e:{default:e},l=h(p),f=l.default.div`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("@emotion/react/jsx-runtime"),p=require("react"),g=require("../../hooks/useCheckHoverPossible/useCheckHoverPossible.cjs"),h=require("@emotion/styled"),f=require("../../utils/getContrastingTextColor/getContrastingTextColor.cjs"),m=e=>e&&e.__esModule?e:{default:e},l=m(h),b=l.default.div`
   flex-basis: calc((100% / 3) - ${({theme:{spacing:e}})=>e.content(3)}px);
   display: inline-flex;
   align-items: center;
   justify-content: center;
-`,m=l.default.button`
+`,y=l.default.button`
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -13,7 +13,7 @@
   white-space: nowrap;
   text-overflow: ellipsis;
   background-color: ${({theme:{palette:{brand:e}}})=>e.primary.main};
-  color: ${({theme:{palette:{brand:e,grey:t}}})=>g.default(e.primary.main,[t.white,t[100]])};
+  color: ${({theme:{palette:{brand:e,grey:t}}})=>f.default(e.primary.main,[t.white,t[100]])};
   & svg {
     color: inherit;
   }
@@ -31,4 +31,4 @@
     color: ${({theme:{palette:{grey:e}}})=>e[30]};
     cursor: not-allowed;
   }
-`,b=d.forwardRef(function({children:t,size:r,disabled:i,inlineCSS:n,...s},a){const{isHoverPossible:c}=u.default();return o.jsx(f,{ref:a,...s,css:n,children:o.jsx(m,{type:"button",size:r,disabled:i,isHoverPossible:c,children:t})})});exports.default=b;
+`,v=p.forwardRef(function({children:t,size:r,disabled:i,inlineCSS:n,value:a,buttonProps:s,...c},d){const{isHoverPossible:u}=g.default();return o.jsx(b,{ref:d,...c,css:n,"data-value":a,children:o.jsx(y,{type:"button",size:r,disabled:i,isHoverPossible:u,...s,children:t})})});exports.default=v;

package/NumberKeypad/NumberKeypadBlock/NumberKeypadBlock.d.ts

@@ -4,6 +4,7 @@ import { NumberKeypadProps } from '../NumberKeypad';
 
 export interface NumberKeypadBlockProps extends GeneralComponentProps<HTMLAttributes<HTMLDivElement> & Pick<NumberKeypadProps, 'size' | 'disabled'>> {
     value?: string | number;
+    buttonProps?: HTMLAttributes<HTMLButtonElement>;
 }
 declare const NumberKeypadBlock: import('react').ForwardRefExoticComponent<NumberKeypadBlockProps & import('react').RefAttributes<HTMLDivElement>>;
 export default NumberKeypadBlock;

package/NumberKeypad/NumberKeypadBlock/NumberKeypadBlock.es.js

@@ -1,14 +1,14 @@
 import { jsx as o } from "@emotion/react/jsx-runtime";
-import { forwardRef as p } from "react";
-import d from "../../hooks/useCheckHoverPossible/useCheckHoverPossible.es.js";
+import { forwardRef as h } from "react";
+import m from "../../hooks/useCheckHoverPossible/useCheckHoverPossible.es.js";
 import n from "@emotion/styled";
-import h from "../../utils/getContrastingTextColor/getContrastingTextColor.es.js";
-const m = n.div`
+import g from "../../utils/getContrastingTextColor/getContrastingTextColor.es.js";
+const u = n.div`
   flex-basis: calc((100% / 3) - ${({ theme: { spacing: e } }) => e.content(3)}px);
   display: inline-flex;
   align-items: center;
   justify-content: center;
-`, g = n.button`
+`, f = n.button`
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -26,7 +26,7 @@ const m = n.div`
   theme: {
     palette: { brand: e, grey: t }
   }
-}) => h(e.primary.main, [t.white, t[100]])};
+}) => g(e.primary.main, [t.white, t[100]])};
   & svg {
     color: inherit;
   }
@@ -95,21 +95,22 @@ const m = n.div`
 }) => e[30]};
     cursor: not-allowed;
   }
-`, v = p(
-  function({ children: t, size: r, disabled: i, inlineCSS: l, ...a }, s) {
-    const { isHoverPossible: c } = d();
-    return /* @__PURE__ */ o(m, { ref: s, ...a, css: l, children: /* @__PURE__ */ o(
-      g,
+`, x = h(
+  function({ children: t, size: r, disabled: i, inlineCSS: l, value: a, buttonProps: s, ...c }, p) {
+    const { isHoverPossible: d } = m();
+    return /* @__PURE__ */ o(u, { ref: p, ...c, css: l, "data-value": a, children: /* @__PURE__ */ o(
+      f,
       {
         type: "button",
         size: r,
         disabled: i,
-        isHoverPossible: c,
+        isHoverPossible: d,
+        ...s,
         children: t
       }
     ) });
   }
 );
 export {
-  v as default
+  x as default
 };

package/PageControl/PageControl.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const c=require("@emotion/react/jsx-runtime"),n=require("react"),j=require("../Flexbox/Flexbox.cjs"),q=require("../hooks/useCheckHasFocus/useCheckHasFocus.cjs"),A=require("@emotion/styled"),D=e=>e&&e.__esModule?e:{default:e},d=D(A),L=d.default.div`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("@emotion/react/jsx-runtime"),n=require("react"),j=require("../Flexbox/Flexbox.cjs"),q=require("../hooks/useCheckHasFocus/useCheckHasFocus.cjs"),A=require("@emotion/styled"),D=e=>e&&e.__esModule?e:{default:e},b=D(A),L=b.default.div`
   display: flex;
   align-items: center;
   gap: ${({theme:{spacing:e}})=>e.content(2)}px;
@@ -11,16 +11,16 @@
   }
 
   @supports not selector(:has(:focus-visible)) {
-    ${({focusWithin:e,theme:r})=>e?{outline:`${r.palette.grey[100]} solid 2px`,outlineOffset:2}:{}}
+    ${({focusWithin:e,theme:o})=>e?{outline:`${o.palette.grey[100]} solid 2px`,outlineOffset:2}:{}}
   }
-`,S=d.default.button`
+`,S=b.default.button`
   width: 8px;
   height: 8px;
   border-radius: 4px;
-  background-color: ${({theme:{palette:{grey:e}},color:r})=>r==="primary"?e[10]:e[30]};
+  background-color: ${({theme:{palette:{grey:e}},color:o})=>o==="primary"?e[10]:e[30]};
   cursor: pointer;
   transition: all 150ms ease;
   transition-property: width, border-radius, background-color, cursor;
 
-  ${({theme:{palette:{brand:e}},color:r,isActive:o})=>o?{width:24,borderRadius:8,backgroundColor:r==="primary"?e.primary.pageControl:e.primary.tooltip,cursor:"default"}:null}
-`,F=n.forwardRef(function({totalCount:r=1,page:o=1,onChange:l,color:p="primary",inlineCSS:y,tabIdPrefix:b,controlIdPrefix:m,tabProps:x,...h},$){const k=n.useRef(null),R=$??k,f=n.useRef(null),{hasFocus:w}=q.default({ref:f}),P=n.useId(),v=n.useId(),a=`${b??P}-`,I=`${m??v}-`,_=i=>t=>{t.preventDefault(),typeof l=="function"&&l(i)},g=i=>{let t=o;if(i.key==="ArrowLeft"?o>1?t=o-1:o===1&&(t=r):i.key==="ArrowRight"?o<r?t=o+1:o===r&&(t=1):i.key==="Home"?t=1:i.key==="End"&&(t=r),t!==o){const s=document.getElementById(`${a}${t}`);s==null||s.focus(),l==null||l(t)}};return c.jsx(L,{ref:R,role:"tablist",...h,css:y,focusWithin:w,children:c.jsx(j.default,{ref:f,gap:2,children:Array.from({length:r},(i,t)=>{const s=t+1,u=s===o;return c.jsx(S,{id:`${a}${s}`,"aria-controls":`${I}${s}`,isActive:u,"data-page":s,onClick:_(s),role:"tab",type:"button","aria-selected":u,onKeyDown:g,tabIndex:u?0:-1,...x,color:p},t)})})})});exports.default=F;
+  ${({theme:{palette:{brand:e}},color:o,isActive:r})=>r?{width:24,borderRadius:8,backgroundColor:o==="primary"?e.primary.pageControl:e.primary.tooltip,cursor:"default"}:null}
+`,F=n.forwardRef(function({totalCount:o=1,page:r=1,onChange:l,color:y="primary",inlineCSS:m,tabIdPrefix:p,controlIdPrefix:x,tabProps:$,...u},h){const k=n.useRef(null),R=h??k,f=n.useRef(null),{hasFocus:w}=q.default({ref:f}),P=n.useId(),v=n.useId(),d=`${p??P}-`,I=`${x??v}-`,_=i=>t=>{t.preventDefault(),typeof l=="function"&&l(i)},g=i=>{let t=r;if(i.key==="ArrowLeft"?r>1?t=r-1:r===1&&(t=o):i.key==="ArrowRight"?r<o?t=r+1:r===o&&(t=1):i.key==="Home"?t=1:i.key==="End"&&(t=o),t!==r){const s=document.getElementById(`${d}${t}`);s==null||s.focus(),l==null||l(t)}};return a.jsx(L,{ref:R,role:"tablist",...u,css:m,focusWithin:w,children:a.jsx(j.default,{ref:f,gap:2,children:Array.from({length:o},(i,t)=>{const s=t+1,c=s===r;return a.jsx(S,{id:`${d}${s}`,"aria-controls":`${I}${s}`,isActive:c,"data-page":s,onClick:_(s),role:"tab",type:"button","aria-selected":c,onKeyDown:g,tabIndex:c?0:-1,"aria-label":`${u==null?void 0:u["aria-label"]} ${s} 이동, 현재 ${r}`,...$,color:y},t)})})})});exports.default=F;

package/PageControl/PageControl.es.js

@@ -1,5 +1,5 @@
-import { jsx as f } from "@emotion/react/jsx-runtime";
-import { forwardRef as D, useRef as u, useId as d } from "react";
+import { jsx as c } from "@emotion/react/jsx-runtime";
+import { forwardRef as D, useRef as d, useId as m } from "react";
 import F from "../Flexbox/Flexbox.es.js";
 import E from "../hooks/useCheckHasFocus/useCheckHasFocus.es.js";
 import p from "@emotion/styled";
@@ -16,8 +16,8 @@ const H = p.div`
   }
 
   @supports not selector(:has(:focus-visible)) {
-    ${({ focusWithin: t, theme: r }) => t ? {
-  outline: `${r.palette.grey[100]} solid 2px`,
+    ${({ focusWithin: t, theme: o }) => t ? {
+  outline: `${o.palette.grey[100]} solid 2px`,
   outlineOffset: 2
 } : {}}
   }
@@ -29,8 +29,8 @@ const H = p.div`
   theme: {
     palette: { grey: t }
   },
-  color: r
-}) => r === "primary" ? t[10] : t[30]};
+  color: o
+}) => o === "primary" ? t[10] : t[30]};
   cursor: pointer;
   transition: all 150ms ease;
   transition-property: width, border-radius, background-color, cursor;
@@ -39,59 +39,60 @@ const H = p.div`
   theme: {
     palette: { brand: t }
   },
-  color: r,
-  isActive: o
-}) => o ? {
+  color: o,
+  isActive: r
+}) => r ? {
   width: 24,
   borderRadius: 8,
-  backgroundColor: r === "primary" ? t.primary.pageControl : t.primary.tooltip,
+  backgroundColor: o === "primary" ? t.primary.pageControl : t.primary.tooltip,
   cursor: "default"
 } : null}
 `, O = D(function({
-  totalCount: r = 1,
-  page: o = 1,
+  totalCount: o = 1,
+  page: r = 1,
   onChange: l,
-  color: m = "primary",
+  color: b = "primary",
   inlineCSS: y,
-  tabIdPrefix: b,
+  tabIdPrefix: $,
   controlIdPrefix: x,
   tabProps: h,
-  ...$
+  ...n
 }, k) {
-  const w = u(null), P = k ?? w, c = u(null), { hasFocus: I } = E({ ref: c }), R = d(), v = d(), a = `${b ?? R}-`, g = `${x ?? v}-`, A = (s) => (e) => {
+  const w = d(null), P = k ?? w, a = d(null), { hasFocus: I } = E({ ref: a }), R = m(), v = m(), u = `${$ ?? R}-`, A = `${x ?? v}-`, L = (s) => (e) => {
     e.preventDefault(), typeof l == "function" && l(s);
-  }, L = (s) => {
-    let e = o;
-    if (s.key === "ArrowLeft" ? o > 1 ? e = o - 1 : o === 1 && (e = r) : s.key === "ArrowRight" ? o < r ? e = o + 1 : o === r && (e = 1) : s.key === "Home" ? e = 1 : s.key === "End" && (e = r), e !== o) {
-      const i = document.getElementById(`${a}${e}`);
+  }, g = (s) => {
+    let e = r;
+    if (s.key === "ArrowLeft" ? r > 1 ? e = r - 1 : r === 1 && (e = o) : s.key === "ArrowRight" ? r < o ? e = r + 1 : r === o && (e = 1) : s.key === "Home" ? e = 1 : s.key === "End" && (e = o), e !== r) {
+      const i = document.getElementById(`${u}${e}`);
       i == null || i.focus(), l == null || l(e);
     }
   };
-  return /* @__PURE__ */ f(
+  return /* @__PURE__ */ c(
     H,
     {
       ref: P,
       role: "tablist",
-      ...$,
+      ...n,
       css: y,
       focusWithin: I,
-      children: /* @__PURE__ */ f(F, { ref: c, gap: 2, children: Array.from({ length: r }, (s, e) => {
-        const i = e + 1, n = i === o;
-        return /* @__PURE__ */ f(
+      children: /* @__PURE__ */ c(F, { ref: a, gap: 2, children: Array.from({ length: o }, (s, e) => {
+        const i = e + 1, f = i === r;
+        return /* @__PURE__ */ c(
           K,
           {
-            id: `${a}${i}`,
-            "aria-controls": `${g}${i}`,
-            isActive: n,
+            id: `${u}${i}`,
+            "aria-controls": `${A}${i}`,
+            isActive: f,
             "data-page": i,
-            onClick: A(i),
+            onClick: L(i),
             role: "tab",
             type: "button",
-            "aria-selected": n,
-            onKeyDown: L,
-            tabIndex: n ? 0 : -1,
+            "aria-selected": f,
+            onKeyDown: g,
+            tabIndex: f ? 0 : -1,
+            "aria-label": `${n == null ? void 0 : n["aria-label"]} ${i} 이동, 현재 ${r}`,
             ...h,
-            color: m
+            color: b
           },
           e
         );

package/Tooltip/Tooltip.cjs

@@ -24,4 +24,4 @@
   ${({theme:{typography:t}})=>({fontSize:t.b4R.size,fontWeight:t.b4R.weight,lineHeight:t.b4R.lineHeight,letterSpacing:t.b4R.letterSpacing,"& svg:not(.tooltip-closer)":{width:24,height:24}})};
 
   ${({theme:{palette:{brand:t,grey:r}},placement:m,color:e,offset:c,arrowOffset:d})=>{let o={};const n=(c==null?void 0:c.x)||0,l=(c==null?void 0:c.y)||0,p=(d==null?void 0:d.x)||0,a=(d==null?void 0:d.y)||0;switch(m){case"bottom-left":o={top:`calc(-12px + ${l}px)`,left:`calc(-6px + ${n}px)`,transform:"translateY(-100%)","&:after":{content:'""',position:"absolute",top:"100%",left:`calc(12px + ${p}px)`,borderTop:`8px solid ${e==="primary"?t.primary.tooltip:r[80]}`,borderRight:"6px solid transparent",borderBottom:"8px solid transparent",borderLeft:"6px solid transparent"}};break;case"bottom-center":o={top:`calc(-12px + ${l}px)`,left:"50%",transform:`translate(calc(-50% + ${n}px), -100%)`,"&:after":{content:'""',position:"absolute",top:"100%",left:`calc(50% + ${p}px)`,transform:"translateX(-50%)",borderTop:`8px solid ${e==="primary"?t.primary.tooltip:r[80]}`,borderRight:"6px solid transparent",borderBottom:"8px solid transparent",borderLeft:"6px solid transparent"}};break;case"bottom-right":o={top:`calc(-12px + ${l}px)`,right:`calc(-6px - ${n}px)`,transform:"translateY(-100%)","&:after":{content:'""',position:"absolute",top:"100%",right:`calc(12px - ${p}px)`,borderTop:`8px solid ${e==="primary"?t.primary.tooltip:r[80]}`,borderRight:"6px solid transparent",borderBottom:"8px solid transparent",borderLeft:"6px solid transparent"}};break;case"left-top":o={top:`calc(-6px + ${l}px)`,left:`calc(100% + 12px + ${n}px)`,"&:after":{content:'""',position:"absolute",top:`calc(12px + ${a}px)`,right:"100%",borderTop:"6px solid transparent",borderRight:`8px solid ${e==="primary"?t.primary.tooltip:r[80]}`,borderBottom:"6px solid transparent",borderLeft:"8px solid transparent"}};break;case"left-middle":o={top:"50%",left:`calc(100% + 12px + ${n}px)`,transform:`translateY(calc(-50% + ${l}px))`,"&:after":{content:'""',position:"absolute",top:`calc(50% + ${a}px)`,right:"100%",transform:"translateY(-50%)",borderTop:"6px solid transparent",borderRight:`8px solid ${e==="primary"?t.primary.tooltip:r[80]}`,borderBottom:"6px solid transparent",borderLeft:"8px solid transparent"}};break;case"left-bottom":o={bottom:`calc(-6px - ${l}px)`,left:`calc(100% + 12px + ${n}px)`,"&:after":{content:'""',position:"absolute",bottom:`calc(12px - ${a}px)`,right:"100%",borderTop:"6px solid transparent",borderRight:`8px solid ${e==="primary"?t.primary.tooltip:r[80]}`,borderBottom:"6px solid transparent",borderLeft:"8px solid transparent"}};break;case"top-left":o={left:`calc(-6px + ${n}px)`,transform:`translate(0, calc(12px + ${l}px))`,"&:after":{content:'""',position:"absolute",bottom:"100%",left:`calc(12px + ${p}px)`,borderTop:"8px solid transparent",borderRight:"6px solid transparent",borderBottom:`8px solid ${e==="primary"?t.primary.tooltip:r[80]}`,borderLeft:"6px solid transparent"}};break;case"top-center":o={right:"50%",transform:`translate(calc(50% + ${n}px), calc(12px + ${l}px))`,"&:after":{content:'""',position:"absolute",bottom:"100%",left:`calc(50% + ${p}px)`,transform:"translateX(-50%)",borderTop:"8px solid transparent",borderRight:"6px solid transparent",borderBottom:`8px solid ${e==="primary"?t.primary.tooltip:r[80]}`,borderLeft:"6px solid transparent"}};break;case"top-right":o={right:`calc(-6px - ${n}px)`,transform:`translate(0, calc(12px + ${l}px))`,"&:after":{content:'""',position:"absolute",bottom:"100%",right:`calc(12px - ${p}px)`,borderTop:"8px solid transparent",borderRight:"6px solid transparent",borderBottom:`8px solid ${e==="primary"?t.primary.tooltip:r[80]}`,borderLeft:"6px solid transparent"}};break;case"right-top":o={top:`calc(-6px + ${l}px)`,right:`calc(100% + 12px + ${n}px)`,"&:after":{content:'""',position:"absolute",top:`calc(12px + ${a}px)`,left:"100%",borderTop:"6px solid transparent",borderRight:"8px solid transparent",borderBottom:"6px solid transparent",borderLeft:`8px solid ${e==="primary"?t.primary.tooltip:r[80]}`}};break;case"right-middle":o={top:"50%",right:`calc(100% + 12px + ${n}px)`,transform:`translateY(calc(-50% + ${l}px))`,"&:after":{content:'""',position:"absolute",top:`calc(50% + ${a}px)`,left:"100%",transform:"translateY(-50%)",borderTop:"6px solid transparent",borderRight:"8px solid transparent",borderBottom:"6px solid transparent",borderLeft:`8px solid ${e==="primary"?t.primary.tooltip:r[80]}`}};break;case"right-bottom":o={bottom:`calc(-6px - ${l}px)`,right:`calc(100% + 12px + ${n}px)`,"&:after":{content:'""',position:"absolute",bottom:`calc(12px - ${a}px)`,left:"100%",borderTop:"6px solid transparent",borderRight:"8px solid transparent",borderBottom:"6px solid transparent",borderLeft:`8px solid ${e==="primary"?t.primary.tooltip:r[80]}`}};break}return o}};
-`,G=s.forwardRef(function({children:r,placement:m="bottom-center",color:e="primary",title:c,body:d,closer:o,endAdornment:n,inlineCSS:l,open:p=!1,onClose:a,wrapperProps:g,offset:E,arrowOffset:K,...x},Y){const C=s.useId(),D=s.useId(),_=s.useId(),{isKeyboardMode:k}=N.default(),S=s.useRef(null),R=s.useRef(null),T=s.useRef(!0),[z,M]=s.useState(!1),I=(x==null?void 0:x.id)||C,B=(x==null?void 0:x.titleId)||D,L=(x==null?void 0:x.bodyId)||_,v=i=>{(i.key==="Enter"||i.key===" ")&&(a==null||a(i))};return s.useEffect(()=>{R.current&&R.current.getBoundingClientRect().width>=276&&M(!0)},[p]),s.useEffect(()=>{const i=b=>{b.key==="Escape"&&p&&(b.stopPropagation(),a==null||a(b))};return document.addEventListener("keydown",i),()=>document.removeEventListener("keydown",i)},[p,a]),s.useEffect(()=>{var b,h,f;if(T.current){T.current=!1;return}if(p){const $=(b=S.current)==null?void 0:b.querySelector('.tooltip-closer[role="button"]');if($&&k&&$.focus(),!$){const w=(h=S.current)==null?void 0:h.querySelector('[role="button"]');w&&k&&w.focus()}return}const i=(f=S.current)==null?void 0:f.querySelector('[role="button"]');i&&k&&i.focus()},[p,k]),u.jsxs(V,{ref:S,open:p,...g,css:g==null?void 0:g.inlineCSS,children:[s.Children.map(r,i=>{if(!s.isValidElement(i))return i;const b=h=>{var f,$;(h.key==="Enter"||h.key===" ")&&(($=(f=i.props)==null?void 0:f.onClick)==null||$.call(f,h))};return s.cloneElement(i,{inlineCSS:{cursor:"pointer","&:active":{outline:"none"},...i.props.inlineCSS},role:"button",tabIndex:0,"aria-hidden":!1,"aria-expanded":p,"aria-haspopup":"dialog","aria-controls":I,focusable:!0,onKeyDown:b,...i.props})}),u.jsxs(W,{id:I,className:"tooltip",role:"dialog","aria-modal":"true","aria-labelledby":c?B:void 0,"aria-describedby":d?L:void 0,ref:Y,placement:m,color:e,offset:E,arrowOffset:K,...x,css:l,children:[c&&u.jsxs(y.default,{alignItems:"center",justifyContent:"space-between",gap:2,children:[u.jsx(X.default,{id:B,variant:"h5B",color:e==="primary"?"grey.100":"grey.white",children:c}),o&&u.jsx(y.default,{flexShrink:0,children:u.jsx(j.default,{className:"tooltip-closer",name:"CloseLine",size:"xSmall",color:e==="primary"?"grey.100":"grey.white",role:"button","aria-hidden":"false",focusable:"true",tabIndex:0,onClick:a,onKeyDown:v,"aria-label":"닫기",inlineCSS:{marginLeft:"2px",cursor:"pointer","&:active":{outline:"none"}}})})]}),d&&u.jsxs(y.default,{id:L,alignItems:"center",gap:2,ref:R,style:z?{width:"276px",whiteSpace:"wrap"}:{},children:[d,n&&u.jsx(y.default,{flexShrink:0,inlineCSS:{fontSize:"24px"},children:n}),!c&&o&&u.jsx(y.default,{flexShrink:0,children:u.jsx(j.default,{className:"tooltip-closer",name:"CloseLine",size:"xSmall",color:e==="primary"?"grey.100":"grey.white",role:"button","aria-hidden":"false",focusable:"true",tabIndex:0,onClick:a,onKeyDown:v,"aria-label":"닫기",inlineCSS:{marginLeft:"2px",cursor:"pointer","&:active":{outline:"none"}}})})]})]})]})});exports.default=G;
+`,G=s.forwardRef(function({children:r,placement:m="bottom-center",color:e="primary",title:c,body:d,closer:o,endAdornment:n,inlineCSS:l,open:p=!1,onClose:a,wrapperProps:g,offset:E,arrowOffset:K,...x},Y){const C=s.useId(),D=s.useId(),_=s.useId(),{isKeyboardMode:k}=N.default(),S=s.useRef(null),R=s.useRef(null),I=s.useRef(!0),[z,M]=s.useState(!1),B=(x==null?void 0:x.id)||C,L=(x==null?void 0:x.titleId)||D,T=(x==null?void 0:x.bodyId)||_,w=i=>{(i.key==="Enter"||i.key===" ")&&(a==null||a(i))};return s.useEffect(()=>{R.current&&R.current.getBoundingClientRect().width>=276&&M(!0)},[p]),s.useEffect(()=>{const i=b=>{b.key==="Escape"&&p&&(b.stopPropagation(),a==null||a(b))};return document.addEventListener("keydown",i),()=>document.removeEventListener("keydown",i)},[p,a]),s.useEffect(()=>{var b,h,f;if(I.current){I.current=!1;return}if(p){const $=(b=S.current)==null?void 0:b.querySelector('.tooltip-closer[role="button"]');if($&&k&&$.focus(),!$){const v=(h=S.current)==null?void 0:h.querySelector('[role="button"]');v&&k&&v.focus()}return}const i=(f=S.current)==null?void 0:f.querySelector('[role="button"]');i&&k&&i.focus()},[p,k]),u.jsxs(V,{ref:S,open:p,...g,css:g==null?void 0:g.inlineCSS,children:[s.Children.map(r,i=>{if(!s.isValidElement(i))return i;const b=h=>{var f,$;(h.key==="Enter"||h.key===" ")&&(($=(f=i.props)==null?void 0:f.onClick)==null||$.call(f,h))};return s.cloneElement(i,{inlineCSS:{cursor:"pointer","&:active":{outline:"none"},...i.props.inlineCSS},role:"button",tabIndex:0,"aria-hidden":!1,"aria-expanded":p,"aria-haspopup":"dialog","aria-controls":B,focusable:!0,onKeyDown:b,...i.props})}),u.jsxs(W,{id:B,className:"tooltip",role:"dialog","aria-modal":"true","aria-labelledby":c?L:T,"aria-describedby":d?T:void 0,ref:Y,placement:m,color:e,offset:E,arrowOffset:K,...x,css:l,children:[c&&u.jsxs(y.default,{alignItems:"center",justifyContent:"space-between",gap:2,children:[u.jsx(X.default,{id:L,variant:"h5B",color:e==="primary"?"grey.100":"grey.white",children:c}),o&&u.jsx(y.default,{flexShrink:0,children:u.jsx(j.default,{className:"tooltip-closer",name:"CloseLine",size:"xSmall",color:e==="primary"?"grey.100":"grey.white",role:"button","aria-hidden":"false",focusable:"true",tabIndex:0,onClick:a,onKeyDown:w,"aria-label":"닫기",inlineCSS:{marginLeft:"2px",cursor:"pointer","&:active":{outline:"none"}}})})]}),d&&u.jsxs(y.default,{id:T,alignItems:"center",gap:2,ref:R,style:z?{width:"276px",whiteSpace:"wrap"}:{},children:[d,n&&u.jsx(y.default,{flexShrink:0,inlineCSS:{fontSize:"24px"},children:n}),!c&&o&&u.jsx(y.default,{flexShrink:0,children:u.jsx(j.default,{className:"tooltip-closer",name:"CloseLine",size:"xSmall",color:e==="primary"?"grey.100":"grey.white",role:"button","aria-hidden":"false",focusable:"true",tabIndex:0,onClick:a,onKeyDown:w,"aria-label":"닫기",inlineCSS:{marginLeft:"2px",cursor:"pointer","&:active":{outline:"none"}}})})]})]})]})});exports.default=G;

package/Tooltip/Tooltip.es.js

@@ -1,5 +1,5 @@
 import { jsxs as S, jsx as h } from "@emotion/react/jsx-runtime";
-import { forwardRef as V, useId as T, useRef as B, useState as W, useEffect as L, Children as G, isValidElement as J, cloneElement as Q } from "react";
+import { forwardRef as V, useId as B, useRef as L, useState as W, useEffect as w, Children as G, isValidElement as J, cloneElement as Q } from "react";
 import $ from "../Flexbox/Flexbox.es.js";
 import C from "../Icon/Icon.es.js";
 import U from "../Typography/Typography.es.js";
@@ -285,20 +285,20 @@ const _ = z.div`
   arrowOffset: j,
   ...d
 }, X) {
-  const q = T(), N = T(), F = T(), { isKeyboardMode: g } = Z(), k = B(null), R = B(null), w = B(!0), [H, M] = W(!1), I = (d == null ? void 0 : d.id) || q, v = (d == null ? void 0 : d.titleId) || N, E = (d == null ? void 0 : d.bodyId) || F, K = (i) => {
+  const q = B(), N = B(), F = B(), { isKeyboardMode: g } = Z(), k = L(null), R = L(null), I = L(!0), [H, M] = W(!1), v = (d == null ? void 0 : d.id) || q, E = (d == null ? void 0 : d.titleId) || N, T = (d == null ? void 0 : d.bodyId) || F, K = (i) => {
     (i.key === "Enter" || i.key === " ") && (a == null || a(i));
   };
-  return L(() => {
+  return w(() => {
     R.current && R.current.getBoundingClientRect().width >= 276 && M(!0);
-  }, [l]), L(() => {
+  }, [l]), w(() => {
     const i = (x) => {
       x.key === "Escape" && l && (x.stopPropagation(), a == null || a(x));
     };
     return document.addEventListener("keydown", i), () => document.removeEventListener("keydown", i);
-  }, [l, a]), L(() => {
+  }, [l, a]), w(() => {
     var x, f, b;
-    if (w.current) {
-      w.current = !1;
+    if (I.current) {
+      I.current = !1;
       return;
     }
     if (l) {
@@ -341,7 +341,7 @@ const _ = z.div`
             "aria-hidden": !1,
             "aria-expanded": l,
             "aria-haspopup": "dialog",
-            "aria-controls": I,
+            "aria-controls": v,
             focusable: !0,
             onKeyDown: x,
             ...i.props
@@ -350,12 +350,12 @@ const _ = z.div`
         /* @__PURE__ */ S(
           A,
           {
-            id: I,
+            id: v,
             className: "tooltip",
             role: "dialog",
             "aria-modal": "true",
-            "aria-labelledby": s ? v : void 0,
-            "aria-describedby": c ? E : void 0,
+            "aria-labelledby": s ? E : T,
+            "aria-describedby": c ? T : void 0,
             ref: X,
             placement: m,
             color: e,
@@ -368,7 +368,7 @@ const _ = z.div`
                 /* @__PURE__ */ h(
                   U,
                   {
-                    id: v,
+                    id: E,
                     variant: "h5B",
                     color: e === "primary" ? "grey.100" : "grey.white",
                     children: s
@@ -399,7 +399,7 @@ const _ = z.div`
               c && /* @__PURE__ */ S(
                 $,
                 {
-                  id: E,
+                  id: T,
                   alignItems: "center",
                   gap: 2,
                   ref: R,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dotss/ui",
-  "version": "1.1.3",
+  "version": "1.2.0",
   "description": "React UI components for Dotss",
   "type": "module",
   "main": "./index.cjs",