@dotss/ui 0.0.12 → 1.0.0

package/DatePicker/EventDot/EventDot.d.ts

@@ -1,5 +1,5 @@
 import { HTMLAttributes } from 'react';
-import { Color, GeneralComponentProps } from '../../typings/component';
+import { Color, GeneralComponentProps } from '../../../typings/component';
 
 export interface EventDotProps extends GeneralComponentProps<Omit<HTMLAttributes<HTMLSpanElement>, 'color'>> {
     color: Color;

package/DatePicker/EventDotGroup/EventDotGroup.cjs

@@ -1,8 +1,8 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("@emotion/react/jsx-runtime"),i=require("react"),a=require("@emotion/styled"),d=require("../EventDot/EventDot.cjs"),f=e=>e&&e.__esModule?e:{default:e},u=f(a),h=u.default.div`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("@emotion/react/jsx-runtime"),i=require("react"),c=require("@emotion/styled"),d=require("../EventDot/EventDot.cjs"),f=e=>e&&e.__esModule?e:{default:e},u=f(c),h=u.default.div`
   display: flex;
   align-items: center;
   gap: ${({theme:{spacing:e}})=>e.content(.5)}px;
   max-height: 6px;
 `,p=u.default.span`
-  ${({theme:{palette:{grey:e},typography:t}})=>{const{size:o,weight:n,lineHeight:r,letterSpacing:s}=t.c5R;return{fontSize:o,fontWeight:n,lineHeight:r,letterSpacing:s,color:e[50]}}};
-`;function g({children:e,limit:t=4,...o}){const n=i.Children.toArray(e).filter(i.isValidElement).filter(c=>c.type===d.default),r=n.length,s=r>t;return l.jsxs(h,{...o,children:[i.Children.toArray(n).slice(0,t),s&&l.jsxs(p,{children:["+",r-t]})]})}exports.default=g;
+  ${({theme:{palette:{grey:e},typography:t}})=>{const{size:l,weight:r,lineHeight:n,letterSpacing:o}=t.c5R;return{fontSize:l,fontWeight:r,lineHeight:n,letterSpacing:o,color:e[50]}}};
+`;function g({children:e,limit:t=4,...l}){const r=i.Children.toArray(e).filter(i.isValidElement).filter(a=>a.type===d.default),n=r.length,o=n>t;return s.jsxs(h,{"aria-label":`${n}건의 이벤트`,...l,children:[i.Children.toArray(r).slice(0,t),o&&s.jsxs(p,{children:["+",n-t]})]})}exports.default=g;

package/DatePicker/EventDotGroup/EventDotGroup.d.ts

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

package/DatePicker/EventDotGroup/EventDotGroup.es.js

@@ -1,36 +1,36 @@
-import { jsxs as s } from "@emotion/react/jsx-runtime";
-import { Children as l, isValidElement as a } from "react";
-import c from "@emotion/styled";
+import { jsxs as l } from "@emotion/react/jsx-runtime";
+import { Children as s, isValidElement as p } from "react";
+import a from "@emotion/styled";
 import m from "../EventDot/EventDot.es.js";
-const f = c.div`
+const f = a.div`
   display: flex;
   align-items: center;
   gap: ${({ theme: { spacing: t } }) => t.content(0.5)}px;
   max-height: 6px;
-`, h = c.span`
+`, h = a.span`
   ${({
   theme: {
     palette: { grey: t },
     typography: e
   }
 }) => {
-  const { size: r, weight: n, lineHeight: o, letterSpacing: i } = e.c5R;
+  const { size: o, weight: n, lineHeight: r, letterSpacing: i } = e.c5R;
   return {
-    fontSize: r,
+    fontSize: o,
     fontWeight: n,
-    lineHeight: o,
+    lineHeight: r,
     letterSpacing: i,
     color: t[50]
   };
 }};
 `;
-function y({ children: t, limit: e = 4, ...r }) {
-  const n = l.toArray(t).filter(a).filter((p) => p.type === m), o = n.length, i = o > e;
-  return /* @__PURE__ */ s(f, { ...r, children: [
-    l.toArray(n).slice(0, e),
-    i && /* @__PURE__ */ s(h, { children: [
+function y({ children: t, limit: e = 4, ...o }) {
+  const n = s.toArray(t).filter(p).filter((c) => c.type === m), r = n.length, i = r > e;
+  return /* @__PURE__ */ l(f, { "aria-label": `${r}건의 이벤트`, ...o, children: [
+    s.toArray(n).slice(0, e),
+    i && /* @__PURE__ */ l(h, { children: [
       "+",
-      o - e
+      r - e
     ] })
   ] });
 }

package/Dialog/Dialog.d.ts

@@ -1,6 +1,6 @@
 import { HTMLAttributes } from 'react';
 import { BackdropProps } from '../Backdrop/Backdrop';
-import { GeneralComponentProps } from '../typings/component';
+import { GeneralComponentProps } from '../../typings/component';
 
 export interface DialogProps extends GeneralComponentProps<HTMLAttributes<HTMLDivElement>> {
     open?: boolean;

package/Dialog/DialogText/DialogText.d.ts

@@ -1,6 +1,6 @@
 import { HTMLAttributes } from 'react';
 import { Property } from 'csstype';
-import { GeneralComponentProps } from '../../typings/component';
+import { GeneralComponentProps } from '../../../typings/component';
 
 export interface DialogTextProps extends GeneralComponentProps<HTMLAttributes<HTMLDivElement>> {
     type?: 'main' | 'sub';

package/Dialog/DialogTitle/DialogTitle.d.ts

@@ -1,5 +1,5 @@
 import { ElementType, HTMLAttributes } from 'react';
-import { GeneralComponentProps } from '../../typings/component';
+import { GeneralComponentProps } from '../../../typings/component';
 
 export interface DialogTitleProps extends GeneralComponentProps<HTMLAttributes<HTMLDivElement>> {
     onClose?: () => void;

package/Flexbox/Flexbox.d.ts

@@ -1,6 +1,6 @@
 import { ElementType, ReactNode } from 'react';
 import { Property } from 'csstype';
-import { PolymorphicComponentProps, Spacing } from '../typings/component';
+import { PolymorphicComponentProps, Spacing } from '../../typings/component';
 
 export type FlexboxProps<T extends ElementType = 'div'> = Spacing & PolymorphicComponentProps<T> & {
     alignItems?: Property.AlignItems;

package/FocusBoundary/FocusBoundary.d.ts

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

package/FormControlText/FormControlText.cjs

@@ -3,7 +3,7 @@
   align-items: center;
   justify-content: center;
   gap: ${({theme:{spacing:e}})=>e.content(2)}px;
-  cursor: ${({disabled:e})=>e?"not-allowed":"pointer"};
+  cursor: ${({disabled:e})=>e?"not-allowed":"unset"};
   flex-direction: ${({placement:e})=>e==="left"?"row-reverse":"row"};
 `,v=d.default.div`
   display: inline-flex;
@@ -11,4 +11,4 @@
   cursor: pointer;
 
   ${({theme:{palette:{grey:e},typography:{h0R:n,b2R:o}},size:u,disabled:c})=>{let i={fontSize:o.size,fontWeight:o.weight,lineHeight:o.lineHeight,letterSpacing:o.letterSpacing};return u==="2xLarge"&&(i={fontSize:n.size,fontWeight:n.weight,lineHeight:n.lineHeight,letterSpacing:n.letterSpacing}),c&&(i.color=e[30],i.cursor="not-allowed"),i}}
-`,F=l.forwardRef(function({control:n,text:o,placement:u,size:c,onClick:i,disabled:a,inlineCSS:h,controlWrapperProps:p,textProps:x,...s},y){const C=l.useRef(null),m=l.useId(),g=(s==null?void 0:s.id)||m,S=t=>r=>{r.stopPropagation(),typeof t=="function"&&t(r)};return f.jsxs(_,{ref:y,placement:u,disabled:a,...s,css:h,children:[f.jsx(v,{ref:C,...p,children:l.Children.map(n,t=>{var r;return l.isValidElement(t)?l.cloneElement(t,{size:c,disabled:a,onClick:S((r=t.props)==null?void 0:r.onClick),id:g,...t.props}):null})}),f.jsx(T,{size:c,disabled:a,htmlFor:g,...x,children:o})]})});exports.default=F;
+`,F=l.forwardRef(function({control:n,text:o,placement:u,size:c,onClick:i,disabled:a,inlineCSS:h,controlWrapperProps:x,textProps:p,...s},y){const C=l.useRef(null),m=l.useId(),g=(s==null?void 0:s.id)||m,S=t=>r=>{r.stopPropagation(),typeof t=="function"&&t(r)};return f.jsxs(_,{ref:y,placement:u,disabled:a,...s,css:h,children:[f.jsx(v,{ref:C,...x,children:l.Children.map(n,t=>{var r;return l.isValidElement(t)?l.cloneElement(t,{size:c,disabled:a,onClick:S((r=t.props)==null?void 0:r.onClick),id:g,...t.props}):null})}),f.jsx(T,{size:c,disabled:a,htmlFor:g,...p,children:o})]})});exports.default=F;

package/FormControlText/FormControlText.d.ts

@@ -1,7 +1,7 @@
 import { HTMLAttributes, ReactElement, ReactNode } from 'react';
 import { default as Checkbox } from '../Checkbox';
 import { default as Radio } from '../Radio';
-import { GeneralComponentProps, Size } from '../typings/component';
+import { GeneralComponentProps, Size } from '../../typings/component';
 
 export interface FormControlTextProps extends GeneralComponentProps<HTMLAttributes<HTMLDivElement>> {
     control: ReactElement<typeof Checkbox | typeof Radio>;

package/FormControlText/FormControlText.es.js

@@ -6,7 +6,7 @@ const k = a.div`
   align-items: center;
   justify-content: center;
   gap: ${({ theme: { spacing: t } }) => t.content(2)}px;
-  cursor: ${({ disabled: t }) => t ? "not-allowed" : "pointer"};
+  cursor: ${({ disabled: t }) => t ? "not-allowed" : "unset"};
   flex-direction: ${({ placement: t }) => t === "left" ? "row-reverse" : "row"};
 `, v = a.div`
   display: inline-flex;
@@ -16,34 +16,34 @@ const k = a.div`
   ${({
   theme: {
     palette: { grey: t },
-    typography: { h0R: o, b2R: n }
+    typography: { h0R: n, b2R: o }
   },
   size: f,
   disabled: l
 }) => {
   let i = {
-    fontSize: n.size,
-    fontWeight: n.weight,
-    lineHeight: n.lineHeight,
-    letterSpacing: n.letterSpacing
-  };
-  return f === "2xLarge" && (i = {
     fontSize: o.size,
     fontWeight: o.weight,
     lineHeight: o.lineHeight,
     letterSpacing: o.letterSpacing
+  };
+  return f === "2xLarge" && (i = {
+    fontSize: n.size,
+    fontWeight: n.weight,
+    lineHeight: n.lineHeight,
+    letterSpacing: n.letterSpacing
   }), l && (i.color = t[30], i.cursor = "not-allowed"), i;
 }}
 `, L = S(function({
-  control: o,
-  text: n,
+  control: n,
+  text: o,
   placement: f,
   size: l,
   onClick: i,
   disabled: s,
   inlineCSS: u,
-  controlWrapperProps: p,
-  textProps: h,
+  controlWrapperProps: h,
+  textProps: p,
   ...c
 }, m) {
   const x = j(null), C = F(), d = (c == null ? void 0 : c.id) || C, y = (e) => (r) => {
@@ -58,7 +58,7 @@ const k = a.div`
       ...c,
       css: u,
       children: [
-        /* @__PURE__ */ g(v, { ref: x, ...p, children: H.map(o, (e) => {
+        /* @__PURE__ */ g(v, { ref: x, ...h, children: H.map(n, (e) => {
           var r;
           return T(e) ? $(e, {
             size: l,
@@ -68,7 +68,7 @@ const k = a.div`
             ...e.props
           }) : null;
         }) }),
