@dotss/ui 0.0.11 → 1.0.0

package/Menu/Menu.es.js

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

package/Menu/MenuBlock/MenuBlock.cjs

@@ -1,4 +1,4 @@
-"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`
+"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`
   display: flex;
   align-items: center;
   gap: ${({theme:{spacing:e}})=>e.content(2)}px;
@@ -15,19 +15,13 @@
 
   ${({ellipsis:e})=>e?{maxHeight:"40px"}:{}};
 
-  ${({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`
+  ${({theme:{palette:{brand:e,grey:n}},selected:t,isHoverPossible:r})=>r?{"&:hover:not([disabled]), &:focus:not([disabled])":{backgroundColor:t?e.primary.bg:n[10]}}:{}}
+`,k=u.default.div`
   flex-grow: 1;
 
   ${({ellipsis:e})=>e?{overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}:{}};
 
   ${({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`
+`,c=u.default.div`
   white-space: nowrap;
-`,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;
+`,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($,{ref:g,selected:o,disabled:i,"data-value":d,isHoverPossible:x,onClick:m,ellipsis:p,role:"menuitem",...h,css:a,children:[t&&l.jsx(c,{children:t}),l.jsx(k,{selected:o,disabled:i,ellipsis:p,children:n}),!o&&r&&l.jsx(c,{children:r}),o&&l.jsx(c,{children:l.jsx(y.default,{name:"CheckLine",color:"primary"})})]})});exports.default=H;

package/Menu/MenuBlock/MenuBlock.d.ts

@@ -1,5 +1,5 @@
 import { HTMLAttributes, ReactNode } from 'react';
-import { GeneralComponentProps } from '../../typings/component';
+import { GeneralComponentProps } from '../../../typings/component';
 
 export interface MenuBlockProps extends GeneralComponentProps<HTMLAttributes<HTMLLIElement>> {
     startAdornment?: ReactNode;

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 $ from "../../hooks/useCheckHoverPossible/useCheckHoverPossible.es.js";
+import k from "../../hooks/useCheckHoverPossible/useCheckHoverPossible.es.js";
 import c from "@emotion/styled";
-const k = c.li`
+const v = c.li`
   display: flex;
   align-items: center;
   gap: ${({ theme: { spacing: e } }) => e.content(2)}px;
@@ -21,11 +21,11 @@ const k = c.li`
     height: 20px;
     color: ${({
   theme: {
-    palette: { brand: e, grey: o }
+    palette: { brand: e, grey: i }
   },
   selected: t,
   disabled: r
-}) => t ? e.primary.main : r ? o[30] : "inherit"};
+}) => t ? e.primary.main : r ? i[30] : "inherit"};
   }
 
   ${({ ellipsis: e }) => e ? {
@@ -34,26 +34,16 @@ const k = c.li`
 
   ${({
   theme: {
-    palette: { brand: e, grey: o }
+    palette: { brand: e, grey: i }
   },
   selected: t,
   isHoverPossible: r
 }) => r ? {
-  "&:hover:not([disabled])": {
-    backgroundColor: t ? e.primary.bg : o[10]
+  "&:hover:not([disabled]), &:focus:not([disabled])": {
+    backgroundColor: t ? e.primary.bg : i[10]
   }
 } : {}}
-
-  &:focus {
-    outline: none;
-    border: 2px solid
-      ${({
-  theme: {
-    palette: { grey: e }
-  }
-}) => e[100]};
-  }
-`, v = c.div`
+`, $ = c.div`
   flex-grow: 1;
 
   ${({ ellipsis: e }) => e ? {
@@ -64,51 +54,51 @@ const k = c.li`
 
   ${({
   theme: {
-    palette: { brand: e, grey: o },
+    palette: { brand: e, grey: i },
     typography: { h5B: t, b4R: r }
   },
   selected: p,
   disabled: n
 }) => {
-  let i = {
+  let o = {
     fontSize: r.size,
     fontWeight: r.weight,
     letterSpacing: r.letterSpacing,
     lineHeight: r.lineHeight
   };
-  return p && (i = {
+  return p && (o = {
     fontSize: t.size,
     fontWeight: t.weight,
     letterSpacing: t.letterSpacing,
     lineHeight: t.lineHeight,
     color: e.primary.text
-  }), n && (i.color = o[30]), i;
+  }), n && (o.color = i[30]), o;
 }}}
 `, a = c.div`
   white-space: nowrap;
 `, M = w(function({
-  children: o,
+  children: i,
   startAdornment: t,
   endAdornment: r,
   inlineCSS: p,
   selected: n,
-  disabled: i,
+  disabled: o,
   value: u,
   onClick: h,
   ellipsis: f = !0,
   ...m
 }, g) {
-  const { isHoverPossible: d } = $();
+  const { isHoverPossible: d } = k();
   return /* @__PURE__ */ x(
-    k,
+    v,
     {
       ref: g,
       selected: n,
-      disabled: i,
+      disabled: o,
       "data-value": u,
       isHoverPossible: d,
       onClick: (s) => {
-        s.stopPropagation(), !i && typeof h == "function" && h(s);
+        s.stopPropagation(), !o && typeof h == "function" && h(s);
       },
       ellipsis: f,
       role: "menuitem",
@@ -116,7 +106,7 @@ const k = c.li`
       css: p,
       children: [
         t && /* @__PURE__ */ l(a, { children: t }),
-        /* @__PURE__ */ l(v, { selected: n, disabled: i, ellipsis: f, children: o }),
+        /* @__PURE__ */ l($, { selected: n, disabled: o, ellipsis: f, children: i }),
         !n && r && /* @__PURE__ */ l(a, { children: r }),
         n && /* @__PURE__ */ l(a, { children: /* @__PURE__ */ l(y, { name: "CheckLine", color: "primary" }) })
       ]

package/Menu/MenuButton/MenuButton.cjs

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

package/Menu/MenuButton/MenuButton.d.ts

@@ -1,5 +1,5 @@
 import { SyntheticEvent } from 'react';
-import { ButtonProps } from '../Button/Button';
+import { ButtonProps } from '../../Button/Button';
 
 export interface MenuButtonProps extends ButtonProps {
     isMenuOpen: boolean;

package/Menu/MenuButton/MenuButton.es.js

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

package/NumberKeypad/NumberKeypad.d.ts

@@ -1,6 +1,6 @@
 import { HTMLAttributes, ReactElement, ReactNode } from 'react';
-import { GeneralComponentProps, Size } from '../typings/component';
-import { CSSValue } from '../typings/utility';
+import { GeneralComponentProps, Size } from '../../typings/component';
+import { CSSValue } from '../../typings/utility';
 import { default as NumberKeypadBlock } from './NumberKeypadBlock';
 
 export interface NumberKeypadProps extends GeneralComponentProps<Omit<HTMLAttributes<HTMLDivElement>, 'onChange'>> {

package/NumberKeypad/NumberKeypadBlock/NumberKeypadBlock.d.ts

@@ -1,5 +1,5 @@
 import { HTMLAttributes } from 'react';
-import { GeneralComponentProps } from '../../typings/component';
+import { GeneralComponentProps } from '../../../typings/component';
 import { NumberKeypadProps } from '../NumberKeypad';
 
 export interface NumberKeypadBlockProps extends GeneralComponentProps<HTMLAttributes<HTMLDivElement> & Pick<NumberKeypadProps, 'size' | 'disabled'>> {

package/PageControl/PageControl.d.ts

@@ -1,6 +1,6 @@
 import { HTMLAttributes } from 'react';
-import { BrandColorKey } from '../typings/color';
-import { GeneralComponentProps } from '../typings/component';
+import { BrandColorKey } from '../../typings/color';
+import { GeneralComponentProps } from '../../typings/component';
 
 export interface PageControlProps extends GeneralComponentProps<Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'onClick'>> {
     totalCount?: number;

package/Radio/Radio.d.ts

@@ -1,6 +1,6 @@
 import { InputHTMLAttributes } from 'react';
-import { BrandColorKey } from '../typings/color';
-import { GeneralComponentProps, Size } from '../typings/component';
+import { BrandColorKey } from '../../typings/color';
+import { GeneralComponentProps, Size } from '../../typings/component';
 
 export interface RadioProps extends GeneralComponentProps<Omit<InputHTMLAttributes<HTMLInputElement>, 'size'>> {
     size?: Extract<Size, 'medium' | '2xLarge'>;

package/RadioGroup/RadioGroup.d.ts

@@ -1,5 +1,5 @@
 import { HTMLAttributes } from 'react';
-import { GeneralComponentProps } from '../typings/component';
+import { GeneralComponentProps } from '../../typings/component';
 
 export interface RadioGroupProps extends GeneralComponentProps<HTMLAttributes<HTMLDivElement>> {
     name?: string;

package/SegmentedButton/SegmentedButton.d.ts

@@ -1,6 +1,6 @@
 import { HTMLAttributes, ReactElement } from 'react';
-import { BrandColorKey } from '../typings/color';
-import { GeneralComponentProps, Variant } from '../typings/component';
+import { BrandColorKey } from '../../typings/color';
+import { GeneralComponentProps, Variant } from '../../typings/component';
 import { default as SegmentedButtonBlock } from './SegmentedButtonBlock';
 
 export interface SegmentedButtonProps extends GeneralComponentProps<Omit<HTMLAttributes<HTMLDivElement>, 'onChange'>> {

package/SegmentedButton/SegmentedButtonBlock/SegmentedButtonBlock.d.ts

@@ -1,5 +1,5 @@
 import { ButtonHTMLAttributes, ReactNode } from 'react';
-import { GeneralComponentProps } from '../../typings/component';
+import { GeneralComponentProps } from '../../../typings/component';
 import { SegmentedButtonProps } from '../SegmentedButton';
 
 export interface SegmentedButtonBlockProps extends GeneralComponentProps<ButtonHTMLAttributes<HTMLButtonElement> & Pick<SegmentedButtonProps, 'variant' | 'color' | 'rounded'>> {

package/Select/Option/Option.d.ts

@@ -1,5 +1,5 @@
 import { HTMLAttributes, ReactNode } from 'react';
-import { GeneralComponentProps } from '../../typings/component';
+import { GeneralComponentProps } from '../../../typings/component';
 
 export interface OptionProps extends GeneralComponentProps<HTMLAttributes<HTMLLIElement>> {
     value?: string;

package/Select/Select.d.ts

@@ -1,6 +1,6 @@
 import { HTMLAttributes, ReactElement, ReactNode } from 'react';
 import { default as Option } from './Option';
-import { GeneralComponentProps, Size, Variant } from '../typings/component';
+import { GeneralComponentProps, Size, Variant } from '../../typings/component';
 
 export interface SelectProps extends GeneralComponentProps<Omit<HTMLAttributes<HTMLDivElement>, 'onChange'>> {
     value: string;

package/Skeleton/Skeleton.d.ts

@@ -1,7 +1,7 @@
 import { HTMLAttributes } from 'react';
-import { GeneralComponentProps } from '../typings/component';
-import { TypographyBodyKey, TypographyCaptionKey, TypographyHeadlineKey } from '../typings/typography';
-import { CSSValue } from '../typings/utility';
+import { GeneralComponentProps } from '../../typings/component';
+import { TypographyBodyKey, TypographyCaptionKey, TypographyHeadlineKey } from '../../typings/typography';
+import { CSSValue } from '../../typings/utility';
 
 export interface SkeletonProps extends GeneralComponentProps<HTMLAttributes<HTMLDivElement>> {
     ratio?: `${number}:${number}`;

package/Slider/Slider.d.ts

@@ -1,5 +1,5 @@
 import { HTMLAttributes } from 'react';
-import { GeneralComponentProps } from '../typings/component';
+import { GeneralComponentProps } from '../../typings/component';
 
 export interface SliderProps extends GeneralComponentProps<Omit<HTMLAttributes<HTMLDivElement>, 'onChange'>> {
     value: number;