@quen-ui/components 0.0.14 → 1.0.1

package/dist/Menu/MenuItem.cjs.js

@@ -0,0 +1,112 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const helpers = require("@quen-ui/helpers");
+const Text = require("../typography/Text/Text.cjs.js");
+const styles = require("./styles.cjs.js");
+const iconArrowBottom = require("../assets/icon-arrow-bottom.svg.cjs.js");
+const MenuItem = ({
+  item,
+  getItemLabel,
+  getItemClassName,
+  getItemDisabled,
+  getItemLeftContent,
+  getItemKey,
+  getItemOnClick,
+  getItemRightContent,
+  size,
+  direction,
+  activeKeys,
+  arrowIcon,
+  className,
+  level = 1
+}) => {
+  const refMenuItem = React.useRef(null);
+  const hasChildren = !!item.children?.length;
+  const [visible, setVisible] = React.useState(false);
+  const handleMouseEnter = () => {
+    setVisible(true);
+  };
+  const handleMouseLeave = () => {
+    setVisible(false);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      styles.MenuItemStyled,
+      {
+        ref: refMenuItem,
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        hover: !getItemDisabled(item) && (hasChildren && direction === "horizontal" || !hasChildren),
+        disabled: getItemDisabled(item),
+        className: helpers.cnMerge(getItemClassName(item), className),
+        active: activeKeys?.includes(getItemKey(item)),
+        onClick: getItemOnClick(item),
+        children: [
+          getItemLeftContent(item),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Text,
+            {
+              size,
+              className: helpers.cnMerge({ "quen-ui--menu__item_group": hasChildren && direction === "vertical" }, "quen-ui--menu__item_label"),
+              children: getItemLabel(item)
+            }
+          ),
+          getItemRightContent(item),
+          arrowIcon && /* @__PURE__ */ jsxRuntime.jsx(iconArrowBottom, { className: "quen-ui--menu__item_icon-arrow" })
+        ]
+      },
+      getItemKey(item)
+    ),
+    hasChildren && direction === "horizontal" && /* @__PURE__ */ jsxRuntime.jsx(
+      styles.SubMenuHorizontalStyled,
+      {
+        visible,
+        left: level === 1 ? (refMenuItem.current?.getBoundingClientRect().x ?? 0) - (refMenuItem.current?.parentElement?.getBoundingClientRect().x ?? 0) : refMenuItem.current?.getBoundingClientRect().width ?? 0,
+        top: level === 1 ? refMenuItem.current?.getBoundingClientRect().height ?? 0 : refMenuItem.current?.offsetTop ?? 0,
+        className: "quen-ui--menu__submenu",
+        onMouseEnter: () => setVisible(true),
+        onMouseLeave: () => setVisible(false),
+        children: item.children.map((child) => /* @__PURE__ */ jsxRuntime.jsx(
+          MenuItem,
+          {
+            className,
+            item: child,
+            size,
+            getItemKey,
+            getItemLabel,
+            getItemLeftContent,
+            getItemRightContent,
+            getItemDisabled,
+            activeKeys,
+            getItemClassName,
+            getItemOnClick,
+            direction,
+            arrowIcon: !!child.children,
+            level: level + 1
+          },
+          getItemKey(child)
+        ))
+      }
+    ),
+    hasChildren && direction === "vertical" && /* @__PURE__ */ jsxRuntime.jsx(styles.SubMenuVerticalStyled, { level, children: item.children.map((child) => /* @__PURE__ */ jsxRuntime.jsx(
+      MenuItem,
+      {
+        className,
+        item: child,
+        size,
+        getItemKey,
+        getItemLabel,
+        getItemLeftContent,
+        getItemRightContent,
+        getItemDisabled,
+        activeKeys,
+        getItemClassName,
+        getItemOnClick,
+        direction
+      },
+      getItemKey(child)
+    )) })
+  ] });
+};
+module.exports = MenuItem;

package/dist/Menu/MenuItem.d.ts

