@dotss/ui 0.0.10 → 0.0.12

package/Tooltip/Tooltip.es.js

@@ -1,16 +1,17 @@
-import { jsxs as s, jsx as p } from "@emotion/react/jsx-runtime";
-import { forwardRef as R, useRef as $, useState as T, useEffect as L } from "react";
-import a from "../Flexbox/Flexbox.es.js";
-import b from "../Icon/Icon.es.js";
-import B from "../Typography/Typography.es.js";
-import c from "@emotion/styled";
-const w = c.div`
+import { jsxs as S, jsx as u } from "@emotion/react/jsx-runtime";
+import { forwardRef as H, useId as L, useRef as T, useState as M, useEffect as w, Children as V, isValidElement as W, cloneElement as G } from "react";
+import h from "../Flexbox/Flexbox.es.js";
+import C from "../Icon/Icon.es.js";
+import J from "../Typography/Typography.es.js";
+import Q from "../hooks/useCheckKeyboardMode/useCheckKeyboardMode.es.js";
+import z from "@emotion/styled";
+const U = z.div`
   position: relative;
   display: inline-block;
   &[open] > .tooltip {
     display: flex;
   }
-`, C = c.div`
+`, Z = z.div`
   position: absolute;
   display: none;
   flex-direction: column;
@@ -23,20 +24,21 @@ const w = c.div`
   max-height: calc(136px - 8px);
   z-index: 100003;
   white-space: nowrap;
+  word-break: break-all;
 
   ${({
   theme: {
-    palette: { brand: t, grey: o }
+    palette: { brand: t, grey: e }
   },
-  color: i
+  color: b
 }) => {
   let r = {};
-  return i === "primary" && (r = {
+  return b === "primary" && (r = {
     backgroundColor: t.primary.tooltip,
-    color: o[100]
-  }), i === "secondary" && (r = {
-    backgroundColor: o[80],
-    color: o.white
+    color: e[100]
+  }), b === "secondary" && (r = {
+    backgroundColor: e[80],
+    color: e.white
   }), r;
 }}
 
@@ -45,7 +47,7 @@ const w = c.div`
   fontWeight: t.b4R.weight,
   lineHeight: t.b4R.lineHeight,
   letterSpacing: t.b4R.letterSpacing,
-  "& svg:not(.tooltip__closer)": {
+  "& svg:not(.tooltip-closer)": {
     width: 24,
     height: 24
   }
@@ -53,24 +55,27 @@ const w = c.div`
 
   ${({
   theme: {
-    palette: { brand: t, grey: o }
+    palette: { brand: t, grey: e }
   },
-  placement: i,
-  color: r
+  placement: b,
+  color: r,
+  offset: s,
+  arrowOffset: c
 }) => {
-  let e = {};
-  switch (i) {
+  let o = {};
+  const n = (s == null ? void 0 : s.x) || 0, p = (s == null ? void 0 : s.y) || 0, l = (c == null ? void 0 : c.x) || 0, a = (c == null ? void 0 : c.y) || 0;
+  switch (b) {
     case "bottom-left":
-      e = {
-        top: "-12px",
-        left: "-6px",
+      o = {
+        top: `calc(-12px + ${p}px)`,
+        left: `calc(-6px + ${n}px)`,
         transform: "translateY(-100%)",
         "&:after": {
           content: '""',
           position: "absolute",
           top: "100%",
-          left: "12px",
-          borderTop: `8px solid ${r === "primary" ? t.primary.tooltip : o[80]}`,
+          left: `calc(12px + ${l}px)`,
+          borderTop: `8px solid ${r === "primary" ? t.primary.tooltip : e[80]}`,
           borderRight: "6px solid transparent",
           borderBottom: "8px solid transparent",
           borderLeft: "6px solid transparent"
@@ -78,17 +83,17 @@ const w = c.div`
       };
       break;
     case "bottom-center":
