@dotss/ui 0.0.11 → 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.cjs

@@ -1,4 +1,4 @@
-"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`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("@emotion/react/jsx-runtime"),f=require("react"),g=require("@emotion/react"),m=require("@emotion/styled"),p=e=>e&&e.__esModule?e:{default:e},o=p(m),b=g.keyframes`
     to {
         transform: translateX(100%);
     }
@@ -22,7 +22,7 @@
   background-color: ${({theme:{palette:{brand:e}}})=>e.primary.main};
 
   ${({loop:e})=>e?{animation:`${b} 1s infinite`}:{}};
-`,_=o.default.div`
+`,x=o.default.div`
   position: absolute;
   top: 0;
   left: 0;
@@ -32,4 +32,4 @@
   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;
+`,j=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(x,{children:s})]})});exports.default=j;

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/LineProgressIndicator/LineProgressIndicator.es.js

@@ -1,6 +1,6 @@
 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 { keyframes as g } from "@emotion/react";
 import a from "@emotion/styled";
 const h = g`
     to {

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'>> {