@dotss/ui 0.0.10 → 0.0.11

package/TextField/TextField.es.js

@@ -1,13 +1,13 @@
-import { jsxs as y, jsx as c } from "@emotion/react/jsx-runtime";
-import { forwardRef as z, useState as S } from "react";
-import f from "../Icon/Icon.es.js";
+import { jsxs as g, jsx as l } from "@emotion/react/jsx-runtime";
+import { forwardRef as T, useId as v, useState as S } from "react";
+import b from "../Icon/Icon.es.js";
 import u from "@emotion/styled";
-const F = u.div`
+const V = u.div`
   position: relative;
   display: flex;
   flex-direction: column;
   ${({ fullWidth: t }) => t ? { width: "100%" } : null};
-`, O = u.div`
+`, E = u.div`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -16,9 +16,9 @@ const F = u.div`
 
   ${({
   theme: {
-    palette: { green: t, grey: e, background: i, etc: n }
+    palette: { green: t, grey: e, background: o, etc: n }
   },
-  variant: g,
+  variant: f,
   helper: r
 }) => {
   let s = {
@@ -26,7 +26,7 @@ const F = u.div`
     borderColor: e[50],
     color: e[100]
   };
-  switch (g) {
+  switch (f) {
     case "outlined":
       (r == null ? void 0 : r.severity) === "success" && (s = {
         ...s,
@@ -38,7 +38,7 @@ const F = u.div`
       break;
     case "filled":
       s = {
-        backgroundColor: i.primary
+        backgroundColor: o.primary
       };
       break;
   }
@@ -46,14 +46,14 @@ const F = u.div`
 }};
 
   ${({ theme: { spacing: t }, size: e }) => {
-  let i = {
+  let o = {
     maxHeight: 48,
     padding: `${t.content(3)}px ${t.content(4)}px`,
     borderRadius: 10
   };
   switch (e) {
     case "2xLarge":
-      i = {
+      o = {
         maxHeight: 80,
         padding: `${t.content(4)}px ${t.content(5)}px`,
         borderRadius: 12,
@@ -64,14 +64,14 @@ const F = u.div`
       };
       break;
     case "xLarge":
-      i = {
+      o = {
         maxHeight: 56,
         padding: t.content(4),
         borderRadius: 12
       };
       break;
   }
-  return i;
+  return o;
 }};
 
   ${({
@@ -79,8 +79,8 @@ const F = u.div`
     palette: { brand: t }
   },
   variant: e,
-  focus: i
-}) => e === "outlined" && i ? {
+  focus: o
+}) => e === "outlined" && o ? {
   borderColor: t.primary.line
 } : null};
 
@@ -91,10 +91,9 @@ const F = u.div`
     palette: { grey: t }
   },
   variant: e,
-  disabled: i
+  disabled: o
 }) => {
-  if (!i)
-    return null;
+  if (!o) return null;
   let n = {
     backgroundColor: t[10],
     borderColor: t[30]
@@ -108,7 +107,7 @@ const F = u.div`
   }
   return n;
 }}
-`, T = u.input`
+`, W = u.input`
   width: inherit;
   flex-grow: 1;
   border: none;
@@ -119,8 +118,8 @@ const F = u.div`
   theme: {
     typography: { b2R: t, h0R: e }
   },
-  inputSize: i
-}) => i === "2xLarge" ? {
+  inputSize: o
+}) => o === "2xLarge" ? {
   fontSize: e.size,
   fontWeight: e.weight,
   lineHeight: e.lineHeight,
@@ -132,7 +131,7 @@ const F = u.div`
   letterSpacing: t.letterSpacing
 }};
 
