@dotss/ui 0.0.10 → 0.0.12

package/Menu/Menu.es.js

@@ -1,8 +1,9 @@
-import { jsx as y, jsxs as tt, Fragment as ot } from "@emotion/react/jsx-runtime";
-import { forwardRef as et, useState as u, useRef as W, useEffect as a, Children as j, isValidElement as it, cloneElement as rt } from "react";
-import { createPortal as st } from "react-dom";
-import x from "@emotion/styled";
-const nt = x.div`
+import { jsx as $, jsxs as st, Fragment as nt } from "@emotion/react/jsx-runtime";
+import { forwardRef as ut, useState as a, useRef as z, useEffect as b, Children as H, isValidElement as ct, cloneElement as dt } from "react";
+import { createPortal as ft } from "react-dom";
+import A from "../utils/getSibling/getSibling.es.js";
+import I from "@emotion/styled";
+const at = I.div`
   position: fixed;
   top: 0;
   left: 0;
@@ -17,7 +18,7 @@ const nt = x.div`
   }
 }}}
 
-`, ut = x.div`
+`, lt = I.div`
   position: fixed;
   max-width: calc(100% - ${({ theme: { spacing: o } }) => o.layout(4)}px);
   border-radius: 10px;
@@ -34,16 +35,16 @@ const nt = x.div`
   transform: scale(${({ open: o }) => o ? 1 : 0.97});
   opacity: ${({ open: o }) => o ? 1 : 0};
   z-index: 100003;
-`, dt = x.ul`
+`, pt = I.ul`
   display: flex;
   flex-direction: column;
   max-height: ${({ maxHeight: o }) => o}px;
   overflow-y: auto;
 