@@ -0,0 +1,3 @@
+import { IMenuItemProps } from './types';
+declare const MenuItem: <Item extends Record<string, any>>({ item, getItemLabel, getItemClassName, getItemDisabled, getItemLeftContent, getItemKey, getItemOnClick, getItemRightContent, size, direction, activeKeys, arrowIcon, className, level }: IMenuItemProps<Item>) => import("react/jsx-runtime").JSX.Element;
+export default MenuItem;

package/dist/Menu/MenuItem.es.js

@@ -0,0 +1,113 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { useRef, useState } from "react";
+import { cnMerge } from "@quen-ui/helpers";
+import Text from "../typography/Text/Text.es.js";
+import { MenuItemStyled, SubMenuHorizontalStyled, SubMenuVerticalStyled } from "./styles.es.js";
+import SvgIconArrowBottom from "../assets/icon-arrow-bottom.svg.es.js";
+const MenuItem = ({
+  item,
+  getItemLabel,
+  getItemClassName,
+  getItemDisabled,
+  getItemLeftContent,
+  getItemKey,
+  getItemOnClick,
+  getItemRightContent,
+  size,
+  direction,
+  activeKeys,
+  arrowIcon,
+  className,
+  level = 1
+}) => {
+  const refMenuItem = useRef(null);
+  const hasChildren = !!item.children?.length;
+  const [visible, setVisible] = useState(false);
+  const handleMouseEnter = () => {
+    setVisible(true);
+  };
+  const handleMouseLeave = () => {
+    setVisible(false);
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      MenuItemStyled,
+      {
+        ref: refMenuItem,
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        hover: !getItemDisabled(item) && (hasChildren && direction === "horizontal" || !hasChildren),
+        disabled: getItemDisabled(item),
+        className: cnMerge(getItemClassName(item), className),
+        active: activeKeys?.includes(getItemKey(item)),
+        onClick: getItemOnClick(item),
+        children: [
+          getItemLeftContent(item),
+          /* @__PURE__ */ jsx(
+            Text,
+            {
+              size,
+              className: cnMerge({ "quen-ui--menu__item_group": hasChildren && direction === "vertical" }, "quen-ui--menu__item_label"),
+              children: getItemLabel(item)
+            }
+          ),
+          getItemRightContent(item),
+          arrowIcon && /* @__PURE__ */ jsx(SvgIconArrowBottom, { className: "quen-ui--menu__item_icon-arrow" })
+        ]
+      },
+      getItemKey(item)
+    ),
+    hasChildren && direction === "horizontal" && /* @__PURE__ */ jsx(
+      SubMenuHorizontalStyled,
+      {
+        visible,
+        left: level === 1 ? (refMenuItem.current?.getBoundingClientRect().x ?? 0) - (refMenuItem.current?.parentElement?.getBoundingClientRect().x ?? 0) : refMenuItem.current?.getBoundingClientRect().width ?? 0,
+        top: level === 1 ? refMenuItem.current?.getBoundingClientRect().height ?? 0 : refMenuItem.current?.offsetTop ?? 0,
+        className: "quen-ui--menu__submenu",
+        onMouseEnter: () => setVisible(true),
+        onMouseLeave: () => setVisible(false),
+        children: item.children.map((child) => /* @__PURE__ */ jsx(
+          MenuItem,
+          {
+            className,
+            item: child,
+            size,
+            getItemKey,
+            getItemLabel,
+            getItemLeftContent,
+            getItemRightContent,
+            getItemDisabled,
+            activeKeys,
+            getItemClassName,
+            getItemOnClick,
+            direction,
+            arrowIcon: !!child.children,
+            level: level + 1
+          },
+          getItemKey(child)
+        ))
+      }
+    ),
+    hasChildren && direction === "vertical" && /* @__PURE__ */ jsx(SubMenuVerticalStyled, { level, children: item.children.map((child) => /* @__PURE__ */ jsx(
+      MenuItem,
+      {
+        className,
+        item: child,
+        size,
+        getItemKey,
+        getItemLabel,
+        getItemLeftContent,
+        getItemRightContent,
+        getItemDisabled,
+        activeKeys,
+        getItemClassName,
+        getItemOnClick,
+        direction
+      },
+      getItemKey(child)
+    )) })
+  ] });
+};
+export {
+  MenuItem as default
+};