-      e = {
-        top: "-12px",
+      o = {
+        top: `calc(-12px + ${p}px)`,
         left: "50%",
-        transform: "translate(-50%, -100%)",
+        transform: `translate(calc(-50% + ${n}px), -100%)`,
         "&:after": {
           content: '""',
           position: "absolute",
           top: "100%",
-          left: "50%",
+          left: `calc(50% + ${l}px)`,
           transform: "translateX(-50%)",
-          borderTop: `8px solid ${r === "primary" ? t.primary.tooltip : o[80]}`,
+          borderTop: `8px solid ${r === "primary" ? t.primary.tooltip : e[80]}`,
           borderRight: "6px solid transparent",
           borderBottom: "8px solid transparent",
           borderLeft: "6px solid transparent"
@@ -96,16 +101,16 @@ const w = c.div`
       };
       break;
     case "bottom-right":
-      e = {
-        top: "-12px",
-        right: "-6px",
+      o = {
+        top: `calc(-12px + ${p}px)`,
+        right: `calc(-6px - ${n}px)`,
         transform: "translateY(-100%)",
         "&:after": {
           content: '""',
           position: "absolute",
           top: "100%",
-          right: "12px",
-          borderTop: `8px solid ${r === "primary" ? t.primary.tooltip : o[80]}`,
+          right: `calc(12px - ${l}px)`,
+          borderTop: `8px solid ${r === "primary" ? t.primary.tooltip : e[80]}`,
           borderRight: "6px solid transparent",
           borderBottom: "8px solid transparent",
           borderLeft: "6px solid transparent"
@@ -113,229 +118,326 @@ const w = c.div`
       };
       break;
     case "left-top":
-      e = {
-        top: "-6px",
-        left: "calc(100% + 12px)",
+      o = {
+        top: `calc(-6px + ${p}px)`,
+        left: `calc(100% + 12px + ${n}px)`,
         "&:after": {
           content: '""',
           position: "absolute",
-          top: "12px",
+          top: `calc(12px + ${a}px)`,
           right: "100%",
           borderTop: "6px solid transparent",
-          borderRight: `8px solid ${r === "primary" ? t.primary.tooltip : o[80]}`,
+          borderRight: `8px solid ${r === "primary" ? t.primary.tooltip : e[80]}`,
           borderBottom: "6px solid transparent",
           borderLeft: "8px solid transparent"
         }
       };
       break;
     case "left-middle":
-      e = {
+      o = {
         top: "50%",
-        left: "calc(100% + 12px)",
-        transform: "translateY(-50%)",
+        left: `calc(100% + 12px + ${n}px)`,
+        transform: `translateY(calc(-50% + ${p}px))`,
         "&:after": {
           content: '""',
           position: "absolute",
-          top: "50%",
+          top: `calc(50% + ${a}px)`,
           right: "100%",
           transform: "translateY(-50%)",
           borderTop: "6px solid transparent",
-          borderRight: `8px solid ${r === "primary" ? t.primary.tooltip : o[80]}`,
+          borderRight: `8px solid ${r === "primary" ? t.primary.tooltip : e[80]}`,
           borderBottom: "6px solid transparent",
           borderLeft: "8px solid transparent"
         }
       };
       break;
     case "left-bottom":
-      e = {
-        bottom: "-6px",
-        left: "calc(100% + 12px)",
+      o = {
+        bottom: `calc(-6px - ${p}px)`,
+        left: `calc(100% + 12px + ${n}px)`,
         "&:after": {
           content: '""',
           position: "absolute",
-          bottom: "12px",
+          bottom: `calc(12px - ${a}px)`,
           right: "100%",
           borderTop: "6px solid transparent",
-          borderRight: `8px solid ${r === "primary" ? t.primary.tooltip : o[80]}`,
+          borderRight: `8px solid ${r === "primary" ? t.primary.tooltip : e[80]}`,
           borderBottom: "6px solid transparent",
           borderLeft: "8px solid transparent"
         }
       };
       break;
     case "top-left":
-      e = {
-        left: "-6px",
-        transform: "translate(0, 12px)",
+      o = {
+        left: `calc(-6px + ${n}px)`,
+        transform: `translate(0, calc(12px + ${p}px))`,
         "&:after": {
           content: '""',
           position: "absolute",
           bottom: "100%",
-          left: "12px",
+          left: `calc(12px + ${l}px)`,
           borderTop: "8px solid transparent",
           borderRight: "6px solid transparent",
-          borderBottom: `8px solid ${r === "primary" ? t.primary.tooltip : o[80]}`,
+          borderBottom: `8px solid ${r === "primary" ? t.primary.tooltip : e[80]}`,
           borderLeft: "6px solid transparent"
         }
       };
       break;
     case "top-center":
-      e = {
+      o = {
         right: "50%",
-        transform: "translate(50%, 12px)",
+        transform: `translate(calc(50% + ${n}px), calc(12px + ${p}px))`,
         "&:after": {
           content: '""',
           position: "absolute",
           bottom: "100%",
-          left: "50%",
+          left: `calc(50% + ${l}px)`,
           transform: "translateX(-50%)",
           borderTop: "8px solid transparent",
           borderRight: "6px solid transparent",
-          borderBottom: `8px solid ${r === "primary" ? t.primary.tooltip : o[80]}`,
+          borderBottom: `8px solid ${r === "primary" ? t.primary.tooltip : e[80]}`,
           borderLeft: "6px solid transparent"
         }
       };
       break;
     case "top-right":
-      e = {
-        right: "-6px",
-        transform: "translate(0, 12px)",
+      o = {
+        right: `calc(-6px - ${n}px)`,
+        transform: `translate(0, calc(12px + ${p}px))`,
         "&:after": {
           content: '""',
           position: "absolute",
           bottom: "100%",
-          right: "12px",
+          right: `calc(12px - ${l}px)`,
           borderTop: "8px solid transparent",
           borderRight: "6px solid transparent",
-          borderBottom: `8px solid ${r === "primary" ? t.primary.tooltip : o[80]}`,
+          borderBottom: `8px solid ${r === "primary" ? t.primary.tooltip : e[80]}`,
           borderLeft: "6px solid transparent"
         }
       };
       break;
     case "right-top":
-      e = {
-        top: "-6px",
-        right: "calc(100% + 12px)",
+      o = {
+        top: `calc(-6px + ${p}px)`,
+        right: `calc(100% + 12px + ${n}px)`,
         "&:after": {
           content: '""',
           position: "absolute",
-          top: "12px",
+          top: `calc(12px + ${a}px)`,
           left: "100%",
           borderTop: "6px solid transparent",
           borderRight: "8px solid transparent",
           borderBottom: "6px solid transparent",
-          borderLeft: `8px solid ${r === "primary" ? t.primary.tooltip : o[80]}`
+          borderLeft: `8px solid ${r === "primary" ? t.primary.tooltip : e[80]}`
         }
       };
       break;
     case "right-middle":
-      e = {
+      o = {
         top: "50%",
-        right: "calc(100% + 12px)",
-        transform: "translateY(-50%)",
+        right: `calc(100% + 12px + ${n}px)`,
+        transform: `translateY(calc(-50% + ${p}px))`,
         "&:after": {
           content: '""',
           position: "absolute",
-          top: "50%",
+          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 ${r === "primary" ? t.primary.tooltip : o[80]}`
+          borderLeft: `8px solid ${r === "primary" ? t.primary.tooltip : e[80]}`
         }
       };
       break;
     case "right-bottom":
-      e = {
-        bottom: "-6px",
-        right: "calc(100% + 12px)",
+      o = {
+        bottom: `calc(-6px - ${p}px)`,
+        right: `calc(100% + 12px + ${n}px)`,
         "&:after": {
           content: '""',
           position: "absolute",
-          bottom: "12px",
+          bottom: `calc(12px - ${a}px)`,
           left: "100%",
           borderTop: "6px solid transparent",
           borderRight: "8px solid transparent",
           borderBottom: "6px solid transparent",
-          borderLeft: `8px solid ${r === "primary" ? t.primary.tooltip : o[80]}`
+          borderLeft: `8px solid ${r === "primary" ? t.primary.tooltip : e[80]}`
         }
       };
       break;
   }
-  return e;
+  return o;
 }};
-`, O = R(function({
-  children: o,
-  placement: i = "bottom-center",
+`, ot = H(function({
+  children: e,
+  placement: b = "bottom-center",
   color: r = "primary",
-  title: e,
-  body: h,
-  closer: d,
-  endAdornment: x,
-  inlineCSS: g,
-  open: m = !1,
-  onClose: f,
-  wrapperProps: n,
-  ...u
-}, y) {
-  const l = $(null), [S, k] = T(!1);
-  return L(() => {
-    l.current && l.current.getBoundingClientRect().width >= 276 && k(!0);
-  }, [m]), /* @__PURE__ */ s(w, { open: m, ...n, css: n == null ? void 0 : n.inlineCSS, children: [
-    o,
-    /* @__PURE__ */ s(
-      C,
-      {
-        className: "tooltip",
-        ref: y,
-        placement: i,
-        color: r,
-        ...u,
-        css: g,
-        children: [
-          e && /* @__PURE__ */ s(a, { alignItems: "center", justifyContent: "space-between", gap: 2, children: [
-            /* @__PURE__ */ p(B, { variant: "h5B", color: r === "primary" ? "grey.100" : "grey.white", children: e }),
-            d && /* @__PURE__ */ p(a, { flexShrink: 0, children: /* @__PURE__ */ p(
-              b,
-              {
-                className: "tooltip__closer",
-                name: "CloseLine",
-                size: "xSmall",
-                color: r === "primary" ? "grey.100" : "grey.white",
-                onClick: f,
-                inlineCSS: { marginLeft: "2px", cursor: "pointer" }
-              }
-            ) })
-          ] }),
-          /* @__PURE__ */ s(
-            a,
-            {
-              alignItems: "center",
-              gap: 2,
-              ref: l,
-              style: S ? { width: "276px", whiteSpace: "wrap" } : {},
-              children: [
-                h,
-                x && /* @__PURE__ */ p(a, { flexShrink: 0, inlineCSS: { fontSize: "24px" }, children: x }),
-                !e && d && /* @__PURE__ */ p(a, { flexShrink: 0, children: /* @__PURE__ */ p(
-                  b,
+  title: s,
+  body: c,
+  closer: o,
+  endAdornment: n,
+  inlineCSS: p,
+  open: l = !1,
+  onClose: a,
+  wrapperProps: $,
+  offset: D,
+  arrowOffset: j,
+  ...y
+}, X) {
+  const q = L(), B = L(), v = L(), { isKeyboardMode: g } = Q(), k = T(null), R = T(null), I = T(!0), [N, F] = M(!1), E = (y == null ? void 0 : y.id) || q, K = (i) => {
+    (i.key === "Enter" || i.key === " ") && (a == null || a(i));
+  };
+  return w(() => {
+    R.current && R.current.getBoundingClientRect().width >= 276 && F(!0);
+  }, [l]), w(() => {
+    const i = (d) => {
+      d.key === "Escape" && l && (d.stopPropagation(), a == null || a(d));
+    };
+    return document.addEventListener("keydown", i), () => document.removeEventListener("keydown", i);
+  }, [l, a]), w(() => {
+    var d, m, x;
+    if (I.current) {
+      I.current = !1;
+      return;
+    }
+    if (l) {
+      const f = (d = k.current) == null ? void 0 : d.querySelector(
+        '.tooltip-closer[role="button"]'
+      );
+      if (f && g && f.focus(), !f) {
+        const Y = (m = k.current) == null ? void 0 : m.querySelector('[role="button"]');
+        Y && g && Y.focus();
+      }
+      return;
+    }
+    const i = (x = k.current) == null ? void 0 : x.querySelector('[role="button"]');
+    i && g && i.focus();
+  }, [l, g]), /* @__PURE__ */ S(
+    U,
+    {
+      ref: k,
+      open: l,
+      ...$,
+      css: $ == null ? void 0 : $.inlineCSS,
+      children: [
+        V.map(e, (i) => {
+          if (!W(i))
+            return i;
+          const d = (m) => {
+            var x, f;
+            (m.key === "Enter" || m.key === " ") && ((f = (x = i.props) == null ? void 0 : x.onClick) == null || f.call(x, m));
+          };
+          return G(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": E,
+            focusable: !0,
+            onKeyDown: d,
+            ...i.props
+          });
+        }),
+        /* @__PURE__ */ S(
+          Z,
+          {
+            id: E,
+            className: "tooltip",
+            role: "dialog",
+            "aria-modal": "true",
+            "aria-labelledby": s ? B : void 0,
+            "aria-describedby": c ? v : void 0,
+            ref: X,
+            placement: b,
+            color: r,
+            offset: D,
+            arrowOffset: j,
+            ...y,
+            css: p,
+            children: [
+              s && /* @__PURE__ */ S(h, { alignItems: "center", justifyContent: "space-between", gap: 2, children: [
+                /* @__PURE__ */ u(
+                  J,
                   {
-                    className: "tooltip__closer",
+                    id: B,
+                    variant: "h5B",
+                    color: r === "primary" ? "grey.100" : "grey.white",
+                    children: s
+                  }
+                ),
+                o && /* @__PURE__ */ u(h, { flexShrink: 0, children: /* @__PURE__ */ u(
+                  C,
+                  {
+                    className: "tooltip-closer",
                     name: "CloseLine",
                     size: "xSmall",
                     color: r === "primary" ? "grey.100" : "grey.white",
-                    inlineCSS: { marginLeft: "2px", cursor: "pointer" },
-                    onClick: f
+                    role: "button",
+                    "aria-hidden": "false",
+                    focusable: "true",
+                    tabIndex: 0,
+                    onClick: a,
+                    onKeyDown: K,
+                    "aria-label": "닫기",
+                    inlineCSS: {
+                      marginLeft: "2px",
+                      cursor: "pointer",
+                      "&:active": { outline: "none" }
+                    }
                   }
                 ) })
-              ]
-            }
-          )
-        ]
-      }
-    )
-  ] });
+              ] }),
+              c && /* @__PURE__ */ S(
+                h,
+                {
+                  id: v,
+                  alignItems: "center",
+                  gap: 2,
+                  ref: R,
+                  style: N ? { width: "276px", whiteSpace: "wrap" } : {},
+                  children: [
+                    c,
+                    n && /* @__PURE__ */ u(h, { flexShrink: 0, inlineCSS: { fontSize: "24px" }, children: n }),
+                    !s && o && /* @__PURE__ */ u(h, { flexShrink: 0, children: /* @__PURE__ */ u(
+                      C,
+                      {
+                        className: "tooltip-closer",
+                        name: "CloseLine",
+                        size: "xSmall",
+                        color: r === "primary" ? "grey.100" : "grey.white",
+                        role: "button",
+                        "aria-hidden": "false",
+                        focusable: "true",
+                        tabIndex: 0,
+                        onClick: a,
+                        onKeyDown: K,
+                        "aria-label": "닫기",
+                        inlineCSS: {
+                          marginLeft: "2px",
+                          cursor: "pointer",
+                          "&:active": { outline: "none" }
+                        }
+                      }
+                    ) })
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
 });
 export {
-  O as default
+  ot as default
 };

package/Tooltip/Tooltip.stories.d.ts

@@ -32,3 +32,4 @@ type Story = StoryObj<typeof meta>;
 export declare const WithTitleBody: Story;
 export declare const WithBody: Story;
 export declare const EndAdornment: Story;
+export declare const CustomOffset: Story;

package/hooks/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./useCheckHoverPossible/useCheckHoverPossible.cjs");exports.useCheckHoverPossible=e.default;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./useCheckHoverPossible/useCheckHoverPossible.cjs"),u=require("./useCheckKeyboardMode/useCheckKeyboardMode.cjs"),s=require("./useCheckHasFocus/useCheckHasFocus.cjs"),o=require("./useFocusBoundary/useFocusBoundary.cjs");exports.useCheckHoverPossible=e.default;exports.useCheckKeyboardMode=u.default;exports.useCheckHasFocus=s.default;exports.useFocusBoundary=o.default;

package/hooks/index.d.ts

@@ -1 +1,4 @@
 export { default as useCheckHoverPossible } from './useCheckHoverPossible/useCheckHoverPossible';
+export { default as useCheckKeyboardMode } from './useCheckKeyboardMode/useCheckKeyboardMode';
+export { default as useCheckHasFocus } from './useCheckHasFocus/useCheckHasFocus';
+export { default as useFocusBoundary } from './useFocusBoundary/useFocusBoundary';

package/hooks/index.es.js

@@ -1,4 +1,10 @@
 import { default as s } from "./useCheckHoverPossible/useCheckHoverPossible.es.js";
+import { default as r } from "./useCheckKeyboardMode/useCheckKeyboardMode.es.js";
+import { default as f } from "./useCheckHasFocus/useCheckHasFocus.es.js";
+import { default as d } from "./useFocusBoundary/useFocusBoundary.es.js";
 export {
-  s as useCheckHoverPossible
+  f as useCheckHasFocus,
+  s as useCheckHoverPossible,
+  r as useCheckKeyboardMode,
+  d as useFocusBoundary
 };

package/hooks/useCheckHasFocus/useCheckHasFocus.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("react");function i({ref:t}){const[a,u]=r.useState(!1);return r.useEffect(()=>{const o=n=>{var e;const s=n.target;(e=t.current)!=null&&e.contains(s)&&u(!0)},c=n=>{var e;const s=n.target;(e=t.current)!=null&&e.contains(s)&&u(!1)};return document.addEventListener("focusin",o),document.addEventListener("focusout",c),()=>{document.removeEventListener("focusin",o),document.removeEventListener("focusout",c)}},[t]),{hasFocus:a}}exports.default=i;

package/hooks/useCheckHasFocus/useCheckHasFocus.d.ts

@@ -0,0 +1,9 @@
+import { RefObject } from 'react';
+
+interface UseCheckHasFocusProps {
+    ref: RefObject<HTMLElement>;
+}
+declare function useCheckHasFocus({ ref }: UseCheckHasFocusProps): {
+    hasFocus: boolean;
+};
+export default useCheckHasFocus;

package/hooks/useCheckHasFocus/useCheckHasFocus.es.js

@@ -0,0 +1,21 @@
+import { useState as a, useEffect as i } from "react";
+function f({ ref: e }) {
+  const [r, o] = a(!1);
+  return i(() => {
+    const u = (n) => {
+      var t;
+      const s = n.target;
+      (t = e.current) != null && t.contains(s) && o(!0);
+    }, c = (n) => {
+      var t;
+      const s = n.target;
+      (t = e.current) != null && t.contains(s) && o(!1);
+    };
+    return document.addEventListener("focusin", u), document.addEventListener("focusout", c), () => {
+      document.removeEventListener("focusin", u), document.removeEventListener("focusout", c);
+    };
+  }, [e]), { hasFocus: r };
+}
+export {
+  f as default
+};

package/hooks/useCheckKeyboardMode/useCheckKeyboardMode.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("react"),s=["Tab","ArrowUp","ArrowDown","ArrowLeft","ArrowRight","Enter"," ","Home","End","PageUp","PageDown"];function u(){const[r,e]=n.useState(!1);return n.useEffect(()=>{const o=d=>{s.includes(d.key)&&e(!0)},t=()=>{e(!1)};return document.addEventListener("keydown",o),document.addEventListener("mousedown",t),()=>{document.removeEventListener("keydown",o),document.removeEventListener("mousedown",t)}},[]),{isKeyboardMode:r}}exports.default=u;

package/hooks/useCheckKeyboardMode/useCheckKeyboardMode.d.ts

@@ -0,0 +1,4 @@
+declare function useCheckKeyboardMode(): {
+    isKeyboardMode: boolean;
+};
+export default useCheckKeyboardMode;