@dotss/ui 0.0.8 → 0.0.11

package/IconButton/IconButton.cjs

@@ -0,0 +1,30 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("@emotion/react/jsx-runtime"),v=require("react"),m=require("../Icon/Icon.cjs"),C=require("../hooks/useCheckHoverPossible/useCheckHoverPossible.cjs"),p=require("../utils/getIconLabel/getIconLabel.cjs"),w=require("@emotion/styled"),x=require("../utils/getContrastingTextColor/getContrastingTextColor.cjs"),j=r=>r&&r.__esModule?r:{default:r},u=j(w),q=u.default.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 100px;
+
+  ${({theme:{spacing:r},size:t})=>{let i={width:40,height:40,padding:r.content(1)};switch(t){case"2xLarge":i={width:80,height:80,padding:0};break;case"xLarge":i={width:56,height:56,padding:r.content(.5)};break;case"large":i={width:48,height:48,padding:r.content(1)};break;case"small":i={width:32,height:32,padding:r.content(1)};break;case"xSmall":i={width:24,height:24,padding:r.content(.5)};break}return i}};
+
+  ${({theme:{palette:{yellow:r,grey:t}},variant:i,color:a,isHoverPossible:e})=>{let d={'&:not([aria-disabled="true"]):active > div':{backgroundColor:t[10]},...e?{'&:not([aria-disabled="true"]):hover > div':{backgroundColor:t[10]}}:{}};switch(i){case"standard":a==="tertiary"&&(d={'&:not([aria-disabled="true"]):active > div':{backgroundColor:t[80]},...e?{'&:not([aria-disabled="true"]):hover > div':{backgroundColor:t[80]}}:{}});break;case"filled":a==="primary"&&(d={'&:not([aria-disabled="true"]):active > div':{backgroundColor:r[80]},...e?{'&:not([aria-disabled="true"]):hover > div':{backgroundColor:r[80]}}:{}}),a==="secondary"&&(d={'&:not([aria-disabled="true"]):active > div':{backgroundColor:t[100]},...e?{'&:not([aria-disabled="true"]):hover > div':{backgroundColor:t[100]}}:{}});break;case"outlined":a==="primary"&&(d={'&:not([aria-disabled="true"]):active > div':{backgroundColor:t[10]},...e?{'&:not([aria-disabled="true"]):hover > div':{backgroundColor:t[10]}}:{}}),a==="tertiary"&&(d={'&:not([aria-disabled="true"]):active > div':{backgroundColor:t[100]},...e?{'&:not([aria-disabled="true"]):hover > div':{backgroundColor:t[100]}}:{}});break}return d}};
+
+  &[aria-disabled='true'] {
+    cursor: not-allowed;
+
+    & > div {
+      ${({theme:{palette:{brand:r,grey:t}},variant:i,color:a})=>{let e={backgroundColor:"transparent","& svg":{color:t[30]}};switch(i){case"standard":a==="tertiary"&&(e={backgroundColor:"transparent","& svg":{color:t[80]}});break;case"filled":a==="primary"&&(e={backgroundColor:r.primary.disable,"& svg":{color:t[30]}}),a==="secondary"&&(e={backgroundColor:t[10],"& svg":{color:t[30]}});break;case"outlined":a==="secondary"&&(e={backgroundColor:t[10],borderColor:t[30],"& svg":{color:t[30]}}),a==="tertiary"&&(e={backgroundColor:t[80],borderColor:t[70],"& svg":{color:t[70]}});break}return e}};
+    }
+  }
+`,W=u.default.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  border: 1px solid transparent;
+  border-radius: 100px;
+
+  ${({theme:{palette:{brand:r,grey:t}},variant:i,color:a})=>{let e={backgroundColor:"transparent"};switch(i){case"standard":a==="tertiary"&&(e={backgroundColor:"transparent","& svg":{color:t.white}});break;case"filled":a==="primary"&&(e={backgroundColor:r.primary.main,color:x.default(r.primary.main,[t.white,t[100]]),"& svg":{color:"inherit"}}),a==="secondary"&&(e={backgroundColor:r.secondary,color:t.white,"& svg":{color:"inherit"}});break;case"outlined":a==="primary"&&(e={backgroundColor:t.white,borderColor:t[50]}),a==="tertiary"&&(e={backgroundColor:"transparent",borderColor:t[50],"& svg":{color:t[50]}});break}return e}};
+
+  ${({size:r})=>{let t={minWidth:32,minHeight:32,"& svg":{width:24,height:24}};switch(r){case"2xLarge":t={minWidth:80,minHeight:80,borderWidth:2,"& svg":{width:48,height:48}};break;case"xLarge":t={minWidth:52,minHeight:52,"& svg":{width:36,height:36}};break;case"large":t={minWidth:40,minHeight:40,"& svg":{width:32,height:32}};break;case"small":t={minWidth:24,minHeight:24,"& svg":{width:16,height:16}};break;case"xSmall":t={minWidth:20,minHeight:20,"& svg":{width:16,height:16}};break}return t}};
+`,_=v.forwardRef(function({name:t,variant:i="standard",size:a="medium",color:e="primary",inlineCSS:d,disabled:o=!1,onClick:n,onKeyDown:s,...h},b){const{isHoverPossible:g}=C.default(),k=c=>{o||n==null||n(c)},f=c=>{o||s==null||s(c)};return l.jsx(q,{ref:b,variant:i,size:a,color:e,"aria-disabled":o,"aria-label":p.default(t),isHoverPossible:g,onClick:k,onKeyDown:f,...h,css:d,children:l.jsx(W,{variant:i,size:a,color:e,children:l.jsx(m.default,{name:t,focusable:!1})})})});exports.default=_;

