@ftdata/ui 0.0.15 → 0.0.17

package/dist/components/Collapse/styles.js

@@ -6,6 +6,8 @@ const ContainerColapse = styled_components.div`
   align-items: center;
   cursor: pointer;
   margin-bottom: ${({ margin })=>margin ? margin : SPACING_INLINE_05};
+
+  display: grid;
 `;
 const ContentWrapper = styled_components.div`
   opacity: 0;

package/dist/components/IconButton/index.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+import { IconsNames } from "@ftdata/f-icons";
+export type IconButtonVariants = "default" | "accent" | "danger" | "success" | "warning" | "light";
+export type IconButtonSizes = "small" | "medium" | "big";
+interface IconButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
+    icon: IconsNames;
+    variant?: IconButtonVariants;
+    size?: IconButtonSizes | string;
+    iconSize?: string;
+    color?: string;
+    disabled?: boolean;
+    active?: boolean;
+}
+export default function IconButton({ icon, variant, size, iconSize, color, disabled, active, ...rest }: IconButtonProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/IconButton/index.js

@@ -0,0 +1,37 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+import { IconButtonStyled } from "./styles.js";
+import { Icon } from "@ftdata/f-icons";
+const SIZE_VARIANTS = {
+    small: {
+        buttonSize: "1.5rem",
+        iconSize: "1rem"
+    },
+    medium: {
+        buttonSize: "2rem",
+        iconSize: "1.5rem"
+    },
+    big: {
+        buttonSize: "2.5rem",
+        iconSize: "2rem"
+    }
+};
+function IconButton({ icon, variant = "default", size = "medium", iconSize, color, disabled = false, active = false, ...rest }) {
+    const isPresetSize = size in SIZE_VARIANTS;
+    const buttonSize = isPresetSize ? SIZE_VARIANTS[size].buttonSize : size;
+    const finalIconSize = iconSize || (isPresetSize ? SIZE_VARIANTS[size].iconSize : "1.5rem");
+    return /*#__PURE__*/ jsx(IconButtonStyled, {
+        variant: variant,
+        size: buttonSize,
+        color: color,
+        disabled: disabled,
+        $active: active,
+        ...rest,
+        children: /*#__PURE__*/ jsx(Icon, {
+            name: icon,
+            size: finalIconSize,
+            color: "currentColor"
+        })
+    });
+}
+export { IconButton as default };

package/dist/components/IconButton/modifiers/color.d.ts

@@ -0,0 +1,36 @@
+export declare const ICON_BUTTON_COLOR_MODIFIERS: {
+    default: {
+        background: string;
+        color: string;
+        hover: string;
+    };
+    accent: {
+        background: string;
+        color: string;
+        hover: string;
+    };
+    danger: {
+        background: string;
+        color: string;
+        hover: string;
+    };
+    success: {
+        background: string;
+        color: string;
+        hover: string;
+    };
+    warning: {
+        background: string;
+        color: string;
+        hover: string;
+    };
+    light: {
+        background: string;
+        color: string;
+        hover: string;
+    };
+};
+export declare const ICON_BUTTON_DISABLED_MODIFIERS: {
+    opacity: number;
+    cursor: string;
+};

package/dist/components/IconButton/modifiers/color.js

@@ -0,0 +1,38 @@
+import { COLOR_ACCENT_LIGHTER, COLOR_ACCENT_MEDIUM, COLOR_DANGER_LIGHTER, COLOR_DANGER_MEDIUM, COLOR_NEUTRAL_DARKER, COLOR_NEUTRAL_DAY, COLOR_NEUTRAL_LIGHTER, COLOR_SUCCESS_LIGHTER, COLOR_SUCCESS_MEDIUM, COLOR_WARNING_LIGHTER, COLOR_WARNING_MEDIUM } from "@ftdata/f-tokens";
+const ICON_BUTTON_COLOR_MODIFIERS = {
+    default: {
+        background: COLOR_NEUTRAL_LIGHTER,
+        color: COLOR_NEUTRAL_DARKER,
+        hover: COLOR_NEUTRAL_LIGHTER
+    },
+    accent: {
+        background: COLOR_ACCENT_LIGHTER,
+        color: COLOR_ACCENT_MEDIUM,
+        hover: COLOR_NEUTRAL_LIGHTER
+    },
+    danger: {
+        background: COLOR_DANGER_LIGHTER,
+        color: COLOR_DANGER_MEDIUM,
+        hover: COLOR_NEUTRAL_LIGHTER
+    },
+    success: {
+        background: COLOR_SUCCESS_LIGHTER,
+        color: COLOR_SUCCESS_MEDIUM,
+        hover: COLOR_NEUTRAL_LIGHTER
+    },
+    warning: {
+        background: COLOR_WARNING_LIGHTER,
+        color: COLOR_WARNING_MEDIUM,
+        hover: COLOR_NEUTRAL_LIGHTER
+    },
+    light: {
+        background: "rgba(255, 255, 255, 0.5)",
+        color: COLOR_NEUTRAL_DAY,
+        hover: "rgba(255, 255, 255, 0.32)"
+    }
+};
+const ICON_BUTTON_DISABLED_MODIFIERS = {
+    opacity: 0.5,
+    cursor: "not-allowed"
+};
+export { ICON_BUTTON_COLOR_MODIFIERS, ICON_BUTTON_DISABLED_MODIFIERS };

package/dist/components/IconButton/styles.d.ts

@@ -0,0 +1,10 @@
+import { IconButtonVariants } from ".";
+interface IconButtonStyledProps {
+    variant: IconButtonVariants;
+    size: string;
+    color?: string;
+    disabled?: boolean;
+    $active?: boolean;
+}
+export declare const IconButtonStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, IconButtonStyledProps>> & string;
+export {};

package/dist/components/IconButton/styles.js

@@ -0,0 +1,32 @@
+import styled_components from "styled-components";
+import { ICON_BUTTON_COLOR_MODIFIERS, ICON_BUTTON_DISABLED_MODIFIERS } from "./modifiers/color.js";
+import { COLOR_NEUTRAL_DARKER } from "@ftdata/f-tokens";
+const IconButtonStyled = styled_components.button`
+  border-radius: 50%;
+  transition: all 0.15s ease-in-out;
+  width: ${({ size })=>size};
+  height: ${({ size })=>size};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: ${({ color })=>color || COLOR_NEUTRAL_DARKER};
+
+  &:hover {
+    background-color: ${({ variant })=>ICON_BUTTON_COLOR_MODIFIERS[variant].hover};
+  }
+
+  &:active {
+    background-color: ${({ variant })=>ICON_BUTTON_COLOR_MODIFIERS[variant].background};
+    color: ${({ variant })=>ICON_BUTTON_COLOR_MODIFIERS[variant].color};
+  }
+
+  ${({ $active, variant })=>$active && `
+    color: ${ICON_BUTTON_COLOR_MODIFIERS[variant].color};
+  `}
+
+  ${({ disabled })=>disabled && `
+    opacity: ${ICON_BUTTON_DISABLED_MODIFIERS.opacity};
+    pointer-events: none;
+  `}
+`;
+export { IconButtonStyled };

package/dist/components/Menu/constants/icons.d.ts

@@ -1,17 +1,3 @@
-export declare const ICONS: {
-    panelist: import("react/jsx-runtime").JSX.Element;
-    registration: import("react/jsx-runtime").JSX.Element;
-    logistics: import("react/jsx-runtime").JSX.Element;
-    reports: import("react/jsx-runtime").JSX.Element;
-    driver_behavior: import("react/jsx-runtime").JSX.Element;
-    settings: import("react/jsx-runtime").JSX.Element;
-    f_analytics: import("react/jsx-runtime").JSX.Element;
-    f_speed: import("react/jsx-runtime").JSX.Element;
-    title_module_playback_f_view: import("react/jsx-runtime").JSX.Element;
-    message: import("react/jsx-runtime").JSX.Element;
-    maps: import("react/jsx-runtime").JSX.Element;
-    changelog: import("react/jsx-runtime").JSX.Element;
-    dashboard: import("react/jsx-runtime").JSX.Element;
-    mosaic: import("react/jsx-runtime").JSX.Element;
-};
+import { IconsNames } from "@ftdata/f-icons";
+export declare const ICONS: Record<string, IconsNames>;
 export type IconsKeys = keyof typeof ICONS;

package/dist/components/Menu/constants/icons.js

@@ -1,61 +1,16 @@
-import { jsx } from "react/jsx-runtime";
-import { Icon } from "@ftdata/f-icons";
+import "react";
 const ICONS = {
-    panelist: /*#__PURE__*/ jsx(Icon, {
-        name: "ui briefcase",
-        color: "currentColor"
-    }),
-    registration: /*#__PURE__*/ jsx(Icon, {
-        name: "ui plus-add",
-        color: "currentColor"
-    }),
-    logistics: /*#__PURE__*/ jsx(Icon, {
-        name: "nav arrow-location-direction-1",
-        color: "currentColor"
-    }),
-    reports: /*#__PURE__*/ jsx(Icon, {
-        name: "bp chart-19",
-        color: "currentColor"
-    }),
-    driver_behavior: /*#__PURE__*/ jsx(Icon, {
-        name: "nav direction-arrow-road",
-        color: "currentColor"
-    }),
-    settings: /*#__PURE__*/ jsx(Icon, {
-        name: "ui settings",
-        color: "currentColor"
-    }),
-    f_analytics: /*#__PURE__*/ jsx(Icon, {
-        name: "sm google-analytics",
-        color: "currentColor"
-    }),
-    f_speed: /*#__PURE__*/ jsx(Icon, {
-        name: "cs speedometer",
-        color: "currentColor"
-    }),
-    title_module_playback_f_view: /*#__PURE__*/ jsx(Icon, {
-        name: "ui video-camera",
-        color: "currentColor"
-    }),
-    message: /*#__PURE__*/ jsx(Icon, {
-        name: "eml emails-letter-mail-2",
-        color: "currentColor"
-    }),
-    maps: /*#__PURE__*/ jsx(Icon, {
-        name: "nav earth-home-world",
-        color: "currentColor"
-    }),
-    changelog: /*#__PURE__*/ jsx(Icon, {
-        name: "ui info-information",
-        color: "currentColor"
-    }),
-    dashboard: /*#__PURE__*/ jsx(Icon, {
-        name: "ui dashboard-minimal",
-        color: "currentColor"
-    }),
-    mosaic: /*#__PURE__*/ jsx(Icon, {
-        name: "ui grid-layout-add",
-        color: "currentColor"
-    })
+    "fa-building-o": "ui briefcase",
+    "fa-edit": "ui plus-add",
+    "fa-connectdevelop": "nav arrow-location-direction-1",
+    "fa-list-ol": "bp chart-19",
+    "fa-road": "nav direction-arrow-road",
+    "fa-cogs": "ui settings",
+    "fa-bar-chart": "sm google-analytics",
+    "fa-gauge": "cs speedometer",
+    "fa-camera": "ui video-camera",
+    "fa-globe": "nav earth-home-world",
+    "fa-truck": "nmk truck",
+    "fa-dashboard": "ui dashboard-minimal"
 };
 export { ICONS };

package/dist/components/Menu/helpers/createMenus.js

@@ -1,19 +1,26 @@
-import { ICONS } from "../constants/icons.js";
+import { jsx } from "react/jsx-runtime";
+import "react";
+import { Icon } from "@ftdata/f-icons";
 import { createSubMenus } from "./createSubMenus.js";
+import { ICONS } from "../constants/icons.js";
 function createMenuItems(data, translate) {
-    return data.sort((a, b)=>a.ordenation - b.ordenation).filter((item)=>!!ICONS[item.translate_key]).map((item)=>{
-        const icon = ICONS[item.translate_key];
+    return data.sort((a, b)=>a.ordenation - b.ordenation).map((item)=>{
+        const icon = /*#__PURE__*/ jsx(Icon, {
+            name: ICONS[item.menu_icon.trim()] || "ui plus-add",
+            color: "currentColor"
+        });
         const subItems = item.itens.sort((a, b)=>a.ordenation - b.ordenation);
         return {
-            label: translate(item.translate_key),
-            icon,
+            id: item.id,
             callback: ()=>{
                 if (item.endpoint) {
                     const url = new URL(item.endpoint, window.location.origin).toString();
                     window.open(url, "_blank");
                 }
             },
-            submenus: createSubMenus(subItems, translate)
+            submenus: createSubMenus(subItems, translate),
+            icon,
+            label: translate(item.translate_key)
         };
     });
 }

package/dist/components/Menu/helpers/createSubMenus.d.ts

@@ -1,2 +1,2 @@
-import { MenuItemData, SubMenuData } from "../types/MenuItem";
+import { MenuItemData, SubMenuData } from '../types/MenuItem';
 export declare function createSubMenus(data: MenuItemData[], translate: (key: string) => string): SubMenuData[];

package/dist/components/Menu/helpers/createSubMenus.js

@@ -4,7 +4,7 @@ function createSubMenus(data, translate) {
             callback: ()=>{
                 if (item.endpoint) {
                     const url = new URL(item.endpoint, window.location.origin).toString();
-                    window.open(url, "_blank");
+                    window.open(url, '_blank');
                 }
             }
         }));

package/dist/components/Menu/helpers/generateColorScale.js

@@ -23,7 +23,7 @@ function generateColorScale(hex) {
         950
     ];
     const toRgb = (hex)=>{
-        const clean = hex.replace("#", "");
+        const clean = hex.replace('#', '');
         const bigint = parseInt(clean, 16);
         return {
             r: bigint >> 16 & 255,
@@ -35,7 +35,7 @@ function generateColorScale(hex) {
             r,
             g,
             b
-        ].map((c)=>Math.round(c).toString(16).padStart(2, "0")).join("")}`;
+        ].map((c)=>Math.round(c).toString(16).padStart(2, '0')).join('')}`;
     const mix = (c1, c2, amount)=>c1 + (c2 - c1) * amount;
     const { r: baseR, g: baseG, b: baseB } = toRgb(hex);
     const lighten = (amount)=>({

package/dist/components/Menu/helpers/getLuminance.d.ts

@@ -1 +1 @@
-export declare function getLuminance(hex: string): "dark" | "light";
+export declare function getLuminance(hex: string): 'dark' | 'light';

package/dist/components/Menu/helpers/getLuminance.js

@@ -1,9 +1,9 @@
 function getLuminance(hex) {
-    const sanitizedHex = hex.replace("#", "");
+    const sanitizedHex = hex.replace('#', '');
     const r = parseInt(sanitizedHex.substring(0, 2), 16);
     const g = parseInt(sanitizedHex.substring(2, 4), 16);
     const b = parseInt(sanitizedHex.substring(4, 6), 16);
     const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
-    return luminance < 0.5 ? "dark" : "light";
+    return luminance < 0.5 ? 'dark' : 'light';
 }
 export { getLuminance };

package/dist/components/Menu/index.d.ts

@@ -9,5 +9,5 @@ interface MenuProps {
     translate: (key: string) => string;
     active?: string;
 }
-export default function Menu({ background, fontcolor, subMenusBackground, logo, items, translate, active, }: MenuProps): import("react/jsx-runtime").JSX.Element;
+export default function Menu({ background, fontcolor, subMenusBackground, logo, items, translate, active, }: MenuProps): JSX.Element;
 export {};

package/dist/components/Menu/index.js

@@ -7,22 +7,14 @@ function Menu({ background, fontcolor, subMenusBackground, logo, items, translat
     const [expand, setExpand] = useState(false);
     const [submenus, setSubmenus] = useState([]);
     const [isClosingSubmenu, setIsClosingSubmenu] = useState(false);
-    const [menuAnimating, setMenuAnimating] = useState(false);
     const menuRef = useRef(null);
     const menus = createMenus(items, translate);
     const toggleMenu = ()=>{
-        if (expand) {
-            setMenuAnimating(true);
-            setTimeout(()=>{
-                setSubmenus([]);
-                setExpand(false);
-                setMenuAnimating(false);
-            }, 120);
-            return;
-        }
+        if (expand) return void setTimeout(()=>{
+            setSubmenus([]);
+            setExpand(false);
+        }, 120);
         setExpand(true);
-        setMenuAnimating(true);
-        setTimeout(()=>setMenuAnimating(false), 120);
     };
     const handleClickItem = (event, submenus, callback)=>{
         event.stopPropagation();
@@ -34,10 +26,6 @@ function Menu({ background, fontcolor, subMenusBackground, logo, items, translat
         event.stopPropagation();
         toggleMenu();
     };
-    const handleClickAside = (event)=>{
-        if (!expand) return void toggleMenu();
-        if (event.target === event.currentTarget) toggleMenu();
-    };
     const handleClickBack = ()=>{
         setIsClosingSubmenu(true);
         setTimeout(()=>{
@@ -62,7 +50,7 @@ function Menu({ background, fontcolor, subMenusBackground, logo, items, translat
     return /*#__PURE__*/ jsxs(MenuAside, {
         ref: menuRef,
         background: background,
-        onClick: handleClickAside,
+        onClick: expand ? ()=>null : toggleMenu,
         $expand: expand,
         children: [
             /*#__PURE__*/ jsxs(MenuHeader, {
@@ -71,12 +59,12 @@ function Menu({ background, fontcolor, subMenusBackground, logo, items, translat
                         onClick: handleClickHamburger,
                         fontcolor: fontcolor,
                         $expand: expand,
-                        $animating: menuAnimating,
                         children: [
                             /*#__PURE__*/ jsx("div", {
                                 children: /*#__PURE__*/ jsx(Icon, {
                                     name: "ui menu-burger-square",
-                                    width: "1.5rem"
+                                    width: "1.5rem",
+                                    color: "currentColor"
                                 })
                             }),
                             /*#__PURE__*/ jsx("span", {
@@ -96,7 +84,6 @@ function Menu({ background, fontcolor, subMenusBackground, logo, items, translat
                         onClick: (event)=>handleClickItem(event, menu.submenus, menu.callback),
                         $expand: expand || void 0,
                         $active: menu.label === translate(active || ""),
-                        $animating: menuAnimating,
                         children: [
                             /*#__PURE__*/ jsx("div", {
                                 children: menu.icon
@@ -111,24 +98,24 @@ function Menu({ background, fontcolor, subMenusBackground, logo, items, translat
                 $isClosing: isClosingSubmenu || void 0,
                 background: subMenusBackground,
                 children: [
-                    /*#__PURE__*/ jsxs(SubItemsHeader, {
+                    /*#__PURE__*/ jsx(SubItemsHeader, {
                         fontcolor: fontcolor,
-                        children: [
-                            /*#__PURE__*/ jsx("button", {
-                                onClick: handleClickBack,
-                                children: /*#__PURE__*/ jsx(Icon, {
-                                    name: "arw arrow-left"
-                                })
-                            }),
-                            translate("back")
-                        ]
+                        children: /*#__PURE__*/ jsxs("button", {
+                            onClick: handleClickBack,
+                            children: [
+                                /*#__PURE__*/ jsx(Icon, {
+                                    name: "arw arrow-left",
+                                    color: "currentColor"
+                                }),
+                                translate("back")
+                            ]
+                        })
                     }),
                     /*#__PURE__*/ jsx(SubItemsWrapper, {
                         background: subMenusBackground,
                         children: submenus.map((submenu, idx)=>/*#__PURE__*/ jsx(SubMenuItem, {
                                 fontcolor: fontcolor,
                                 onClick: (event)=>handleClickItem(event, [], submenu.callback),
-                                $animating: menuAnimating,
                                 children: submenu.label
                             }, `${submenu.label}-${idx}`))
                     })

package/dist/components/Menu/styles.d.ts

@@ -4,7 +4,6 @@ interface ICommonProps {
     $active?: boolean;
     $expand?: boolean;
     $isClosing?: boolean;
-    $animating?: boolean;
 }
 export declare const MenuAside: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, ICommonProps>> & string;
 export declare const MenuHeader: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ICommonProps>> & string;

package/dist/components/Menu/styles.js

@@ -1,6 +1,26 @@
 import styled_components, { keyframes } from "styled-components";
 import { generateColorScale } from "./helpers/generateColorScale.js";
 import { getLuminance } from "./helpers/getLuminance.js";
+const shrinkToRight = keyframes`
+  from {
+    transform: scaleX(1);
+    opacity: 1;
+  }
+  to {
+    transform: scaleX(0);
+    opacity: 0;
+  }
+`;
+const growFromRight = keyframes`
+  from {
+    transform: scaleX(0);
+    opacity: 0;
+  }
+  to {
+    transform: scaleX(1);
+    opacity: 1;
+  }
+`;
 const fadeOutAndHide = keyframes`
   0% {
     opacity: 1;
@@ -33,26 +53,6 @@ const fadeInAndShow = keyframes`
     display: flex;
   }
 `;
-const submenuEnter = keyframes`
-  from {
-    width: 0;
-    opacity: 0;
-  }
-  to {
-    width: 15.25rem;
-    opacity: 1;
-  }
-`;
-const submenuExit = keyframes`
-  from {
-    width: 15.25rem;
-    opacity: 1;
-  }
-  to {
-    width: 0;
-    opacity: 0;
-  }
-`;
 const MenuAside = styled_components.aside`
   background-color: ${({ background })=>background || "#000"};
   box-sizing: border-box;
@@ -78,7 +78,6 @@ const MenuHeader = styled_components.div`
 `;
 const ContainerLogo = styled_components.div`
   padding: 0 0.5rem;
-  max-height: 8.875rem;
   animation: ${({ $expand })=>$expand ? fadeInAndShow : fadeOutAndHide}
     0.25s forwards;
 
@@ -87,7 +86,7 @@ const ContainerLogo = styled_components.div`
     align-items: center;
     display: flex;
     justify-content: center;
-    max-height: 8rem;
+    max-height: 8.875rem;
     max-width: 100%;
   }
 `;
@@ -125,40 +124,33 @@ const ItemMenu = styled_components.div`
     transition:
       opacity 0.4s ease,
       transform 0.4s ease;
-    white-space: ${({ $expand, $animating })=>$expand && !$animating ? "normal" : "nowrap"};
+    white-space: ${({ $expand })=>$expand ? "wrap" : "nowrap"};
     overflow: hidden;
-    text-overflow: ellipsis;
+
     &:hover {
       opacity: 1;
     }
   }
 `;
 const SubItemsContainer = styled_components.div`
-  animation: ${({ $isClosing })=>$isClosing ? submenuExit : submenuEnter}
-    0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+  animation: ${({ $isClosing })=>$isClosing ? shrinkToRight : growFromRight}
+    0.4s ease forwards;
   background-color: ${({ background })=>generateColorScale(background || "#000000")[500]};
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
   height: 100%;
-  padding: 0.5rem 0 0 1rem;
+  padding: 1rem 0 0 1rem;
   position: absolute;
   right: 0;
   top: 0;
   transform-origin: right;
   width: 15.25rem;
   z-index: 1;
-  overflow: hidden;
 `;
 const SubItemsHeader = styled_components.div`
   padding: 0.5rem 0 1.5rem 0;
-  display: flex;
-  gap: 0.5rem;
-  color: ${({ fontcolor })=>fontcolor || "#FFFFFF"};
-  font-size: 1rem;
-  line-height: 1.5rem;
-  font-weight: 500;
 
   button {
     align-items: center;
@@ -167,18 +159,13 @@ const SubItemsHeader = styled_components.div`
     color: ${({ fontcolor })=>fontcolor || "#FFFFFF"};
     cursor: pointer;
     display: flex;
+    font-size: 1rem;
+    font-weight: 500;
     gap: 0.5rem;
     line-height: 1rem;
     margin: 0;
-    border-radius: 50%;
     padding: 0;
-    transition: all 0.2s ease;
-
-    &:hover {
-      background-color: ${({ background })=>generateColorScale(background || "#00000")["dark" === getLuminance(background || "#00000") ? 400 : 600]};
-      box-shadow: 0 0 0 2px
-        ${({ background })=>generateColorScale(background || "#00000")["dark" === getLuminance(background || "#00000") ? 400 : 600]};
-    }
+    transition: opacity 0.2s ease;
   }
 `;
 const SubItemsWrapper = styled_components.div`
@@ -207,9 +194,6 @@ const SubMenuItem = styled_components.span`
   opacity: ${({ $active })=>$active ? "1" : "0.68"};
   padding: 0.5rem 0.75rem;
   transition: background-color 0.2s ease;
-  white-space: ${({ $expand, $animating })=>$expand && !$animating ? "normal" : "nowrap"};
-  overflow: hidden;
-  text-overflow: ellipsis;
 
   &:hover {
     opacity: 1;

package/dist/components/Menu/types/IconKeysType.d.ts

@@ -1,2 +1,2 @@
-import { ICONS } from "../constants/icons";
+import { ICONS } from '../constants/icons';
 export type IconsKeysType = keyof typeof ICONS;

package/dist/components/Menu/types/MenuItem.d.ts

@@ -1,5 +1,5 @@
-import { JSX } from "react";
-import { IconsKeysType } from "./IconKeysType";
+import { JSX } from 'react';
+import { IconsKeysType } from './IconKeysType';
 export type SubMenuData = {
     callback: () => void;
     label: string;
@@ -19,6 +19,7 @@ export type MenuItemData = {
     ordenation: number;
 };
 export type MenuItem = {
+    id: number;
     callback: () => void;
     submenus: SubMenu[];
     icon: JSX.Element;