-        /* @__PURE__ */ g(z, { size: l, disabled: s, htmlFor: d, ...h, children: n })
+        /* @__PURE__ */ g(z, { size: l, disabled: s, htmlFor: d, ...p, children: o })
       ]
     }
   );

package/Icon/Icon.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const y=require("@emotion/react/jsx-runtime"),t=require("react"),S=require("../resources/tictoccroc/icons/index.ts-BmqvB_n6.cjs"),b=require("@emotion/styled"),h=require("../utils/getPaletteColor/getPaletteColor.cjs"),I=r=>r&&r.__esModule?r:{default:r},w=I(b),$=r=>w.default(r)`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const y=require("@emotion/react/jsx-runtime"),t=require("react"),S=require("../resources/tictoccroc/icons/index.ts-DI_CztBn.cjs"),b=require("@emotion/styled"),h=require("../utils/getPaletteColor/getPaletteColor.cjs"),I=r=>r&&r.__esModule?r:{default:r},w=I(b),$=r=>w.default(r)`
   ${({size:o,width:s,height:a})=>{let n={width:s,height:a};switch(o){case"large":n={width:32,height:32};break;case"medium":n={width:24,height:24};break;case"small":n={width:20,height:20};break;case"xSmall":n={width:16,height:16};break}return n}};
 
   color: ${({theme:o,color:s="grey.100"})=>h.default(s,{theme:o})};