-    ${({ theme: { spacing: o }, disablePadding: d }) => d ? null : {
+    ${({ theme: { spacing: o }, disablePadding: l }) => l ? null : {
   padding: `${o.content(1)}px 0`
 }}}
-`, ct = x.div`
+`, yt = I.div`
   width: 100%;
   height: 1px;
   background-color: ${({
@@ -51,113 +52,146 @@ const nt = x.div`
     palette: { grey: o }
   }
 }) => o[20]};
-`, b = 24, vt = et(function({
-  children: d,
-  anchorRef: s,
-  open: v,
-  onClose: g,
-  spacing: c = 4,
-  transitionDuration: $ = 200,
-  onChange: I,
+`, T = 24, ht = ut(function({
+  children: l,
+  anchorRef: c,
+  open: w,
+  onClose: d,
+  spacing: y = 4,
+  transitionDuration: S = 200,
+  onChange: x,
   value: B,
   showDivider: G,
-  placement: L = "bottom-center",
-  disablePadding: F,
-  disableClickOutside: N = !0,
-  width: E,
-  fitToAnchorWidth: k = !0,
+  placement: P = "bottom-center",
+  disablePadding: K,
+  disableClickOutside: U = !0,
+  width: M,
+  fitToAnchorWidth: W = !0,
   maxHeight: V = 476,
   style: _,
-  inlineCSS: q,
-  ...A
-}, D) {
-  const [w, O] = u(0), [T, C] = u(0), [h, J] = u(0), [M, z] = u(!1), [K, Q] = u(!1), [U, H] = u(!0), f = W(), l = W(), P = W(null), X = (t, i) => (r) => {
-    r.stopPropagation(), typeof g == "function" && g(), typeof I == "function" && I(t, r), typeof i == "function" && i(r);
+  inlineCSS: C,
+  menuProps: J,
+  ...Q
+}, X) {
+  const [h, F] = a(0), [D, L] = a(0), [g, Y] = a(0), [O, N] = a(!1), [Z, R] = a(!1), [tt, j] = a(!0), [ot, p] = a(null), m = z(), v = z(), k = z(null), et = (t, e) => (s) => {
+    s.stopPropagation(), typeof d == "function" && d(), typeof x == "function" && x(t, s), typeof e == "function" && e(s);
+  }, it = (t) => (e) => {
+    var r, u, n, f;
+    e.key === "Tab" && typeof d == "function" && (d(), p(0)), (e.key === "Enter" || e.key === " ") && typeof d == "function" && typeof x == "function" && (d(), x(t, e));
+    const s = document.activeElement;
+    if (s) {
+      if (e.code === "ArrowDown") {
+        const i = A(s, "next", { skipDisabled: !0 });
+        i && i.dataset.index ? (p(Number(i.dataset.index)), i.focus()) : (p(0), (u = (r = k.current) == null ? void 0 : r.querySelector('[role="menuitem"]')) == null || u.focus());
+      }
+      if (e.code === "ArrowUp") {
+        const i = A(s, "prev", { skipDisabled: !0 });
+        i && i.dataset.index ? (p(Number(i.dataset.index)), i.focus()) : (p(H.count(l) - 1), (f = (n = k.current) == null ? void 0 : n.querySelector('[role="menuitem"]:last-child')) == null || f.focus());
+      }
+    }
   };
-  return a(() => {
-    v && (l.current && clearTimeout(l.current), document.body.style.overflow = "hidden", H(!1), f.current = setTimeout(() => {
-      z(!0);
+  return b(() => {
+    w && (v.current && clearTimeout(v.current), document.body.style.overflow = "hidden", j(!1), m.current = setTimeout(() => {
+      N(!0);
     }, 100));
-  }, [v]), a(() => {
-    v || (f.current && clearTimeout(f.current), z(!1), document.body.removeAttribute("style"), l.current = setTimeout(() => {
-      H(!0);
-    }, $));
-  }, [v, $]), a(() => {
+  }, [w]), b(() => {
+    w || (m.current && clearTimeout(m.current), N(!1), document.body.removeAttribute("style"), v.current = setTimeout(() => {
+      j(!0), p(0);
+    }, S));
+  }, [w, S]), b(() => {
     const t = () => {
-      var S;
-      const { offsetWidth: i = 0, offsetHeight: r = 0 } = (s == null ? void 0 : s.current) || {}, e = ((S = s == null ? void 0 : s.current) == null ? void 0 : S.getBoundingClientRect()) || {
+      var q;
+      const { offsetWidth: e = 0, offsetHeight: s = 0 } = (c == null ? void 0 : c.current) || {}, r = ((q = c == null ? void 0 : c.current) == null ? void 0 : q.getBoundingClientRect()) || {
         top: 0,
         left: 0,
         bottom: 0
-      }, { offsetWidth: p = 0, offsetHeight: n = 0 } = P.current || {}, [m, Y] = L.split("-");
-      J(E || i);
-      const Z = (e.top || 0) - n - c - b < b, R = (e.bottom || 0) + n + c + b > window.innerHeight;
-      switch (m) {
+      }, { offsetWidth: u = 0, offsetHeight: n = 0 } = k.current || {}, [f, i] = P.split("-");
+      Y(M || e);
+      const E = (r.top || 0) - n - y - T < T, rt = (r.bottom || 0) + n + y + T > window.innerHeight;
+      switch (f) {
         case "top":
-          O(
-            Z ? b : e.top - n - c
+          F(
+            E ? T : r.top - n - y
           );
           break;
         default:
-          O(R ? "auto" : e.top + r + c);
+          F(rt ? "auto" : r.top + s + y);
           break;
       }
-      switch (Y) {
+      switch (i) {
         case "left":
-          C(e.left);
+          L(r.left);
           break;
         case "right":
-          C(e.left - Math.abs(i - p));
+          L(r.left - Math.abs(e - u));
           break;
         default:
-          C(e.left + i / 2 - p / 2);
+          L(r.left + e / 2 - u / 2);
           break;
       }
     };
     return t(), window.addEventListener("scroll", t), window.addEventListener("resize", t), () => {
       window.removeEventListener("scroll", t), window.removeEventListener("resize", t);
     };
-  }, [s, c, L, M, d, E]), a(() => {
-    Q(M && !!w && !!T && !!h);
-  }, [M, w, T, h]), a(() => () => {
-    f.current && clearTimeout(f.current), l.current && clearTimeout(l.current);
-  }, []), U ? null : st(
-    /* @__PURE__ */ y(nt, { onClick: g, disableClickOutside: N, children: /* @__PURE__ */ y(
-      ut,
+  }, [c, y, P, O, l, M]), b(() => {
+    R(O && !!h && !!D && !!g);
+  }, [O, h, D, g]), b(() => () => {
+    m.current && clearTimeout(m.current), v.current && clearTimeout(v.current);
+  }, []), tt ? null : ft(
+    /* @__PURE__ */ $(at, { onClick: d, disableClickOutside: U, children: /* @__PURE__ */ $(
+      lt,
       {
-        ref: D,
-        open: K,
-        transitionDuration: $,
-        ...A,
-        css: q,
+        ref: X,
+        open: Z,
+        transitionDuration: S,
+        ...Q,
+        css: C,
         style: {
           ..._,
-          top: w,
-          left: T,
-          bottom: w === "auto" ? 24 : void 0,
-          width: k ? h : void 0
+          top: h,
+          left: D,
+          bottom: h === "auto" ? 24 : void 0,
+          width: W ? g : void 0
         },
-        children: /* @__PURE__ */ y(dt, { ref: P, disablePadding: F, maxHeight: V, children: j.map(d, (t, i) => {
-          var r, e, p, n, m;
-          return it(t) ? /* @__PURE__ */ tt(ot, { children: [
-            rt(t, {
-              ...t.props,
-              selected: !!((r = t == null ? void 0 : t.props) != null && r.value) && ((e = t == null ? void 0 : t.props) == null ? void 0 : e.value) === B,
-              onClick: X((p = t == null ? void 0 : t.props) == null ? void 0 : p.value, (n = t == null ? void 0 : t.props) == null ? void 0 : n.onClick),
-              style: {
-                ...(m = t == null ? void 0 : t.props) == null ? void 0 : m.style,
-                [E ? "width" : "minWidth"]: k ? void 0 : h,
-                maxWidth: k ? void 0 : "100%"
-              }
-            }),
-            G && j.count(d) !== i + 1 && /* @__PURE__ */ y(ct, {})
-          ] }) : null;
-        }) })
+        children: /* @__PURE__ */ $(
+          pt,
+          {
+            role: "menu",
+            ref: k,
+            disablePadding: K,
+            maxHeight: V,
+            ...J,
+            children: H.map(l, (t, e) => {
+              var r, u, n, f, i, E;
+              if (!ct(t))
+                return null;
+              const s = ot === e;
+              return /* @__PURE__ */ st(nt, { children: [
+                dt(t, {
+                  ...t.props,
+                  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                  // @ts-expect-error
+                  "data-index": e,
+                  selected: !!((r = t == null ? void 0 : t.props) != null && r.value) && ((u = t == null ? void 0 : t.props) == null ? void 0 : u.value) === B,
+                  onClick: et((n = t == null ? void 0 : t.props) == null ? void 0 : n.value, (f = t == null ? void 0 : t.props) == null ? void 0 : f.onClick),
+                  onKeyDown: it((i = t == null ? void 0 : t.props) == null ? void 0 : i.value),
+                  tabIndex: s ? 0 : -1,
+                  style: {
+                    ...(E = t == null ? void 0 : t.props) == null ? void 0 : E.style,
+                    [M ? "width" : "minWidth"]: W ? void 0 : g,
+                    maxWidth: W ? void 0 : "100%"
+                  }
+                }),
+                G && H.count(l) !== e + 1 && /* @__PURE__ */ $(yt, {})
+              ] });
+            })
+          }
+        )
       }
     ) }),
     document.body
   );
 });
 export {
-  vt as default
+  ht as default
 };

package/Menu/Menu.stories.d.ts

@@ -28,3 +28,4 @@ export declare const ShowDivider: Story;
 export declare const Placement: Story;
 export declare const Custom: Story;
 export declare const FitToAnchorWidth: Story;
+export declare const WithScreenReaderSupport: Story;

package/Menu/MenuBlock/MenuBlock.cjs

@@ -1,26 +1,33 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("@emotion/react/jsx-runtime"),w=require("react"),y=require("../../Icon/Icon.cjs"),v=require("../../hooks/useCheckHoverPossible/useCheckHoverPossible.cjs"),S=require("@emotion/styled"),j=e=>e&&e.__esModule?e:{default:e},u=j(S),$=u.default.li`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("@emotion/react/jsx-runtime"),w=require("react"),y=require("../../Icon/Icon.cjs"),v=require("../../hooks/useCheckHoverPossible/useCheckHoverPossible.cjs"),S=require("@emotion/styled"),$=e=>e&&e.__esModule?e:{default:e},c=$(S),j=c.default.li`
   display: flex;
   align-items: center;
   gap: ${({theme:{spacing:e}})=>e.content(2)}px;
   padding: 10px ${({theme:{spacing:e}})=>e.content(3)}px;
   background-color: ${({theme:{palette:{grey:e}}})=>e.white};
   cursor: ${({disabled:e})=>e?"not-allowed":"pointer"};
+  border: 2px solid transparent;
 
   & svg {
     width: 20px;
     height: 20px;
-    color: ${({theme:{palette:{brand:e,grey:i}},selected:t,disabled:r})=>t?e.primary.main:r?i[30]:"inherit"};
+    color: ${({theme:{palette:{brand:e,grey:n}},selected:t,disabled:r})=>t?e.primary.main:r?n[30]:"inherit"};
   }
 
   ${({ellipsis:e})=>e?{maxHeight:"40px"}:{}};
 
-  ${({theme:{palette:{brand:e,grey:i}},selected:t,isHoverPossible:r})=>r?{"&:hover:not([disabled])":{backgroundColor:t?e.primary.bg:i[10]}}:{}}
-`,k=u.default.div`
+  ${({theme:{palette:{brand:e,grey:n}},selected:t,isHoverPossible:r})=>r?{"&:hover:not([disabled])":{backgroundColor:t?e.primary.bg:n[10]}}:{}}
+
+  &:focus {
+    outline: none;
+    border: 2px solid
+      ${({theme:{palette:{grey:e}}})=>e[100]};
+  }
+`,k=c.default.div`
   flex-grow: 1;
 
   ${({ellipsis:e})=>e?{overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}:{}};
 
-  ${({theme:{palette:{brand:e,grey:i},typography:{h5B:t,b4R:r}},selected:c,disabled:o})=>{let n={fontSize:r.size,fontWeight:r.weight,letterSpacing:r.letterSpacing,lineHeight:r.lineHeight};return c&&(n={fontSize:t.size,fontWeight:t.weight,letterSpacing:t.letterSpacing,lineHeight:t.lineHeight,color:e.primary.text}),o&&(n.color=i[30]),n}}}
-`,a=u.default.div`
+  ${({theme:{palette:{brand:e,grey:n},typography:{h5B:t,b4R:r}},selected:a,disabled:o})=>{let i={fontSize:r.size,fontWeight:r.weight,letterSpacing:r.letterSpacing,lineHeight:r.lineHeight};return a&&(i={fontSize:t.size,fontWeight:t.weight,letterSpacing:t.letterSpacing,lineHeight:t.lineHeight,color:e.primary.text}),o&&(i.color=n[30]),i}}}
+`,u=c.default.div`
   white-space: nowrap;
-`,H=w.forwardRef(function({children:i,startAdornment:t,endAdornment:r,inlineCSS:c,selected:o,disabled:n,value:h,onClick:s,ellipsis:p=!0,...d},g){const{isHoverPossible:x}=v.default(),m=f=>{f.stopPropagation(),!n&&typeof s=="function"&&s(f)};return l.jsxs($,{ref:g,selected:o,disabled:n,"data-value":h,isHoverPossible:x,onClick:m,ellipsis:p,...d,css:c,children:[t&&l.jsx(a,{children:t}),l.jsx(k,{selected:o,disabled:n,ellipsis:p,children:i}),!o&&r&&l.jsx(a,{children:r}),o&&l.jsx(a,{children:l.jsx(y.default,{name:"CheckLine",color:"primary"})})]})});exports.default=H;
+`,H=w.forwardRef(function({children:n,startAdornment:t,endAdornment:r,inlineCSS:a,selected:o,disabled:i,value:d,onClick:s,ellipsis:p=!0,...h},g){const{isHoverPossible:x}=v.default(),m=f=>{f.stopPropagation(),!i&&typeof s=="function"&&s(f)};return l.jsxs(j,{ref:g,selected:o,disabled:i,"data-value":d,isHoverPossible:x,onClick:m,ellipsis:p,role:"menuitem",...h,css:a,children:[t&&l.jsx(u,{children:t}),l.jsx(k,{selected:o,disabled:i,ellipsis:p,children:n}),!o&&r&&l.jsx(u,{children:r}),o&&l.jsx(u,{children:l.jsx(y.default,{name:"CheckLine",color:"primary"})})]})});exports.default=H;

package/Menu/MenuBlock/MenuBlock.d.ts

@@ -8,6 +8,7 @@ export interface MenuBlockProps extends GeneralComponentProps<HTMLAttributes<HTM
     disabled?: boolean;
     value?: string | number;
     ellipsis?: boolean;
+    focused?: boolean;
 }
 declare const MenuBlock: import('react').ForwardRefExoticComponent<MenuBlockProps & import('react').RefAttributes<HTMLLIElement>>;
 export default MenuBlock;

package/Menu/MenuBlock/MenuBlock.es.js

@@ -1,9 +1,9 @@
 import { jsxs as x, jsx as l } from "@emotion/react/jsx-runtime";
 import { forwardRef as w } from "react";
 import y from "../../Icon/Icon.es.js";
-import k from "../../hooks/useCheckHoverPossible/useCheckHoverPossible.es.js";
-import a from "@emotion/styled";
-const v = a.li`
+import $ from "../../hooks/useCheckHoverPossible/useCheckHoverPossible.es.js";
+import c from "@emotion/styled";
+const k = c.li`
   display: flex;
   align-items: center;
   gap: ${({ theme: { spacing: e } }) => e.content(2)}px;
@@ -14,17 +14,18 @@ const v = a.li`
   }
 }) => e.white};
   cursor: ${({ disabled: e }) => e ? "not-allowed" : "pointer"};
+  border: 2px solid transparent;
 
   & svg {
     width: 20px;
     height: 20px;
     color: ${({
   theme: {
-    palette: { brand: e, grey: i }
+    palette: { brand: e, grey: o }
   },
   selected: t,
   disabled: r
-}) => t ? e.primary.main : r ? i[30] : "inherit"};
+}) => t ? e.primary.main : r ? o[30] : "inherit"};
   }
 
   ${({ ellipsis: e }) => e ? {
@@ -33,16 +34,26 @@ const v = a.li`
 
   ${({
   theme: {
-    palette: { brand: e, grey: i }
+    palette: { brand: e, grey: o }
   },
   selected: t,
   isHoverPossible: r
 }) => r ? {
   "&:hover:not([disabled])": {
-    backgroundColor: t ? e.primary.bg : i[10]
+    backgroundColor: t ? e.primary.bg : o[10]
   }
 } : {}}
-`, $ = a.div`
+
+  &:focus {
+    outline: none;
+    border: 2px solid
+      ${({
+  theme: {
+    palette: { grey: e }
+  }
+}) => e[100]};
+  }
+`, v = c.div`
   flex-grow: 1;
 
   ${({ ellipsis: e }) => e ? {
@@ -53,64 +64,65 @@ const v = a.li`
 
   ${({
   theme: {
-    palette: { brand: e, grey: i },
+    palette: { brand: e, grey: o },
     typography: { h5B: t, b4R: r }
   },
-  selected: c,
+  selected: p,
   disabled: n
 }) => {
-  let o = {
+  let i = {
     fontSize: r.size,
     fontWeight: r.weight,
     letterSpacing: r.letterSpacing,
     lineHeight: r.lineHeight
   };
-  return c && (o = {
+  return p && (i = {
     fontSize: t.size,
     fontWeight: t.weight,
     letterSpacing: t.letterSpacing,
     lineHeight: t.lineHeight,
     color: e.primary.text
-  }), n && (o.color = i[30]), o;
+  }), n && (i.color = o[30]), i;
 }}}
-`, p = a.div`
+`, a = c.div`
   white-space: nowrap;
-`, P = w(function({
-  children: i,
+`, M = w(function({
+  children: o,
   startAdornment: t,
   endAdornment: r,
-  inlineCSS: c,
+  inlineCSS: p,
   selected: n,
-  disabled: o,
-  value: s,
+  disabled: i,
+  value: u,
   onClick: h,
   ellipsis: f = !0,
-  ...u
-}, m) {
-  const { isHoverPossible: d } = k();
+  ...m
+}, g) {
+  const { isHoverPossible: d } = $();
   return /* @__PURE__ */ x(
-    v,
+    k,
     {
-      ref: m,
+      ref: g,
       selected: n,
-      disabled: o,
-      "data-value": s,
+      disabled: i,
+      "data-value": u,
       isHoverPossible: d,
-      onClick: (g) => {
-        g.stopPropagation(), !o && typeof h == "function" && h(g);
+      onClick: (s) => {
+        s.stopPropagation(), !i && typeof h == "function" && h(s);
       },
       ellipsis: f,
-      ...u,
-      css: c,
+      role: "menuitem",
+      ...m,
+      css: p,
       children: [
-        t && /* @__PURE__ */ l(p, { children: t }),
-        /* @__PURE__ */ l($, { selected: n, disabled: o, ellipsis: f, children: i }),
-        !n && r && /* @__PURE__ */ l(p, { children: r }),
-        n && /* @__PURE__ */ l(p, { children: /* @__PURE__ */ l(y, { name: "CheckLine", color: "primary" }) })
+        t && /* @__PURE__ */ l(a, { children: t }),
+        /* @__PURE__ */ l(v, { selected: n, disabled: i, ellipsis: f, children: o }),
+        !n && r && /* @__PURE__ */ l(a, { children: r }),
+        n && /* @__PURE__ */ l(a, { children: /* @__PURE__ */ l(y, { name: "CheckLine", color: "primary" }) })
       ]
     }
   );
 });
 export {
-  P as default
+  M as default
 };

package/Menu/MenuButton/MenuButton.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const d=require("@emotion/react/jsx-runtime"),u=require("react"),l=require("../../Button/Button.cjs"),m=u.forwardRef(function({isMenuOpen:n,menuId:a,onClick:o,...i},s){const t=u.useRef(),c=()=>{t.current&&cancelAnimationFrame(t.current),t.current=requestAnimationFrame(()=>{t.current=requestAnimationFrame(()=>{const e=document.getElementById(a);if(e){const r=e.querySelector('[role="menuitem"]');r==null||r.setAttribute("tabindex","0"),r==null||r.focus()}t.current=void 0})})},f=e=>{if(e.stopPropagation(),e.key==="ArrowDown"&&!n){o(e),c();return}if((e.key==="Enter"||e.key===" ")&&!n){o(e),c();return}};return u.useEffect(()=>()=>{t.current&&cancelAnimationFrame(t.current)},[]),d.jsx(l.default,{ref:s,type:"button","aria-haspopup":!0,"aria-expanded":n,"aria-controls":a,onKeyDown:f,onClick:o,...i})});exports.default=m;

package/Menu/MenuButton/MenuButton.d.ts

@@ -0,0 +1,10 @@
+import { SyntheticEvent } from 'react';
+import { ButtonProps } from '../Button/Button';
+
+export interface MenuButtonProps extends ButtonProps {
+    isMenuOpen: boolean;
+    menuId: string;
+    onClick: (e: SyntheticEvent) => void;
+}
+declare const MenuButton: import('react').ForwardRefExoticComponent<MenuButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
+export default MenuButton;

package/Menu/MenuButton/MenuButton.es.js

@@ -0,0 +1,44 @@
+import { jsx as m } from "@emotion/react/jsx-runtime";
+import { forwardRef as s, useRef as d, useEffect as p } from "react";
+import y from "../../Button/Button.es.js";
+const F = s(function({ isMenuOpen: n, menuId: a, onClick: o, ...c }, i) {
+  const t = d(), u = () => {
+    t.current && cancelAnimationFrame(t.current), t.current = requestAnimationFrame(() => {
+      t.current = requestAnimationFrame(() => {
+        const r = document.getElementById(a);
+        if (r) {
+          const e = r.querySelector('[role="menuitem"]');
+          e == null || e.setAttribute("tabindex", "0"), e == null || e.focus();
+        }
+        t.current = void 0;
+      });
+    });
+  }, f = (r) => {
+    if (r.stopPropagation(), r.key === "ArrowDown" && !n) {
+      o(r), u();
+      return;
+    }
+    if ((r.key === "Enter" || r.key === " ") && !n) {
+      o(r), u();
+      return;
+    }
+  };
+  return p(() => () => {
+    t.current && cancelAnimationFrame(t.current);
+  }, []), /* @__PURE__ */ m(
+    y,
+    {
+      ref: i,
+      type: "button",
+      "aria-haspopup": !0,
+      "aria-expanded": n,
+      "aria-controls": a,
+      onKeyDown: f,
+      onClick: o,
+      ...c
+    }
+  );
+});
+export {
+  F as default
+};

package/Menu/MenuButton/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./MenuButton.cjs");exports.default=e.default;

package/Menu/MenuButton/index.d.ts

@@ -0,0 +1,3 @@
+import { default as MenuButton } from './MenuButton';
+
+export default MenuButton;

package/Menu/MenuButton/index.es.js

@@ -0,0 +1,4 @@
+import o from "./MenuButton.es.js";
+export {
+  o as default
+};

package/Menu/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./Menu.cjs"),u=require("./MenuBlock/MenuBlock.cjs");exports.default=e.default;exports.MenuBlock=u.default;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./Menu.cjs"),u=require("./MenuBlock/MenuBlock.cjs"),t=require("./MenuButton/MenuButton.cjs");exports.default=e.default;exports.MenuBlock=u.default;exports.MenuButton=t.default;

package/Menu/index.d.ts

@@ -1,4 +1,5 @@
 import { default as Menu } from './Menu';
 
 export { default as MenuBlock } from './MenuBlock';
+export { default as MenuButton } from './MenuButton';
 export default Menu;

package/Menu/index.es.js

@@ -1,6 +1,8 @@
 import o from "./Menu.es.js";
-import { default as a } from "./MenuBlock/MenuBlock.es.js";
+import { default as u } from "./MenuBlock/MenuBlock.es.js";
+import { default as f } from "./MenuButton/MenuButton.es.js";
 export {
-  a as MenuBlock,
+  u as MenuBlock,
+  f as MenuButton,
   o as default
 };

package/NumberKeypad/NumberKeypad.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const y=require("@emotion/react/jsx-runtime"),l=require("react"),m=require("@emotion/styled"),_=e=>e&&e.__esModule?e:{default:e},b=_(m),x=b.default.div`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const y=require("@emotion/react/jsx-runtime"),n=require("react"),b=require("@emotion/styled"),m=e=>e&&e.__esModule?e:{default:e},_=m(b),g=_.default.div`
   display: flex;
   align-content: center;
   justify-content: space-between;
@@ -6,4 +6,4 @@
   gap: ${({theme:{spacing:e}})=>e.content(3)}px;
 
   ${({maxWidth:e})=>({maxWidth:e})}
-`,g=l.forwardRef(function({children:s,maxWidth:u,size:o="small",onChange:a,disabled:i,inlineCSS:c,...d},p){const f=(t,r)=>n=>{n.stopPropagation(),typeof a=="function"&&a(t,r)};return y.jsx(x,{ref:p,maxWidth:u||(o==="large"?264:228),...d,css:c,children:l.Children.map(s,t=>{var r,n;return l.isValidElement(t)?l.cloneElement(t,{disabled:i,size:o,onClick:f((r=t.props)==null?void 0:r.value,(n=t.props)==null?void 0:n.children),...t.props}):null})})});exports.default=g;
+`,x=n.forwardRef(function({children:u,maxWidth:s,size:o="small",onChange:a,disabled:i,inlineCSS:c,...d},p){const f=(t,r)=>l=>{l.stopPropagation(),typeof a=="function"&&a(t,r)};return y.jsx(g,{ref:p,maxWidth:s||(o==="large"?264:228),role:"group","aria-label":"가상 숫자 키패드",...d,css:c,children:n.Children.map(u,t=>{var r,l;return n.isValidElement(t)?n.cloneElement(t,{disabled:i,size:o,onClick:f((r=t.props)==null?void 0:r.value,(l=t.props)==null?void 0:l.children),...t.props}):null})})});exports.default=x;

package/NumberKeypad/NumberKeypad.es.js

@@ -1,31 +1,33 @@
 import { jsx as u } from "@emotion/react/jsx-runtime";
-import { forwardRef as m, Children as y, isValidElement as x, cloneElement as h } from "react";
-import b from "@emotion/styled";
-const w = b.div`
+import { forwardRef as m, Children as y, isValidElement as x, cloneElement as b } from "react";
+import h from "@emotion/styled";
+const g = h.div`
   display: flex;
   align-content: center;
   justify-content: space-between;
   flex-wrap: wrap;
-  gap: ${({ theme: { spacing: t } }) => t.content(3)}px;
+  gap: ${({ theme: { spacing: e } }) => e.content(3)}px;
 
-  ${({ maxWidth: t }) => ({ maxWidth: t })}
-`, j = m(function({ children: a, maxWidth: i, size: n = "small", onChange: p, disabled: l, inlineCSS: c, ...s }, d) {
-  const f = (r, e) => (o) => {
-    o.stopPropagation(), typeof p == "function" && p(r, e);
+  ${({ maxWidth: e }) => ({ maxWidth: e })}
+`, j = m(function({ children: n, maxWidth: l, size: p = "small", onChange: a, disabled: i, inlineCSS: c, ...s }, d) {
+  const f = (r, t) => (o) => {
+    o.stopPropagation(), typeof a == "function" && a(r, t);
   };
   return /* @__PURE__ */ u(
-    w,
+    g,
     {
       ref: d,
-      maxWidth: i || (n === "large" ? 264 : 228),
+      maxWidth: l || (p === "large" ? 264 : 228),
+      role: "group",
+      "aria-label": "가상 숫자 키패드",
       ...s,
       css: c,
-      children: y.map(a, (r) => {
-        var e, o;
-        return x(r) ? h(r, {
-          disabled: l,
-          size: n,
-          onClick: f((e = r.props) == null ? void 0 : e.value, (o = r.props) == null ? void 0 : o.children),
+      children: y.map(n, (r) => {
+        var t, o;
+        return x(r) ? b(r, {
+          disabled: i,
+          size: p,
+          onClick: f((t = r.props) == null ? void 0 : t.value, (o = r.props) == null ? void 0 : o.children),
           ...r.props
         }) : null;
       })