package/dist/Menu/helpers.cjs.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const defaultGetItemKey = (item) => item.key;
+const defaultGetItemLabel = (item) => item.label;
+const defaultGetItemDisabled = (item) => item.disabled;
+const defaultGetItemLeftContent = (item) => item.leftContent;
+const defaultGetItemRightContent = (item) => item.rightContent;
+const defaultGetItemOnClick = (item) => item.onClick;
+const defaultGetItemClassName = (item) => item.className;
+const withDefaultGetters = (props) => ({
+  ...props,
+  getItemKey: props.getItemKey || defaultGetItemKey,
+  getItemLabel: props.getItemLabel || defaultGetItemLabel,
+  getItemDisabled: props.getItemDisabled || defaultGetItemDisabled,
+  getItemLeftContent: props.getItemLeftContent || defaultGetItemLeftContent,
+  getItemRightContent: props.getItemRightContent || defaultGetItemRightContent,
+  getItemOnClick: props.getItemOnClick || defaultGetItemOnClick,
+  getItemClassName: props.getItemClassName || defaultGetItemClassName
+});
+exports.withDefaultGetters = withDefaultGetters;

package/dist/Menu/helpers.d.ts

@@ -0,0 +1,17 @@
+import { IMenuDefaultItem, IMenuProps, TMenuPropGetItemIcon, TMenuPropGetItemClassName, TMenuPropGetItemLabel, TMenuPropGetItemKey, TMenuPropGetItemDisabled, TMenuPropGetItemOnClick, TMenuRecursiveItem } from './types';
+export declare const withDefaultGetters: <Item extends Record<string, any>>(props: IMenuProps<Item>) => {
+    getItemKey: TMenuPropGetItemKey<TMenuRecursiveItem<IMenuDefaultItem>> | TMenuPropGetItemKey<TMenuRecursiveItem<Item>>;
+    getItemLabel: TMenuPropGetItemLabel<TMenuRecursiveItem<IMenuDefaultItem>> | TMenuPropGetItemLabel<TMenuRecursiveItem<Item>>;
+    getItemDisabled: TMenuPropGetItemDisabled<TMenuRecursiveItem<IMenuDefaultItem>> | TMenuPropGetItemDisabled<TMenuRecursiveItem<Item>>;
+    getItemLeftContent: TMenuPropGetItemIcon<TMenuRecursiveItem<IMenuDefaultItem>> | TMenuPropGetItemIcon<TMenuRecursiveItem<Item>>;
+    getItemRightContent: TMenuPropGetItemIcon<TMenuRecursiveItem<IMenuDefaultItem>> | TMenuPropGetItemIcon<TMenuRecursiveItem<Item>>;
+    getItemOnClick: TMenuPropGetItemOnClick<TMenuRecursiveItem<IMenuDefaultItem>> | TMenuPropGetItemOnClick<TMenuRecursiveItem<Item>>;
+    getItemClassName: TMenuPropGetItemClassName<TMenuRecursiveItem<IMenuDefaultItem>> | TMenuPropGetItemClassName<TMenuRecursiveItem<Item>>;
+    items: TMenuRecursiveItem<Item>[];
+    direction?: "vertical" | "horizontal";
+    className?: string;
+    style?: React.CSSProperties;
+    size?: import('..').TQuenSize;
+    activeKeys?: string[];
+    classNameMenuItem?: string;
+};

package/dist/Menu/helpers.es.js

@@ -0,0 +1,20 @@
+const defaultGetItemKey = (item) => item.key;
+const defaultGetItemLabel = (item) => item.label;
+const defaultGetItemDisabled = (item) => item.disabled;
+const defaultGetItemLeftContent = (item) => item.leftContent;
+const defaultGetItemRightContent = (item) => item.rightContent;
+const defaultGetItemOnClick = (item) => item.onClick;
+const defaultGetItemClassName = (item) => item.className;
+const withDefaultGetters = (props) => ({
+  ...props,
+  getItemKey: props.getItemKey || defaultGetItemKey,
+  getItemLabel: props.getItemLabel || defaultGetItemLabel,
+  getItemDisabled: props.getItemDisabled || defaultGetItemDisabled,
+  getItemLeftContent: props.getItemLeftContent || defaultGetItemLeftContent,
+  getItemRightContent: props.getItemRightContent || defaultGetItemRightContent,
+  getItemOnClick: props.getItemOnClick || defaultGetItemOnClick,
+  getItemClassName: props.getItemClassName || defaultGetItemClassName
+});
+export {
+  withDefaultGetters
+};