package/Icon/Icon.d.ts

@@ -1,6 +1,6 @@
 import { SVGProps } from 'react';
-import { Color, GeneralComponentProps, IconName, Size } from '../typings/component';
-import { CSSValue } from '../typings/utility';
+import { Color, GeneralComponentProps, IconName, Size } from '../../typings/component';
+import { CSSValue } from '../../typings/utility';
 
 export interface IconProps extends GeneralComponentProps<Omit<SVGProps<SVGElement>, 'width' | 'height' | 'color'>> {
     name: IconName;

package/Icon/Icon.es.js

@@ -1,6 +1,6 @@
 import { jsx as w } from "@emotion/react/jsx-runtime";
 import { forwardRef as y, Children as f, isValidElement as i, cloneElement as s } from "react";
-import { S as $ } from "../resources/tictoccroc/icons/index.ts-CzTh-XsD.js";
+import { S as $ } from "../resources/tictoccroc/icons/index.ts-Dt89JG4Z.js";
 import b from "@emotion/styled";
 import x from "../utils/getPaletteColor/getPaletteColor.es.js";
 const g = (p) => b(p)`

package/IconButton/IconButton.d.ts

@@ -1,6 +1,6 @@
 import { ButtonHTMLAttributes } from 'react';
-import { BrandColorKey } from '../typings/color';
-import { GeneralComponentProps, IconName, Size, Variant } from '../typings/component';
+import { BrandColorKey } from '../../typings/color';
+import { GeneralComponentProps, IconName, Size, Variant } from '../../typings/component';
 
 export interface IconButtonProps extends GeneralComponentProps<ButtonHTMLAttributes<HTMLButtonElement>> {
     name: IconName;

package/Label/Label.d.ts

@@ -1,8 +1,8 @@
 import { ElementType, ReactNode } from 'react';
-import { SpecifyColorScaleKey } from '../typings/color';
-import { PolymorphicComponentProps, Size, Variant } from '../typings/component';
-import { EtcColorKey } from '../typings/theme/core';
-import { TictoccrocBrandColorKey, TictoccrocClassTypeColorKey } from '../typings/theme/tictoccroc';
+import { SpecifyColorScaleKey } from '../../typings/color';
+import { PolymorphicComponentProps, Size, Variant } from '../../typings/component';
+import { EtcColorKey } from '../../typings/theme/core';
+import { TictoccrocBrandColorKey, TictoccrocClassTypeColorKey } from '../../typings/theme/tictoccroc';
 
 export type LabelProps<T extends ElementType = 'span'> = PolymorphicComponentProps<T> & {
     variant?: Extract<Variant, 'solid' | 'ghost' | 'outlined'>;

package/LineProgressIndicator/LineProgressIndicator.d.ts

@@ -1,5 +1,5 @@
 import { HTMLAttributes } from 'react';
-import { GeneralComponentProps, Size } from '../typings/component';
+import { GeneralComponentProps, Size } from '../../typings/component';
 
 export interface LineProgressIndicatorProps extends GeneralComponentProps<HTMLAttributes<HTMLDivElement>> {
     size?: Extract<Size, 'large' | 'small'>;

package/Menu/Menu.cjs

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

package/Menu/Menu.d.ts

@@ -1,5 +1,5 @@
 import { HTMLAttributes, ReactElement, ReactNode, RefObject, SyntheticEvent } from 'react';
-import { GeneralComponentProps } from '../typings/component';
+import { GeneralComponentProps } from '../../typings/component';
 import { default as MenuBlock } from './MenuBlock';
 
 export interface MenuProps extends GeneralComponentProps<Omit<HTMLAttributes<HTMLDivElement>, 'onChange'>> {

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
 };