package/{dist/IconButton → IconButton}/IconButton.es.js

@@ -1,11 +1,11 @@
-import { jsx as d } from "@emotion/react/jsx-runtime";
-import { forwardRef as b } from "react";
-import u from "../Icon/Icon.es.js";
-import m from "../hooks/useCheckHoverPossible/useCheckHoverPossible.es.js";
-import g from "../utils/getIconLabel/getIconLabel.es.js";
-import c from "@emotion/styled";
-import k from "../utils/getContrastingTextColor/getContrastingTextColor.es.js";
-const v = c.button`
+import { jsx as l } from "@emotion/react/jsx-runtime";
+import { forwardRef as f } from "react";
+import v from "../Icon/Icon.es.js";
+import p from "../hooks/useCheckHoverPossible/useCheckHoverPossible.es.js";
+import C from "../utils/getIconLabel/getIconLabel.es.js";
+import h from "@emotion/styled";
+import w from "../utils/getContrastingTextColor/getContrastingTextColor.es.js";
+const x = h.button`
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -157,7 +157,7 @@ const v = c.button`
 }};
     }
   }
-`, f = c.div`
+`, j = h.div`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -188,7 +188,7 @@ const v = c.button`
     case "filled":
       a === "primary" && (t = {
         backgroundColor: e.primary.main,
-        color: k(e.primary.main, [r.white, r[100]]),
+        color: w(e.primary.main, [r.white, r[100]]),
         "& svg": {
           color: "inherit"
         }
@@ -280,33 +280,40 @@ const v = c.button`
   }
   return r;
 }};
-`, L = b(function({
+`, S = f(function({
   name: r,
   variant: i = "standard",
   size: a = "medium",
   color: t = "primary",
   inlineCSS: o,
-  disabled: n = !1,
-  ...s
-}, l) {
-  const { isHoverPossible: h } = m();
-  return /* @__PURE__ */ d(
-    v,
+  disabled: d = !1,
+  onClick: n,
+  onKeyDown: c,
+  ...b
+}, u) {
+  const { isHoverPossible: m } = p(), g = (s) => {
+    d || n == null || n(s);
+  }, k = (s) => {
+    d || c == null || c(s);
+  };
+  return /* @__PURE__ */ l(
+    x,
     {
-      ref: l,
+      ref: u,
       variant: i,
       size: a,
       color: t,
-      "aria-disabled": n,
-      "aria-label": g(r),
-      isHoverPossible: h,
-      disabled: n,
-      ...s,
+      "aria-disabled": d,
+      "aria-label": C(r),
+      isHoverPossible: m,
+      onClick: g,
+      onKeyDown: k,
+      ...b,
       css: o,
-      children: /* @__PURE__ */ d(f, { variant: i, size: a, color: t, children: /* @__PURE__ */ d(u, { name: r, focusable: !1 }) })
+      children: /* @__PURE__ */ l(j, { variant: i, size: a, color: t, children: /* @__PURE__ */ l(v, { name: r, focusable: !1 }) })
     }
   );
 });
 export {
-  L as default
+  S as default
 };

package/LineProgressIndicator/LineProgressIndicator.cjs

@@ -0,0 +1,35 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("@emotion/react/jsx-runtime"),f=require("react"),m=require("/Users/dong-yeon/Desktop/codes/dots/node_modules/.pnpm/@emotion+react@11.14.0_@types+react@18.3.3_react@18.3.1/node_modules/@emotion/react/dist/emotion-react.browser.esm.js"),g=require("@emotion/styled"),p=e=>e&&e.__esModule?e:{default:e},o=p(g),b=m.keyframes`
+    to {
+        transform: translateX(100%);
+    }
+`,h=o.default.div`
+  position: relative;
+  height: ${({size:e})=>e==="large"?42:4}px;
+  border-radius: 100px;
+  background-color: ${({theme:{palette:{grey:e}}})=>e[10]};
+  overflow: hidden;
+`,y=o.default.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  border-radius: 100px;
+  transition: transform ${({transitionDuration:e})=>e}ms linear;
+  background-color: ${({theme:{palette:{brand:e}}})=>e.primary.main};
+
+  ${({loop:e})=>e?{animation:`${b} 1s infinite`}:{}};
+`,_=o.default.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  white-space: nowrap;
+`,x=f.forwardRef(function({children:s,size:l,value:r=0,transitionDuration:d=500,loop:a,inlineCSS:c,...i},u){let t=r-100;return t=r>100?0:t,t=a?-80:t,n.jsxs(h,{role:"progressbar","aria-valuenow":a?void 0:r,"aria-label":i["aria-label"]?i["aria-label"]:"로딩 중",ref:u,size:l,...i,css:c,children:[n.jsx(y,{transitionDuration:d,loop:a,style:{transform:`translate3d(${t}%, 0, 0)`}}),l==="large"&&s&&n.jsx(_,{children:s})]})});exports.default=x;

package/LineProgressIndicator/LineProgressIndicator.es.js

@@ -0,0 +1,81 @@
+import { jsxs as m, jsx as l } from "@emotion/react/jsx-runtime";
+import { forwardRef as p } from "react";
+import { keyframes as g } from "/Users/dong-yeon/Desktop/codes/dots/node_modules/.pnpm/@emotion+react@11.14.0_@types+react@18.3.3_react@18.3.1/node_modules/@emotion/react/dist/emotion-react.browser.esm.js";
+import a from "@emotion/styled";
+const h = g`
+    to {
+        transform: translateX(100%);
+    }
+`, b = a.div`
+  position: relative;
+  height: ${({ size: t }) => t === "large" ? 42 : 4}px;
+  border-radius: 100px;
+  background-color: ${({
+  theme: {
+    palette: { grey: t }
+  }
+}) => t[10]};
+  overflow: hidden;
+`, u = a.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  border-radius: 100px;
+  transition: transform ${({ transitionDuration: t }) => t}ms linear;
+  background-color: ${({
+  theme: {
+    palette: { brand: t }
+  }
+}) => t.primary.main};
+
+  ${({ loop: t }) => t ? {
+  animation: `${h} 1s infinite`
+} : {}};
+`, y = a.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  white-space: nowrap;
+`, j = p(
+  function({ children: n, size: s, value: r = 0, transitionDuration: d = 500, loop: i, inlineCSS: c, ...o }, f) {
+    let e = r - 100;
+    return e = r > 100 ? 0 : e, e = i ? -80 : e, /* @__PURE__ */ m(
+      b,
+      {
+        role: "progressbar",
+        "aria-valuenow": i ? void 0 : r,
+        "aria-label": o["aria-label"] ? o["aria-label"] : "로딩 중",
+        ref: f,
+        size: s,
+        ...o,
+        css: c,
+        children: [
+          /* @__PURE__ */ l(
+            u,
+            {
+              transitionDuration: d,
+              loop: i,
+              style: {
+                transform: `translate3d(${e}%, 0, 0)`
+              }
+            }
+          ),
+          s === "large" && n && /* @__PURE__ */ l(y, { children: n })
+        ]
+      }
+    );
+  }
+);
+export {
+  j as default
+};

package/Menu/Menu.cjs

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

package/{dist/Menu → Menu}/Menu.d.ts

@@ -1,4 +1,4 @@
-import { HTMLAttributes, MouseEvent, ReactElement, ReactNode, RefObject } from 'react';
+import { HTMLAttributes, ReactElement, ReactNode, RefObject, SyntheticEvent } from 'react';
 import { GeneralComponentProps } from '../typings/component';
 import { default as MenuBlock } from './MenuBlock';
 
@@ -8,7 +8,7 @@ export interface MenuProps extends GeneralComponentProps<Omit<HTMLAttributes<HTM
     onClose?: () => void;
     spacing?: number;
     transitionDuration?: number;
-    onChange?: (newValue?: string | number, e?: MouseEvent) => void;
+    onChange?: (newValue?: string | number, e?: SyntheticEvent) => void;
     value?: string | number;
     showDivider?: boolean;
     placement?: 'bottom-left' | 'bottom-right' | 'bottom-center' | 'top-left' | 'top-right' | 'top-center';
@@ -18,6 +18,7 @@ export interface MenuProps extends GeneralComponentProps<Omit<HTMLAttributes<HTM
     width?: number;
     fitToAnchorWidth?: boolean;
     maxHeight?: number;
+    menuProps?: HTMLAttributes<HTMLUListElement>;
 }
 declare const Menu: import('react').ForwardRefExoticComponent<MenuProps & import('react').RefAttributes<HTMLDivElement>>;
 export default Menu;

package/Menu/Menu.es.js

@@ -0,0 +1,197 @@
+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;
+  width: 100%;
+  height: 100%;
+  z-index: 100003;
+
+    ${({ disableClickOutside: o }) => o ? null : {
+  pointerEvents: "none",
+  "& *": {
+    pointerEvents: "auto"
+  }
+}}}
+
+`, lt = I.div`
+  position: fixed;
+  max-width: calc(100% - ${({ theme: { spacing: o } }) => o.layout(4)}px);
+  border-radius: 10px;
+  overflow: hidden;
+  background-color: ${({
+  theme: {
+    palette: { grey: o }
+  }
+}) => o.white};
+  box-shadow: ${({ theme: { elevation: o } }) => o[4]};
+  transition:
+    transform ${({ transitionDuration: o }) => o}ms,
+    opacity ${({ transitionDuration: o = 0 }) => o / 2}ms;
+  transform: scale(${({ open: o }) => o ? 1 : 0.97});
+  opacity: ${({ open: o }) => o ? 1 : 0};
+  z-index: 100003;
+`, pt = I.ul`
+  display: flex;
+  flex-direction: column;
+  max-height: ${({ maxHeight: o }) => o}px;
+  overflow-y: auto;
+
+    ${({ theme: { spacing: o }, disablePadding: l }) => l ? null : {
+  padding: `${o.content(1)}px 0`
+}}}
+`, yt = I.div`
+  width: 100%;
+  height: 1px;
+  background-color: ${({
+  theme: {
+    palette: { grey: o }
+  }
+}) => o[20]};
+`, 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: P = "bottom-center",
+  disablePadding: K,
+  disableClickOutside: U = !0,
+  width: M,
+  fitToAnchorWidth: W = !0,
+  maxHeight: V = 476,
+  style: _,
+  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 b(() => {
+    w && (v.current && clearTimeout(v.current), document.body.style.overflow = "hidden", j(!1), m.current = setTimeout(() => {
+      N(!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(() => {
+    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()) || {
+        top: 0,
+        left: 0,
+        bottom: 0
+      }, { 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":
+          F(
+            E ? T : r.top - n - y
+          );
+          break;
+        default:
+          F(rt ? "auto" : r.top + s + y);
+          break;
+      }
+      switch (i) {
+        case "left":
+          L(r.left);
+          break;
+        case "right":
+          L(r.left - Math.abs(e - u));
+          break;
+        default:
+          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);
+    };
+  }, [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: X,
+        open: Z,
+        transitionDuration: S,
+        ...Q,
+        css: C,
+        style: {
+          ..._,
+          top: h,
+          left: D,
+          bottom: h === "auto" ? 24 : void 0,
+          width: W ? g : void 0
+        },
+        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 {
+  ht as default
+};

package/{dist/Menu → 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

@@ -0,0 +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"),$=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:n}},selected:t,disabled:r})=>t?e.primary.main:r?n[30]:"inherit"};
+  }
+
+  ${({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`
+  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`
+  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;

package/{dist/Menu → 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;