package/dist/Menu/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Menu } from './Menu';
+export type { IMenuProps, TMenuPropGetItemIcon, IMenuDefaultItem, TMenuPropGetItemDisabled, TMenuPropGetItemKey, TMenuPropGetItemLabel, TMenuPropGetItemClassName, TMenuPropGetItemOnClick } from './types';

package/dist/Menu/styles.cjs.js

@@ -0,0 +1,98 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const styled = require("styled-components");
+const Flex = require("../Flex/Flex.cjs.js");
+const MenuItemStyled = styled.button.withConfig({
+  shouldForwardProp: (prop) => !["disabled", "active", "hover"].includes(prop)
+}).attrs((props) => ({
+  className: props.active ? "quen-ui__menu-item--active" : "quen-ui__menu-item"
+}))`
+  outline: none;
+  border: none;
+  display: flex;
+  gap: 4px;
+  align-items: center;
+  padding: 0.5rem 1rem;
+  cursor: ${({ disabled }) => disabled ? "not-allowed" : "pointer"};
+  border-radius: 4px;
+  transition: background 0.2s ease;
+  background: transparent;
+  justify-content: flex-start;
+
+  color: ${({ theme, disabled }) => disabled ? theme.components.Menu.disabledColor : theme.components.Menu.color};
+
+  * {
+    color: ${({ theme, disabled }) => disabled ? theme.components.Menu.disabledColor : theme.components.Menu.color};
+  }
+  
+  a {
+    text-decoration: none;
+    color: ${({ theme }) => theme.components.Menu.color};
+    display: flex;
+    width: 100%;
+  }
+  
+  .quen-ui--menu__item_group {
+    font-weight: bold;
+  }
+
+  .quen-ui--menu__item_icon-arrow {
+    transform: rotateZ(270deg);
+    margin-left: auto;
+    margin-right: 0;
+  }
+
+  .quen-ui--menu__item_label {
+    width: 100%;
+  }
+
+  &:hover {
+    background: ${({ theme, active, hover }) => hover && !active && theme.components.Menu.hoverBackground};
+  }
+
+  ${({ theme, disabled, active }) => active && !disabled && styled.css`
+      background-color: ${theme.components.Menu.activeBackground};
+    `}
+
+  &:hover > .quen-ui--submenu {
+    display: flex;
+  }
+`;
+const SubMenuHorizontalStyled = styled.div.withConfig({
+  shouldForwardProp: (prop) => !["left", "top", "visible"].includes(prop)
+})`
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  top: ${({ top }) => top}px;
+  left: ${({ left }) => left}px;
+  z-index: 1000;
+  width: max-content;
+
+  opacity: ${({ visible }) => visible ? 1 : 0};
+  transform: ${({ visible }) => visible ? "translateY(0)" : "translateY(-5px)"};
+  pointer-events: ${({ visible }) => visible ? "auto" : "none"};
+  transition: opacity 0.2s ease, transform 0.2s ease;
+`;
+const SubMenuVerticalStyled = styled.div.withConfig({
+  shouldForwardProp: (prop) => !["level"].includes(prop)
+})`
+  display: flex;
+  flex-direction: column;
+  z-index: 1000;
+  ${MenuItemStyled} {
+    padding-left: calc(16px + (${({ level }) => level} * 8px));
+  }
+
+  & .quen-ui--menu__submenu {
+    top: 0;
+    left: 100%;
+  }
+`;
+const MenuStyled = styled(Flex)`
+  position: relative;
+`;
+exports.MenuItemStyled = MenuItemStyled;
+exports.MenuStyled = MenuStyled;
+exports.SubMenuHorizontalStyled = SubMenuHorizontalStyled;
+exports.SubMenuVerticalStyled = SubMenuVerticalStyled;