-  &::placeholder {
+  &::placeholder, &::-webkit-input-placeholder, &::-ms-input-placeholder, &::-moz-placeholder {
     ${({
   theme: {
     palette: { grey: t }
@@ -156,7 +155,19 @@ const F = u.div`
     color: t[30]
   }
 })}
-`, I = u.div`
+
+    &:focus {
+      outline: 'none';
+    }
+
+    &[type='password']::-ms-reveal {
+      display: none;
+    }
+`, B = u.button`
+  &:empty {
+    display: none;
+  }
+`, M = u.div`
   position: absolute;
   left: 0;
   bottom: ${({ inputSize: t }) => t === "2xLarge" ? "-26px" : "-16px"};
@@ -165,8 +176,8 @@ const F = u.div`
   theme: {
     typography: { c3R: t, b1R: e }
   },
-  inputSize: i
-}) => i === "2xLarge" ? {
+  inputSize: o
+}) => o === "2xLarge" ? {
   fontSize: e.size,
   fontWeight: e.weight,
   lineHeight: e.lineHeight,
@@ -182,91 +193,123 @@ const F = u.div`
   theme: {
     palette: { etc: t, grey: e }
   },
-  helper: i
+  helper: o
 }) => {
   const n = {
     color: e[100]
   };
-  return (i == null ? void 0 : i.severity) === "error" ? {
+  return (o == null ? void 0 : o.severity) === "error" ? {
     color: t.red
   } : n;
 }}
-`, P = z(function({
-  type: e,
-  variant: i = "outlined",
+
+  &:empty {
+    display: none;
+  }
+`, J = T(function({
+  type: e = "text",
+  variant: o = "outlined",
   size: n = "large",
-  startAdornment: g,
+  startAdornment: f,
   endAdornment: r,
   fullWidth: s,
-  helper: o,
+  helper: i,
   disabled: m,
   inlineCSS: $,
-  onFocus: b,
-  onBlur: p,
-  disablePasswordVisibility: h,
-  ...C
-}, k) {
-  const [v, x] = S(!1), [l, H] = S(!1), d = !h && !r && e === "password" && (o == null ? void 0 : o.severity) !== "success", L = (a) => {
-    x(!0), typeof b == "function" && b(a);
-  }, j = (a) => {
-    x(!1), typeof p == "function" && p(a);
-  }, w = () => H((a) => !a);
-  return /* @__PURE__ */ y(F, { fullWidth: s, children: [
-    /* @__PURE__ */ y(
-      O,
+  onFocus: x,
+  onBlur: y,
+  disablePasswordVisibility: k,
+  helperProps: C,
+  ...H
+}, L) {
+  const j = v(), p = v(), [z, w] = S(!1), [c, I] = S(!1), a = !k && !r && e === "password" && (i == null ? void 0 : i.severity) !== "success", F = (d) => {
+    w(!0), typeof x == "function" && x(d);
+  }, h = (d) => {
+    w(!1), typeof y == "function" && y(d);
+  }, O = () => I((d) => !d);
+  return /* @__PURE__ */ g(V, { fullWidth: s, children: [
+    /* @__PURE__ */ g(
+      E,
       {
-        variant: i,
+        variant: o,
         size: n,
-        focus: v,
+        focus: z,
         fullWidth: s,
-        helper: o,
+        helper: i,
         disabled: m,
         css: $,
         children: [
-          g,
-          /* @__PURE__ */ c(
-            T,
+          f,
+          /* @__PURE__ */ l(
+            W,
             {
-              ref: k,
-              type: d && l ? "text" : d && !l ? "password" : e,
-              variant: i,
+              ref: L,
+              id: j,
+              type: a && c ? "text" : a && !c ? "password" : e,
+              variant: o,
               inputSize: n,
               disabled: m,
-              ...C,
-              onFocus: L,
-              onBlur: j
+              "aria-invalid": (i == null ? void 0 : i.severity) === "error",
+              "aria-describedby": i != null && i.message ? p : void 0,
+              ...H,
+              onFocus: F,
+              onBlur: h
             }
           ),
           r,
-          !r && (o == null ? void 0 : o.severity) === "success" && /* @__PURE__ */ c(f, { name: "CheckLine", color: "green.70" }),
-          d && l && /* @__PURE__ */ c(
-            f,
+          !r && (i == null ? void 0 : i.severity) === "success" && /* @__PURE__ */ l(b, { name: "CheckLine", color: "green.70", "aria-label": "성공", role: "img" }),
+          /* @__PURE__ */ g(
+            B,
             {
-              name: "EyeVisibleLine",
-              "data-testid": "EyeVisibleLine",
-              onClick: w,
-              inlineCSS: {
-                cursor: "pointer"
-              }
-            }
-          ),
-          d && !l && /* @__PURE__ */ c(
-            f,
-            {
-              name: "EyeInvisibleLine",
-              "data-testid": "EyeInvisibleLine",
-              onClick: w,
-              inlineCSS: {
-                cursor: "pointer"
-              }
+              type: "button",
+              tabIndex: a ? 0 : -1,
+              "aria-pressed": a ? c : void 0,
+              onClick: O,
+              "aria-hidden": !a,
+              "aria-label": a && c ? "비밀번호 표시됨" : "비밀번호 숨김됨",
+              children: [
+                a && c && /* @__PURE__ */ l(
+                  b,
+                  {
+                    name: "EyeVisibleLine",
+                    "data-testid": "EyeVisibleLine",
+                    inlineCSS: {
+                      cursor: "pointer"
+                    }
+                  }
+                ),
+                a && !c && /* @__PURE__ */ l(
+                  b,
+                  {
+                    name: "EyeInvisibleLine",
+                    "data-testid": "EyeInvisibleLine",
+                    inlineCSS: {
+                      cursor: "pointer"
+                    }
+                  }
+                )
+              ]
             }
           )
         ]
       }
     ),
-    (o == null ? void 0 : o.message) && /* @__PURE__ */ c(I, { helper: o, inputSize: n, "data-testid": "helper", children: o == null ? void 0 : o.message })
+    /* @__PURE__ */ l(
+      M,
+      {
+        id: p,
+        className: "textfield-helper",
+        "aria-live": (i == null ? void 0 : i.severity) === "error" ? "assertive" : "off",
+        role: (i == null ? void 0 : i.severity) === "error" ? "alert" : "status",
+        helper: i,
+        inputSize: n,
+        "data-testid": "helper",
+        ...C,
+        children: i == null ? void 0 : i.message
+      }
+    )
   ] });
 });
 export {
-  P as default
+  J as default
 };

package/TextField/TextField.stories.d.ts

@@ -33,3 +33,4 @@ export declare const FullWidth: Story;
 export declare const PasswordVisibility: Story;
 export declare const Success: Story;
 export declare const Error: Story;
+export declare const WithScreenReaderSupport: Story;

package/Tooltip/Tooltip.cjs

@@ -1,10 +1,10 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("@emotion/react/jsx-runtime"),n=require("react"),p=require("../Flexbox/Flexbox.cjs"),b=require("../Icon/Icon.cjs"),k=require("../Typography/Typography.cjs"),$=require("@emotion/styled"),T=t=>t&&t.__esModule?t:{default:t},m=T($),L=m.default.div`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const x=require("@emotion/react/jsx-runtime"),s=require("react"),$=require("../Flexbox/Flexbox.cjs"),I=require("../Icon/Icon.cjs"),z=require("../Typography/Typography.cjs"),M=require("../hooks/useCheckKeyboardMode/useCheckKeyboardMode.cjs"),X=require("@emotion/styled"),N=t=>t&&t.__esModule?t:{default:t},q=N(X),F=q.default.div`
   position: relative;
   display: inline-block;
   &[open] > .tooltip {
     display: flex;
   }
-`,j=m.default.div`
+`,H=q.default.div`
   position: absolute;
   display: none;
   flex-direction: column;
@@ -17,10 +17,11 @@
   max-height: calc(136px - 8px);
   z-index: 100003;
   white-space: nowrap;
+  word-break: break-all;
 
-  ${({theme:{palette:{brand:t,grey:r}},color:a})=>{let e={};return a==="primary"&&(e={backgroundColor:t.primary.tooltip,color:r[100]}),a==="secondary"&&(e={backgroundColor:r[80],color:r.white}),e}}
+  ${({theme:{palette:{brand:t,grey:r}},color:f})=>{let e={};return f==="primary"&&(e={backgroundColor:t.primary.tooltip,color:r[100]}),f==="secondary"&&(e={backgroundColor:r[80],color:r.white}),e}}
 
-  ${({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:{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:a,color:e})=>{let o={};switch(a){case"bottom-left":o={top:"-12px",left:"-6px",transform:"translateY(-100%)","&:after":{content:'""',position:"absolute",top:"100%",left:"12px",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:"-12px",left:"50%",transform:"translate(-50%, -100%)","&:after":{content:'""',position:"absolute",top:"100%",left:"50%",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:"-12px",right:"-6px",transform:"translateY(-100%)","&:after":{content:'""',position:"absolute",top:"100%",right:"12px",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:"-6px",left:"calc(100% + 12px)","&:after":{content:'""',position:"absolute",top:"12px",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)",transform:"translateY(-50%)","&:after":{content:'""',position:"absolute",top:"50%",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:"-6px",left:"calc(100% + 12px)","&:after":{content:'""',position:"absolute",bottom:"12px",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:"-6px",transform:"translate(0, 12px)","&:after":{content:'""',position:"absolute",bottom:"100%",left:"12px",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(50%, 12px)","&:after":{content:'""',position:"absolute",bottom:"100%",left:"50%",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:"-6px",transform:"translate(0, 12px)","&:after":{content:'""',position:"absolute",bottom:"100%",right:"12px",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:"-6px",right:"calc(100% + 12px)","&:after":{content:'""',position:"absolute",top:"12px",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)",transform:"translateY(-50%)","&:after":{content:'""',position:"absolute",top:"50%",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:"-6px",right:"calc(100% + 12px)","&:after":{content:'""',position:"absolute",bottom:"12px",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}};
-`,B=n.forwardRef(function({children:r,placement:a="bottom-center",color:e="primary",title:o,body:h,closer:d,endAdornment:x,inlineCSS:u,open:f=!1,onClose:c,wrapperProps:s,...g},y){const l=n.useRef(null),[S,R]=n.useState(!1);return n.useEffect(()=>{l.current&&l.current.getBoundingClientRect().width>=276&&R(!0)},[f]),i.jsxs(L,{open:f,...s,css:s==null?void 0:s.inlineCSS,children:[r,i.jsxs(j,{className:"tooltip",ref:y,placement:a,color:e,...g,css:u,children:[o&&i.jsxs(p.default,{alignItems:"center",justifyContent:"space-between",gap:2,children:[i.jsx(k.default,{variant:"h5B",color:e==="primary"?"grey.100":"grey.white",children:o}),d&&i.jsx(p.default,{flexShrink:0,children:i.jsx(b.default,{className:"tooltip__closer",name:"CloseLine",size:"xSmall",color:e==="primary"?"grey.100":"grey.white",onClick:c,inlineCSS:{marginLeft:"2px",cursor:"pointer"}})})]}),i.jsxs(p.default,{alignItems:"center",gap:2,ref:l,style:S?{width:"276px",whiteSpace:"wrap"}:{},children:[h,x&&i.jsx(p.default,{flexShrink:0,inlineCSS:{fontSize:"24px"},children:x}),!o&&d&&i.jsx(p.default,{flexShrink:0,children:i.jsx(b.default,{className:"tooltip__closer",name:"CloseLine",size:"xSmall",color:e==="primary"?"grey.100":"grey.white",inlineCSS:{marginLeft:"2px",cursor:"pointer"},onClick:c})})]})]})]})});exports.default=B;
+  ${({theme:{palette:{brand:t,grey:r}},placement:f,color:e,offset:c,arrowOffset:d})=>{let o={};const n=(c==null?void 0:c.x)||0,p=(c==null?void 0:c.y)||0,l=(d==null?void 0:d.x)||0,a=(d==null?void 0:d.y)||0;switch(f){case"bottom-left":o={top:`calc(-12px + ${p}px)`,left:`calc(-6px + ${n}px)`,transform:"translateY(-100%)","&:after":{content:'""',position:"absolute",top:"100%",left:`calc(12px + ${l}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 + ${p}px)`,left:"50%",transform:`translate(calc(-50% + ${n}px), -100%)`,"&:after":{content:'""',position:"absolute",top:"100%",left:`calc(50% + ${l}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 + ${p}px)`,right:`calc(-6px - ${n}px)`,transform:"translateY(-100%)","&:after":{content:'""',position:"absolute",top:"100%",right:`calc(12px - ${l}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 + ${p}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% + ${p}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 - ${p}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 + ${p}px))`,"&:after":{content:'""',position:"absolute",bottom:"100%",left:`calc(12px + ${l}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 + ${p}px))`,"&:after":{content:'""',position:"absolute",bottom:"100%",left:`calc(50% + ${l}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 + ${p}px))`,"&:after":{content:'""',position:"absolute",bottom:"100%",right:`calc(12px - ${l}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 + ${p}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% + ${p}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 - ${p}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}};
+`,V=s.forwardRef(function({children:r,placement:f="bottom-center",color:e="primary",title:c,body:d,closer:o,endAdornment:n,inlineCSS:p,open:l=!1,onClose:a,wrapperProps:y,offset:E,arrowOffset:K,...g},Y){const C=s.useId(),T=s.useId(),L=s.useId(),{isKeyboardMode:k}=M.default(),S=s.useRef(null),R=s.useRef(null),v=s.useRef(!0),[D,_]=s.useState(!1),w=(g==null?void 0:g.id)||C,B=i=>{(i.key==="Enter"||i.key===" ")&&(a==null||a(i))};return s.useEffect(()=>{R.current&&R.current.getBoundingClientRect().width>=276&&_(!0)},[l]),s.useEffect(()=>{const i=u=>{u.key==="Escape"&&l&&(u.stopPropagation(),a==null||a(u))};return document.addEventListener("keydown",i),()=>document.removeEventListener("keydown",i)},[l,a]),s.useEffect(()=>{var u,m,b;if(v.current){v.current=!1;return}if(l){const h=(u=S.current)==null?void 0:u.querySelector('.tooltip-closer[role="button"]');if(h&&k&&h.focus(),!h){const j=(m=S.current)==null?void 0:m.querySelector('[role="button"]');j&&k&&j.focus()}return}const i=(b=S.current)==null?void 0:b.querySelector('[role="button"]');i&&k&&i.focus()},[l,k]),x.jsxs(F,{ref:S,open:l,...y,css:y==null?void 0:y.inlineCSS,children:[s.Children.map(r,i=>{if(!s.isValidElement(i))return i;const u=m=>{var b,h;(m.key==="Enter"||m.key===" ")&&((h=(b=i.props)==null?void 0:b.onClick)==null||h.call(b,m))};return s.cloneElement(i,{inlineCSS:{cursor:"pointer","&:active":{outline:"none"},...i.props.inlineCSS},role:"button",tabIndex:0,"aria-hidden":!1,"aria-expanded":l,"aria-haspopup":"dialog","aria-controls":w,focusable:!0,onKeyDown:u,...i.props})}),x.jsxs(H,{id:w,className:"tooltip",role:"dialog","aria-modal":"true","aria-labelledby":c?T:void 0,"aria-describedby":d?L:void 0,ref:Y,placement:f,color:e,offset:E,arrowOffset:K,...g,css:p,children:[c&&x.jsxs($.default,{alignItems:"center",justifyContent:"space-between",gap:2,children:[x.jsx(z.default,{id:T,variant:"h5B",color:e==="primary"?"grey.100":"grey.white",children:c}),o&&x.jsx($.default,{flexShrink:0,children:x.jsx(I.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:B,"aria-label":"닫기",inlineCSS:{marginLeft:"2px",cursor:"pointer","&:active":{outline:"none"}}})})]}),d&&x.jsxs($.default,{id:L,alignItems:"center",gap:2,ref:R,style:D?{width:"276px",whiteSpace:"wrap"}:{},children:[d,n&&x.jsx($.default,{flexShrink:0,inlineCSS:{fontSize:"24px"},children:n}),!c&&o&&x.jsx($.default,{flexShrink:0,children:x.jsx(I.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:B,"aria-label":"닫기",inlineCSS:{marginLeft:"2px",cursor:"pointer","&:active":{outline:"none"}}})})]})]})]})});exports.default=V;

package/Tooltip/Tooltip.d.ts

@@ -1,7 +1,11 @@
-import { HTMLAttributes, MouseEventHandler, ReactNode } from 'react';
+import { HTMLAttributes, ReactNode, SyntheticEvent } from 'react';
 import { BrandColorKey } from '../typings/color';
 import { GeneralComponentProps } from '../typings/component';
 
+export interface TooltipOffset {
+    x?: number;
+    y?: number;
+}
 export interface TooltipProps extends GeneralComponentProps<Omit<HTMLAttributes<HTMLDivElement>, 'title'>> {
     placement?: 'bottom-left' | 'bottom-center' | 'bottom-right' | 'left-top' | 'left-middle' | 'left-bottom' | 'top-left' | 'top-center' | 'top-right' | 'right-top' | 'right-middle' | 'right-bottom';
     color?: BrandColorKey;
@@ -10,9 +14,10 @@ export interface TooltipProps extends GeneralComponentProps<Omit<HTMLAttributes<
     endAdornment?: ReactNode;
     open?: boolean;
     closer?: boolean;
-    onOpen?: MouseEventHandler;
-    onClose?: MouseEventHandler;
+    onClose?: (e: SyntheticEvent) => void;
     wrapperProps?: GeneralComponentProps<HTMLAttributes<HTMLDivElement>>;
+    offset?: TooltipOffset;
+    arrowOffset?: TooltipOffset;
 }
 declare const Tooltip: import('react').ForwardRefExoticComponent<TooltipProps & import('react').RefAttributes<HTMLDivElement>>;
 export default Tooltip;