package/dist/Menu/styles.d.ts

@@ -0,0 +1,16 @@
+export declare const MenuItemStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('styled-components/dist/types').Substitute<import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>>, {
+    active?: boolean;
+}>, {
+    disabled?: boolean;
+    active?: boolean;
+    hover?: boolean;
+}>> & string;
+export declare const SubMenuHorizontalStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    left: number;
+    top: number;
+    visible: boolean;
+}>> & string;
+export declare const SubMenuVerticalStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    level: number;
+}>> & string;
+export declare const MenuStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<Omit<import('..').IFlexProps, "ref"> & import('react').RefAttributes<unknown>, never>> & string & Omit<import('react').ForwardRefExoticComponent<Omit<import('..').IFlexProps, "ref"> & import('react').RefAttributes<unknown>>, keyof import('react').Component<any, {}, any>>;

package/dist/Menu/styles.es.js

@@ -0,0 +1,98 @@
+import styled, { css } from "styled-components";
+import Flex from "../Flex/Flex.es.js";
+const MenuItemStyled = styled.button.withConfig({
+  shouldForwardProp: (prop) => !["disabled", "active", "hover"].includes(prop)
+}).attrs((props) => ({
+  className: props.active ? "quen-ui__menu-item--active" : "quen-ui__menu-item"
+}))`
+  outline: none;
+  border: none;
+  display: flex;
+  gap: 4px;
+  align-items: center;
+  padding: 0.5rem 1rem;
+  cursor: ${({ disabled }) => disabled ? "not-allowed" : "pointer"};
+  border-radius: 4px;
+  transition: background 0.2s ease;
+  background: transparent;
+  justify-content: flex-start;
+
+  color: ${({ theme, disabled }) => disabled ? theme.components.Menu.disabledColor : theme.components.Menu.color};
+
+  * {
+    color: ${({ theme, disabled }) => disabled ? theme.components.Menu.disabledColor : theme.components.Menu.color};
+  }
+  
+  a {
+    text-decoration: none;
+    color: ${({ theme }) => theme.components.Menu.color};
+    display: flex;
+    width: 100%;
+  }
+  
+  .quen-ui--menu__item_group {
+    font-weight: bold;
+  }
+
+  .quen-ui--menu__item_icon-arrow {
+    transform: rotateZ(270deg);
+    margin-left: auto;
+    margin-right: 0;
+  }
+
+  .quen-ui--menu__item_label {
+    width: 100%;
+  }
+
+  &:hover {
+    background: ${({ theme, active, hover }) => hover && !active && theme.components.Menu.hoverBackground};
+  }
+
+  ${({ theme, disabled, active }) => active && !disabled && css`
+      background-color: ${theme.components.Menu.activeBackground};
+    `}
+
+  &:hover > .quen-ui--submenu {
+    display: flex;
+  }
+`;
+const SubMenuHorizontalStyled = styled.div.withConfig({
+  shouldForwardProp: (prop) => !["left", "top", "visible"].includes(prop)
+})`
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  top: ${({ top }) => top}px;
+  left: ${({ left }) => left}px;
+  z-index: 1000;
+  width: max-content;
+
+  opacity: ${({ visible }) => visible ? 1 : 0};
+  transform: ${({ visible }) => visible ? "translateY(0)" : "translateY(-5px)"};
+  pointer-events: ${({ visible }) => visible ? "auto" : "none"};
+  transition: opacity 0.2s ease, transform 0.2s ease;
+`;
+const SubMenuVerticalStyled = styled.div.withConfig({
+  shouldForwardProp: (prop) => !["level"].includes(prop)
+})`
+  display: flex;
+  flex-direction: column;
+  z-index: 1000;
+  ${MenuItemStyled} {
+    padding-left: calc(16px + (${({ level }) => level} * 8px));
+  }
+
+  & .quen-ui--menu__submenu {
+    top: 0;
+    left: 100%;
+  }
+`;
+const MenuStyled = styled(Flex)`
+  position: relative;
+`;
+export {
+  MenuItemStyled,
+  MenuStyled,
+  SubMenuHorizontalStyled,
+  SubMenuVerticalStyled
+};

package/dist/Menu/types.d.ts

@@ -0,0 +1,85 @@
+import { default as React } from 'react';
+import { TQuenSize } from '../types/size';
+export interface IMenuDefaultItem {
+    /** Unique item identifier */
+    key: string;
+    /** Icon displayed before label */
+    leftContent?: React.ReactNode;
+    /** Icon displayed after label */
+    rightContent?: React.ReactNode;
+    /** Menu item content */
+    label: React.ReactNode;
+    /** Click handler */
+    onClick?: () => void;
+    /** Disables interaction */
+    disabled?: boolean;
+    /** Custom CSS classes */
+    className?: string;
+}
+export type TMenuPropGetItemKey<Item> = (item: Item) => string;
+export type TMenuPropGetItemIcon<Item> = (item: Item) => React.ReactNode;
+export type TMenuPropGetItemLabel<Item> = (item: Item) => React.ReactNode;
+export type TMenuPropGetItemOnClick<Item> = (item: Item) => (() => void) | undefined;
+export type TMenuPropGetItemDisabled<Item> = (item: Item) => boolean | undefined;
+export type TMenuPropGetItemClassName<Item> = (item: Item) => string | undefined;
+export type TMenuRecursiveItem<T> = T & {
+    children?: TMenuRecursiveItem<T>[];
+};
+export interface IMenuProps<Item extends Record<string, any> = IMenuDefaultItem> {
+    /** List of menu items to display */
+    items: TMenuRecursiveItem<Item>[];
+    /** Orientation of the menu layout */
+    direction?: "vertical" | "horizontal";
+    /** Custom CSS class */
+    className?: string;
+    /** Unique key extractor */
+    getItemKey?: TMenuPropGetItemKey<TMenuRecursiveItem<Item>>;
+    /** Label text extractor */
+    getItemLabel?: TMenuPropGetItemLabel<TMenuRecursiveItem<Item>>;
+    /** Disabled state extractor */
+    getItemDisabled?: TMenuPropGetItemDisabled<TMenuRecursiveItem<Item>>;
+    /** Extracts content shown before the label */
+    getItemLeftContent?: TMenuPropGetItemIcon<TMenuRecursiveItem<Item>>;
+    /** Extracts content shown after the label */
+    getItemRightContent?: TMenuPropGetItemIcon<TMenuRecursiveItem<Item>>;
+    /** Provides the click handler for the item. */
+    getItemOnClick?: TMenuPropGetItemOnClick<TMenuRecursiveItem<Item>>;
+    /** Custom class name for a specific item. */
+    getItemClassName?: TMenuPropGetItemClassName<TMenuRecursiveItem<Item>>;
+    /** Inline styles applied to the container */
+    style?: React.CSSProperties;
+    /** Controls menu item sizes */
+    size?: TQuenSize;
+    /** Array with the keys of currently active menu items */
+    activeKeys?: string[];
+    /** Custom CSS classes for menu item */
+    classNameMenuItem?: string;
+}
+export interface IMenuItemProps<Item extends Record<string, any> = IMenuDefaultItem> {
+    /** Controls menu item sizes */
+    size?: TQuenSize;
+    /** Menu item to display */
+    item: TMenuRecursiveItem<Item>;
+    /** Unique key extractor */
+    getItemKey: TMenuPropGetItemKey<TMenuRecursiveItem<Item>>;
+    /** Label text extractor */
+    getItemLabel: TMenuPropGetItemLabel<TMenuRecursiveItem<Item>>;
+    /** Disabled state extractor */
+    getItemDisabled: TMenuPropGetItemDisabled<TMenuRecursiveItem<Item>>;
+    /** Extracts content shown before the label */
+    getItemLeftContent: TMenuPropGetItemIcon<TMenuRecursiveItem<Item>>;
+    /** Extracts content shown after the label */
+    getItemRightContent: TMenuPropGetItemIcon<TMenuRecursiveItem<Item>>;
+    /** Provides the click handler for the item. */
+    getItemOnClick: TMenuPropGetItemOnClick<TMenuRecursiveItem<Item>>;
+    /** Custom class name for a specific item. */
+    getItemClassName: TMenuPropGetItemClassName<TMenuRecursiveItem<Item>>;
+    /** Orientation of the menu layout */
+    direction: "vertical" | "horizontal";
+    /** Array with the keys of currently active menu items */
+    activeKeys?: string[];
+    arrowIcon?: boolean;
+    level?: number;
+    /** Custom CSS classes for menu item */
+    className?: string;
+}

package/dist/Modal/Modal.cjs.js

@@ -22,8 +22,10 @@ const Modal = ({
   fullScreen,
   classNameFooter,
   className,
+  width,
   ...props
 }) => {
+  console.log(open);
   const [state, toggle] = reactTransitionState.useTransitionState({
     timeout: 500,
     unmountOnExit: true,
@@ -35,7 +37,7 @@ const Modal = ({
   const [container, setContainer] = React.useState(null);
   const handleEscapeDown = (event) => {
     if (event.key === "Escape") {
-      onEsc == null ? void 0 : onEsc();
+      onEsc?.();
     }
   };
   React.useEffect(() => {
@@ -45,18 +47,26 @@ const Modal = ({
     }
     setContainer(container2);
     return () => {
-      container2 == null ? void 0 : container2.removeEventListener("keydown", handleEscapeDown);
+      container2?.removeEventListener("keydown", handleEscapeDown);
     };
   }, []);
+  React.useEffect(() => {
+    if (state.isEnter) {
+      document.body.style.overflow = "hidden";
+    }
+    return () => {
+      document.body.style.overflow = "unset";
+    };
+  }, [state]);
   if (state.isEnter && container) {
     return reactDom.createPortal(
-      /* @__PURE__ */ jsxRuntime.jsx(styles.ModalContainer, { status: state.status, zIndex, ...props, children: /* @__PURE__ */ jsxRuntime.jsxs(styles.ModalStyled, { fullScreen, className, size, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(styles.ModalContainer, { status: state.status, zIndex, ...props, children: /* @__PURE__ */ jsxRuntime.jsxs(styles.ModalStyled, { fullScreen, className, size, width, children: [
         /* @__PURE__ */ jsxRuntime.jsxs(styles.ModalHeaderStyled, { children: [
           title && /* @__PURE__ */ jsxRuntime.jsx(Title, { size, children: title }),
-          closeButton && /* @__PURE__ */ jsxRuntime.jsx(Button, { view: "icon", size, onClick: onClickClose, children: /* @__PURE__ */ jsxRuntime.jsx(iconClose, { width: 16, height: 16 }) })
+          closeButton && /* @__PURE__ */ jsxRuntime.jsx(Button, { view: "icon", size, onClick: onClickClose, "aria-label": "Close", children: /* @__PURE__ */ jsxRuntime.jsx(iconClose, { width: 16, height: 16 }) })
         ] }),
         description && /* @__PURE__ */ jsxRuntime.jsx(Text, { size, children: description }),
-        children,
+        /* @__PURE__ */ jsxRuntime.jsx(styles.ModalContentStyled, { scrollable: !fullScreen, children }),
         footer && /* @__PURE__ */ jsxRuntime.jsx(styles.ModalFooterStyled, { className: classNameFooter, children: footer })
       ] }) }),
       container

package/dist/Modal/Modal.d.ts

@@ -1,4 +1,4 @@
 import { default as React } from 'react';
 import { IModalProps } from './types';
-declare const Modal: ({ open, title, size, closeButton, onClickClose, onEsc, zIndex, description, children, footer, fullScreen, classNameFooter, className, ...props }: IModalProps) => React.ReactNode;
+declare const Modal: ({ open, title, size, closeButton, onClickClose, onEsc, zIndex, description, children, footer, fullScreen, classNameFooter, className, width, ...props }: IModalProps) => React.ReactNode;
 export default Modal;