@orbe-agro/client-core-prod 5.6.123 → 5.6.125

package/dist/@ecme/assets/styles/app.css

@@ -4493,6 +4493,9 @@ hr:is(.dark *){
 .-left-2{
   left: -0.5rem;
 }
+.-left-3{
+  left: -0.75rem;
+}
 .-right-2{
   right: -0.5rem;
 }
@@ -4553,6 +4556,9 @@ hr:is(.dark *){
 .z-10{
   z-index: 10;
 }
+.z-20{
+  z-index: 20;
+}
 .z-30{
   z-index: 30;
 }
@@ -5269,6 +5275,9 @@ hr:is(.dark *){
 .min-w-\[330px\]{
   min-width: 330px;
 }
+.min-w-\[calc\(100\%\+1\.5rem\)\]{
+  min-width: calc(100% + 1.5rem);
+}
 .min-w-full{
   min-width: 100%;
 }
@@ -7087,6 +7096,9 @@ hr:is(.dark *){
 .active\:bg-gray-100:active{
   background-color: var(--gray-100);
 }
+.group\/item:hover .group-hover\/item\:block{
+  display: block;
+}
 .group:hover .group-hover\:block{
   display: block;
 }
@@ -7131,6 +7143,9 @@ hr:is(.dark *){
   --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
+.group\/item:focus-visible .group-focus-visible\/item\:block{
+  display: block;
+}
 .group.active .group-\[\.active\]\:bg-white{
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));

package/dist/@ecme/assets/styles/tailwind/index.css

@@ -1165,6 +1165,9 @@ video {
 .-left-2 {
   left: -0.5rem;
 }
+.-left-3 {
+  left: -0.75rem;
+}
 .-right-2 {
   right: -0.5rem;
 }
@@ -1225,6 +1228,9 @@ video {
 .z-10 {
   z-index: 10;
 }
+.z-20 {
+  z-index: 20;
+}
 .z-30 {
   z-index: 30;
 }
@@ -1941,6 +1947,9 @@ video {
 .min-w-\[330px\] {
   min-width: 330px;
 }
+.min-w-\[calc\(100\%\+1\.5rem\)\] {
+  min-width: calc(100% + 1.5rem);
+}
 .min-w-full {
   min-width: 100%;
 }
@@ -3761,6 +3770,9 @@ video {
 .active\:bg-gray-100:active {
   background-color: var(--gray-100);
 }
+.group\/item:hover .group-hover\/item\:block {
+  display: block;
+}
 .group:hover .group-hover\:block {
   display: block;
 }
@@ -3805,6 +3817,9 @@ video {
   --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
+.group\/item:focus-visible .group-focus-visible\/item\:block {
+  display: block;
+}
 .group.active .group-\[\.active\]\:bg-white {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));

package/dist/@ecme/components/template/VerticalMenuContent/VerticalMenuContent.js

@@ -44,6 +44,25 @@ const filterNavigationByAuthority = (navTree, userAuthority) => {
     return acc;
   }, []);
 };
+const compareNavigationOrder = (a, b) => {
+  const orderA = a.sortOrder ?? Number.MAX_SAFE_INTEGER;
+  const orderB = b.sortOrder ?? Number.MAX_SAFE_INTEGER;
+  if (orderA !== orderB) {
+    return orderA - orderB;
+  }
+  const titleCompare = a.title.localeCompare(b.title, "pt-BR");
+  if (titleCompare !== 0) {
+    return titleCompare;
+  }
+  return a.key.localeCompare(b.key, "pt-BR");
+};
+const sortNavigationNodeList = (navTree) => [...navTree].sort(compareNavigationOrder);
+const sortNavigationRecursively = (navTree) => {
+  return sortNavigationNodeList(navTree).map((nav) => ({
+    ...nav,
+    subMenu: nav.subMenu ? sortNavigationRecursively(nav.subMenu) : nav.subMenu
+  }));
+};
 const VerticalMenuContent = (props) => {
   const {
     collapsed,
@@ -57,10 +76,13 @@ const VerticalMenuContent = (props) => {
   } = props;
   const { t } = useTranslation(!translationSetup);
   const [defaulExpandKey, setDefaulExpandKey] = useState([]);
-  const filteredNavigationTree = useMemo(
-    () => filterNavigationByAuthority(navigationTree, userAuthority),
-    [navigationTree, userAuthority]
-  );
+  const filteredNavigationTree = useMemo(() => {
+    const filteredTree = filterNavigationByAuthority(
+      navigationTree,
+      userAuthority
+    );
+    return sortNavigationRecursively(filteredTree);
+  }, [navigationTree, userAuthority]);
   const { activedRoute } = useMenuActive(filteredNavigationTree, routeKey);
   useEffect(() => {
     if (activedRoute?.key) {
@@ -76,7 +98,8 @@ const VerticalMenuContent = (props) => {
   };
   const renderNavigation = (navTree, cascade = 0, indent) => {
     const nextCascade = cascade + 1;
-    return /* @__PURE__ */ jsx(Fragment, { children: navTree.map((nav) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
+    const orderedNavTree = sortNavigationNodeList(navTree);
+    return /* @__PURE__ */ jsx(Fragment, { children: orderedNavTree.map((nav) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
       nav.type === NAV_ITEM_TYPE_ITEM && /* @__PURE__ */ jsx(
         VerticalSingleMenuItem,
         {
@@ -110,11 +133,26 @@ const VerticalMenuContent = (props) => {
           userAuthority,
           t,
           onLinkClick: onMenuItemClick,
-          children: nav.subMenu && nav.subMenu.length > 0 && renderNavigation(nav.subMenu, nextCascade, true)
+          children: nav.subMenu && nav.subMenu.length > 0 && renderNavigation(
+            nav.subMenu,
+            nextCascade,
+            true
+          )
         },
         nav.key
       ),
-      nav.type === NAV_ITEM_TYPE_TITLE && /* @__PURE__ */ jsx(MenuGroup, { label: t(nav.translateKey) || nav.title, children: nav.subMenu && nav.subMenu.length > 0 && renderNavigation(nav.subMenu, cascade, false) }, nav.key)
+      nav.type === NAV_ITEM_TYPE_TITLE && /* @__PURE__ */ jsx(
+        MenuGroup,
+        {
+          label: t(nav.translateKey) || nav.title,
+          children: nav.subMenu && nav.subMenu.length > 0 && renderNavigation(
+            nav.subMenu,
+            cascade,
+            false
+          )
+        },
+        nav.key
+      )
     ] }, nav.key)) });
   };
   return /* @__PURE__ */ jsx(

package/dist/@ecme/components/template/VerticalMenuContent/VerticalMenuContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"VerticalMenuContent.js","sources":["../../../../../lib/@ecme/components/template/VerticalMenuContent/VerticalMenuContent.tsx"],"sourcesContent":["import { useState, useEffect, useMemo, Fragment } from \"react\";\nimport Menu from \"@/components/ui/Menu\";\nimport VerticalSingleMenuItem from \"./VerticalSingleMenuItem\";\nimport VerticalCollapsedMenuItem from \"./VerticalCollapsedMenuItem\";\nimport { themeConfig } from \"@/configs/theme.config\";\nimport {\n  NAV_ITEM_TYPE_TITLE,\n  NAV_ITEM_TYPE_COLLAPSE,\n  NAV_ITEM_TYPE_ITEM,\n} from \"@/constants/navigation.constant\";\nimport useMenuActive from \"@/utils/hooks/useMenuActive\";\nimport useTranslation from \"@/utils/hooks/useTranslation\";\nimport { Direction } from \"@/@types/theme\";\nimport type { NavigationTree } from \"@/@types/navigation\";\nimport type { TraslationFn } from \"@/@types/common\";\nimport { LinkRenderer } from \"@/components/layouts/Layouts\";\n\nexport interface VerticalMenuContentProps {\n  collapsed?: boolean;\n  routeKey: string;\n  navigationTree?: NavigationTree[];\n  onMenuItemClick?: () => void;\n  direction?: Direction;\n  translationSetup?: boolean;\n  userAuthority: string[];\n  linkRenderer?: LinkRenderer;\n}\n\nconst { MenuGroup } = Menu;\n\nconst findAncestorKeys = (\n  navTree: NavigationTree[],\n  targetKey: string\n): string[] | null => {\n  for (const node of navTree) {\n    if (node.key === targetKey) return [];\n    if (node.subMenu && node.subMenu.length > 0) {\n      const found = findAncestorKeys(node.subMenu, targetKey);\n      if (found !== null) return [node.key, ...found];\n    }\n  }\n  return null;\n};\n\nconst filterNavigationByAuthority = (\n  navTree: NavigationTree[],\n  userAuthority: string[]\n): NavigationTree[] => {\n  return navTree.reduce((acc: NavigationTree[], nav) => {\n    // Verifica se deve excluir o item quando o usuário possui alguma funcionalidade específica\n    if (nav.excludeWhenHasPaths && nav.excludeWhenHasPaths.length > 0) {\n      const shouldExclude = nav.excludeWhenHasPaths.some((path) =>\n        userAuthority.includes(path)\n      );\n      if (shouldExclude) {\n        return acc;\n      }\n    }\n\n    if (nav.subMenu && nav.subMenu.length > 0) {\n      const filteredSubMenu = filterNavigationByAuthority(\n        nav.subMenu,\n        userAuthority\n      );\n      if (filteredSubMenu.length > 0) {\n        acc.push({ ...nav, subMenu: filteredSubMenu });\n      }\n    } else {\n      if ((nav.path && userAuthority.includes(nav.path)) || !nav.path) {\n        acc.push(nav);\n      }\n    }\n    return acc;\n  }, []);\n};\n\nconst VerticalMenuContent = (props: VerticalMenuContentProps) => {\n  const {\n    collapsed,\n    routeKey,\n    navigationTree = [],\n    onMenuItemClick,\n    direction = themeConfig.direction,\n    translationSetup,\n    userAuthority,\n    linkRenderer,\n  } = props;\n\n  const { t } = useTranslation(!translationSetup);\n  const [defaulExpandKey, setDefaulExpandKey] = useState<string[]>([]);\n  const filteredNavigationTree = useMemo(\n    () => filterNavigationByAuthority(navigationTree, userAuthority),\n    [navigationTree, userAuthority]\n  );\n\n  const { activedRoute } = useMenuActive(filteredNavigationTree, routeKey);\n\n  useEffect(() => {\n    if (activedRoute?.key) {\n      const ancestors = findAncestorKeys(\n        filteredNavigationTree,\n        activedRoute.key\n      );\n      setDefaulExpandKey(ancestors ?? []);\n    }\n  }, [activedRoute?.key, filteredNavigationTree]);\n\n  const handleLinkClick = () => {\n    onMenuItemClick?.();\n  };\n\n  const renderNavigation = (\n    navTree: NavigationTree[],\n    cascade: number = 0,\n    indent?: boolean\n  ) => {\n    const nextCascade = cascade + 1;\n\n    return (\n      <>\n        {navTree.map((nav) => (\n          <Fragment key={nav.key}>\n            {nav.type === NAV_ITEM_TYPE_ITEM && (\n              <VerticalSingleMenuItem\n                key={nav.key}\n                currentKey={activedRoute?.key}\n                parentKeys={defaulExpandKey}\n                nav={nav}\n                sideCollapsed={collapsed}\n                direction={direction}\n                indent={indent}\n                renderAsIcon={cascade <= 0}\n                showIcon={cascade <= 0}\n                userAuthority={userAuthority}\n                showTitle={\n                  nav.forceShowTitle ??\n                  (collapsed ? cascade >= 1 : cascade <= 1)\n                }\n                t={t as TraslationFn}\n                onLinkClick={handleLinkClick}\n                linkRenderer={linkRenderer}\n              />\n            )}\n            {nav.type === NAV_ITEM_TYPE_COLLAPSE && (\n              <VerticalCollapsedMenuItem\n                key={nav.key}\n                currentKey={activedRoute?.key}\n                parentKeys={defaulExpandKey}\n                nav={nav}\n                sideCollapsed={collapsed}\n                direction={direction}\n                indent={nextCascade >= 2}\n                dotIndent={nextCascade >= 2}\n                renderAsIcon={nextCascade <= 1}\n                userAuthority={userAuthority}\n                t={t as TraslationFn}\n                onLinkClick={onMenuItemClick}\n              >\n                {nav.subMenu &&\n                  nav.subMenu.length > 0 &&\n                  renderNavigation(nav.subMenu, nextCascade, true)}\n              </VerticalCollapsedMenuItem>\n            )}\n            {nav.type === NAV_ITEM_TYPE_TITLE && (\n              <MenuGroup key={nav.key} label={t(nav.translateKey) || nav.title}>\n                {nav.subMenu &&\n                  nav.subMenu.length > 0 &&\n                  renderNavigation(nav.subMenu, cascade, false)}\n              </MenuGroup>\n            )}\n          </Fragment>\n        ))}\n      </>\n    );\n  };\n\n  return (\n    <Menu\n      className=\"px-4 pb-4\"\n      sideCollapsed={collapsed}\n      defaultActiveKeys={activedRoute?.key ? [activedRoute.key] : []}\n      defaultExpandedKeys={defaulExpandKey}\n      defaultCollapseActiveKeys={\n        activedRoute?.parentKey ? [activedRoute.parentKey] : []\n      }\n    >\n      {renderNavigation(filteredNavigationTree, 0)}\n    </Menu>\n  );\n};\n\nexport default VerticalMenuContent;"],"names":["Fragment"],"mappings":"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"}
+{"version":3,"file":"VerticalMenuContent.js","sources":["../../../../../lib/@ecme/components/template/VerticalMenuContent/VerticalMenuContent.tsx"],"sourcesContent":["import { useState, useEffect, useMemo, Fragment } from 'react'\nimport Menu from '@/components/ui/Menu'\nimport VerticalSingleMenuItem from './VerticalSingleMenuItem'\nimport VerticalCollapsedMenuItem from './VerticalCollapsedMenuItem'\nimport { themeConfig } from '@/configs/theme.config'\nimport {\n    NAV_ITEM_TYPE_TITLE,\n    NAV_ITEM_TYPE_COLLAPSE,\n    NAV_ITEM_TYPE_ITEM,\n} from '@/constants/navigation.constant'\nimport useMenuActive from '@/utils/hooks/useMenuActive'\nimport useTranslation from '@/utils/hooks/useTranslation'\nimport { Direction } from '@/@types/theme'\nimport type { NavigationTree } from '@/@types/navigation'\nimport type { TraslationFn } from '@/@types/common'\nimport { LinkRenderer } from '@/components/layouts/Layouts'\n\nexport interface VerticalMenuContentProps {\n    collapsed?: boolean\n    routeKey: string\n    navigationTree?: NavigationTree[]\n    onMenuItemClick?: () => void\n    direction?: Direction\n    translationSetup?: boolean\n    userAuthority: string[]\n    linkRenderer?: LinkRenderer\n}\n\nconst { MenuGroup } = Menu\n\nconst findAncestorKeys = (\n    navTree: NavigationTree[],\n    targetKey: string,\n): string[] | null => {\n    for (const node of navTree) {\n        if (node.key === targetKey) return []\n        if (node.subMenu && node.subMenu.length > 0) {\n            const found = findAncestorKeys(node.subMenu, targetKey)\n            if (found !== null) return [node.key, ...found]\n        }\n    }\n    return null\n}\n\nconst filterNavigationByAuthority = (\n    navTree: NavigationTree[],\n    userAuthority: string[],\n): NavigationTree[] => {\n    return navTree.reduce((acc: NavigationTree[], nav) => {\n        // Verifica se deve excluir o item quando o usuário possui alguma funcionalidade específica\n        if (nav.excludeWhenHasPaths && nav.excludeWhenHasPaths.length > 0) {\n            const shouldExclude = nav.excludeWhenHasPaths.some((path) =>\n                userAuthority.includes(path),\n            )\n            if (shouldExclude) {\n                return acc\n            }\n        }\n\n        if (nav.subMenu && nav.subMenu.length > 0) {\n            const filteredSubMenu = filterNavigationByAuthority(\n                nav.subMenu,\n                userAuthority,\n            )\n            if (filteredSubMenu.length > 0) {\n                acc.push({ ...nav, subMenu: filteredSubMenu })\n            }\n        } else {\n            if ((nav.path && userAuthority.includes(nav.path)) || !nav.path) {\n                acc.push(nav)\n            }\n        }\n        return acc\n    }, [])\n}\n\nconst compareNavigationOrder = (a: NavigationTree, b: NavigationTree) => {\n    const orderA = a.sortOrder ?? Number.MAX_SAFE_INTEGER\n    const orderB = b.sortOrder ?? Number.MAX_SAFE_INTEGER\n\n    if (orderA !== orderB) {\n        return orderA - orderB\n    }\n\n    const titleCompare = a.title.localeCompare(b.title, 'pt-BR')\n\n    if (titleCompare !== 0) {\n        return titleCompare\n    }\n\n    return a.key.localeCompare(b.key, 'pt-BR')\n}\n\nconst sortNavigationNodeList = (navTree: NavigationTree[]): NavigationTree[] =>\n    [...navTree].sort(compareNavigationOrder)\n\nconst sortNavigationRecursively = (\n    navTree: NavigationTree[],\n): NavigationTree[] => {\n    return sortNavigationNodeList(navTree)\n        .map((nav) => ({\n            ...nav,\n            subMenu: nav.subMenu\n                ? sortNavigationRecursively(nav.subMenu)\n                : nav.subMenu,\n        }))\n}\n\nconst VerticalMenuContent = (props: VerticalMenuContentProps) => {\n    const {\n        collapsed,\n        routeKey,\n        navigationTree = [],\n        onMenuItemClick,\n        direction = themeConfig.direction,\n        translationSetup,\n        userAuthority,\n        linkRenderer,\n    } = props\n\n    const { t } = useTranslation(!translationSetup)\n    const [defaulExpandKey, setDefaulExpandKey] = useState<string[]>([])\n\n    const filteredNavigationTree = useMemo(() => {\n        const filteredTree = filterNavigationByAuthority(\n            navigationTree,\n            userAuthority,\n        )\n\n        return sortNavigationRecursively(filteredTree)\n    }, [navigationTree, userAuthority])\n\n    const { activedRoute } = useMenuActive(filteredNavigationTree, routeKey)\n\n    useEffect(() => {\n        if (activedRoute?.key) {\n            const ancestors = findAncestorKeys(\n                filteredNavigationTree,\n                activedRoute.key,\n            )\n            setDefaulExpandKey(ancestors ?? [])\n        }\n    }, [activedRoute?.key, filteredNavigationTree])\n\n    const handleLinkClick = () => {\n        onMenuItemClick?.()\n    }\n\n    const renderNavigation = (\n        navTree: NavigationTree[],\n        cascade: number = 0,\n        indent?: boolean,\n    ) => {\n        const nextCascade = cascade + 1\n        const orderedNavTree = sortNavigationNodeList(navTree)\n\n        return (\n            <>\n                {orderedNavTree.map((nav) => (\n                    <Fragment key={nav.key}>\n                        {nav.type === NAV_ITEM_TYPE_ITEM && (\n                            <VerticalSingleMenuItem\n                                key={nav.key}\n                                currentKey={activedRoute?.key}\n                                parentKeys={defaulExpandKey}\n                                nav={nav}\n                                sideCollapsed={collapsed}\n                                direction={direction}\n                                indent={indent}\n                                renderAsIcon={cascade <= 0}\n                                showIcon={cascade <= 0}\n                                userAuthority={userAuthority}\n                                showTitle={\n                                    nav.forceShowTitle ??\n                                    (collapsed ? cascade >= 1 : cascade <= 1)\n                                }\n                                t={t as TraslationFn}\n                                onLinkClick={handleLinkClick}\n                                linkRenderer={linkRenderer}\n                            />\n                        )}\n                        {nav.type === NAV_ITEM_TYPE_COLLAPSE && (\n                            <VerticalCollapsedMenuItem\n                                key={nav.key}\n                                currentKey={activedRoute?.key}\n                                parentKeys={defaulExpandKey}\n                                nav={nav}\n                                sideCollapsed={collapsed}\n                                direction={direction}\n                                indent={nextCascade >= 2}\n                                dotIndent={nextCascade >= 2}\n                                renderAsIcon={nextCascade <= 1}\n                                userAuthority={userAuthority}\n                                t={t as TraslationFn}\n                                onLinkClick={onMenuItemClick}\n                            >\n                                {nav.subMenu &&\n                                    nav.subMenu.length > 0 &&\n                                    renderNavigation(\n                                        nav.subMenu,\n                                        nextCascade,\n                                        true,\n                                    )}\n                            </VerticalCollapsedMenuItem>\n                        )}\n                        {nav.type === NAV_ITEM_TYPE_TITLE && (\n                            <MenuGroup\n                                key={nav.key}\n                                label={t(nav.translateKey) || nav.title}\n                            >\n                                {nav.subMenu &&\n                                    nav.subMenu.length > 0 &&\n                                    renderNavigation(\n                                        nav.subMenu,\n                                        cascade,\n                                        false,\n                                    )}\n                            </MenuGroup>\n                        )}\n                    </Fragment>\n                ))}\n            </>\n        )\n    }\n\n    return (\n        <Menu\n            className=\"px-4 pb-4\"\n            sideCollapsed={collapsed}\n            defaultActiveKeys={activedRoute?.key ? [activedRoute.key] : []}\n            defaultExpandedKeys={defaulExpandKey}\n            defaultCollapseActiveKeys={\n                activedRoute?.parentKey ? [activedRoute.parentKey] : []\n            }\n        >\n            {renderNavigation(filteredNavigationTree, 0)}\n        </Menu>\n    )\n}\n\nexport default VerticalMenuContent\n"],"names":["Fragment"],"mappings":"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"}

package/dist/@ecme/components/template/VerticalMenuContent/VerticalMenuContent.stories.js

@@ -0,0 +1,290 @@
+import { jsx } from "react/jsx-runtime";
+import { BrowserRouter } from "react-router-dom";
+import VerticalMenuContent from "./VerticalMenuContent.js";
+import ticketNavigationConfig from "../../../../base/configs/navigation.config/modules.submenu/Ticket/ticket.navigation.js";
+import { NAV_ITEM_TYPE_TITLE, NAV_ITEM_TYPE_ITEM, NAV_ITEM_TYPE_COLLAPSE } from "../../../constants/navigation.constant.js";
+const collectAuthorityPaths = (navTree) => {
+  return navTree.reduce((acc, node) => {
+    if (node.path) {
+      acc.push(node.path);
+    }
+    if (node.subMenu?.length) {
+      acc.push(...collectAuthorityPaths(node.subMenu));
+    }
+    return acc;
+  }, []);
+};
+const ticketAuthority = Array.from(
+  new Set(collectAuthorityPaths(ticketNavigationConfig))
+);
+const ticketSubmenuAllExpanded = ticketNavigationConfig.map(
+  (menu) => {
+    if (menu.key !== "ticket") {
+      return menu;
+    }
+    return {
+      ...menu,
+      subMenu: menu.subMenu.map((subMenu) => {
+        if (subMenu.key === "ticket.relatorios" || subMenu.key === "ticket.cadastros") {
+          return {
+            ...subMenu,
+            type: NAV_ITEM_TYPE_TITLE
+          };
+        }
+        return subMenu;
+      })
+    };
+  }
+);
+const mockNavigationTree = [
+  {
+    key: "inicio",
+    path: "/inicio",
+    title: "Início",
+    translateKey: "nav.inicio",
+    icon: "",
+    type: NAV_ITEM_TYPE_ITEM,
+    authority: ["/inicio"],
+    subMenu: []
+  },
+  {
+    key: "cadastros",
+    path: "",
+    title: "Cadastros",
+    translateKey: "nav.cadastros",
+    icon: "",
+    type: NAV_ITEM_TYPE_COLLAPSE,
+    authority: ["/cadastros"],
+    subMenu: [
+      {
+        key: "clientes",
+        path: "/cadastros/clientes",
+        title: "Clientes",
+        translateKey: "nav.clientes",
+        icon: "",
+        type: NAV_ITEM_TYPE_ITEM,
+        authority: ["/cadastros/clientes"],
+        subMenu: []
+      },
+      {
+        key: "fornecedores",
+        path: "/cadastros/fornecedores",
+        title: "Fornecedores",
+        translateKey: "nav.fornecedores",
+        icon: "",
+        type: NAV_ITEM_TYPE_ITEM,
+        authority: ["/cadastros/fornecedores"],
+        subMenu: []
+      }
+    ]
+  },
+  {
+    key: "relatorios",
+    path: "/relatorios",
+    title: "Relatórios",
+    translateKey: "nav.relatorios",
+    icon: "ChartBarIcon",
+    type: NAV_ITEM_TYPE_ITEM,
+    authority: ["/relatorios"],
+    subMenu: []
+  },
+  {
+    key: "configuracoes",
+    path: "",
+    title: "Configurações",
+    translateKey: "nav.configuracoes",
+    icon: "",
+    type: NAV_ITEM_TYPE_COLLAPSE,
+    authority: ["/configuracoes"],
+    subMenu: [
+      {
+        key: "perfil",
+        path: "/configuracoes/perfil",
+        title: "Perfil",
+        translateKey: "nav.perfil",
+        icon: "",
+        type: NAV_ITEM_TYPE_ITEM,
+        authority: ["/configuracoes/perfil"],
+        subMenu: []
+      },
+      {
+        key: "integracoes",
+        path: "",
+        title: "Integrações",
+        translateKey: "nav.integracoes",
+        icon: "",
+        type: NAV_ITEM_TYPE_COLLAPSE,
+        authority: ["/configuracoes/integracoes"],
+        subMenu: [
+          {
+            key: "webhooks",
+            path: "/configuracoes/integracoes/webhooks",
+            title: "Webhooks",
+            translateKey: "nav.webhooks",
+            icon: "WebhookIcon",
+            type: NAV_ITEM_TYPE_ITEM,
+            authority: ["/configuracoes/integracoes/webhooks"],
+            subMenu: []
+          },
+          {
+            key: "lorem.ipsum",
+            path: "/configuracoes/integracoes/lorem-ipsum",
+            title: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
+            translateKey: "nav.loremIpsum",
+            icon: "LoremIpsumIcon",
+            type: NAV_ITEM_TYPE_ITEM,
+            authority: ["/configuracoes/integracoes/lorem-ipsum"],
+            subMenu: []
+          }
+        ]
+      }
+    ]
+  }
+];
+const allUserAuthority = [
+  "/inicio",
+  "/cadastros/clientes",
+  "/cadastros/fornecedores",
+  "/relatorios",
+  "/configuracoes/perfil",
+  "/configuracoes/integracoes/webhooks",
+  "/configuracoes/integracoes/lorem-ipsum"
+];
+const meta = {
+  title: "@ecme/Template/VerticalMenuContent",
+  component: VerticalMenuContent,
+  parameters: {
+    layout: "padded"
+  },
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => /* @__PURE__ */ jsx(BrowserRouter, { children: /* @__PURE__ */ jsx(Story, {}) })
+  ],
+  argTypes: {
+    collapsed: {
+      control: "boolean"
+    },
+    direction: {
+      control: { type: "select" },
+      options: ["ltr", "rtl"]
+    },
+    routeKey: {
+      control: "text"
+    }
+  }
+};
+const Default = {
+  args: {
+    collapsed: false,
+    routeKey: "/inicio",
+    navigationTree: mockNavigationTree,
+    userAuthority: allUserAuthority,
+    direction: "ltr",
+    translationSetup: true
+  }
+};
+const Collapsed = {
+  args: {
+    collapsed: true,
+    routeKey: "/cadastros/clientes",
+    navigationTree: mockNavigationTree,
+    userAuthority: allUserAuthority,
+    direction: "ltr",
+    translationSetup: true
+  }
+};
+const WithExpandedMenu = {
+  args: {
+    collapsed: false,
+    routeKey: "/configuracoes/integracoes/webhooks",
+    navigationTree: mockNavigationTree,
+    userAuthority: allUserAuthority,
+    direction: "ltr",
+    translationSetup: true
+  }
+};
+const LimitedAuthority = {
+  args: {
+    collapsed: false,
+    routeKey: "/inicio",
+    navigationTree: mockNavigationTree,
+    userAuthority: ["/inicio", "/relatorios"],
+    direction: "ltr",
+    translationSetup: true
+  }
+};
+const RTLDirection = {
+  args: {
+    collapsed: false,
+    routeKey: "/inicio",
+    navigationTree: mockNavigationTree,
+    userAuthority: allUserAuthority,
+    direction: "rtl",
+    translationSetup: true
+  }
+};
+const MinimalNavigation = {
+  args: {
+    collapsed: false,
+    routeKey: "/inicio",
+    navigationTree: [
+      {
+        key: "inicio",
+        path: "/inicio",
+        title: "Início",
+        translateKey: "nav.inicio",
+        icon: "",
+        type: NAV_ITEM_TYPE_ITEM,
+        authority: ["/inicio"],
+        subMenu: []
+      }
+    ],
+    userAuthority: ["/inicio"],
+    direction: "ltr",
+    translationSetup: true
+  }
+};
+const WithMenuClick = {
+  args: {
+    collapsed: false,
+    routeKey: "/inicio",
+    navigationTree: mockNavigationTree,
+    userAuthority: allUserAuthority,
+    direction: "ltr",
+    translationSetup: true,
+    onMenuItemClick: () => alert("Menu item clicked!")
+  }
+};
+const TicketSubmenu = {
+  args: {
+    collapsed: false,
+    routeKey: "ticket",
+    navigationTree: ticketNavigationConfig,
+    userAuthority: ticketAuthority,
+    direction: "ltr",
+    translationSetup: true
+  }
+};
+const TicketSubmenuSortOrderStable = {
+  args: {
+    collapsed: false,
+    routeKey: "ticket",
+    navigationTree: ticketSubmenuAllExpanded,
+    userAuthority: ticketAuthority,
+    direction: "ltr",
+    translationSetup: true
+  }
+};
+export {
+  Collapsed,
+  Default,
+  LimitedAuthority,
+  MinimalNavigation,
+  RTLDirection,
+  TicketSubmenu,
+  TicketSubmenuSortOrderStable,
+  WithExpandedMenu,
+  WithMenuClick,
+  meta as default
+};
+//# sourceMappingURL=VerticalMenuContent.stories.js.map

package/dist/@ecme/components/template/VerticalMenuContent/VerticalMenuContent.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VerticalMenuContent.stories.js","sources":["../../../../../lib/@ecme/components/template/VerticalMenuContent/VerticalMenuContent.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from '@storybook/react'\nimport { BrowserRouter } from 'react-router-dom'\nimport VerticalMenuContent from './VerticalMenuContent'\nimport type { NavigationTree } from '@/@types/navigation'\nimport ticketNavigationConfig from '@base/configs/navigation.config/modules.submenu/Ticket/ticket.navigation'\nimport {\n    NAV_ITEM_TYPE_COLLAPSE,\n    NAV_ITEM_TYPE_ITEM,\n    NAV_ITEM_TYPE_TITLE,\n} from '@/constants/navigation.constant'\n\nconst collectAuthorityPaths = (navTree: NavigationTree[]): string[] => {\n    return navTree.reduce((acc: string[], node) => {\n        if (node.path) {\n            acc.push(node.path)\n        }\n\n        if (node.subMenu?.length) {\n            acc.push(...collectAuthorityPaths(node.subMenu))\n        }\n\n        return acc\n    }, [])\n}\n\nconst ticketAuthority = Array.from(\n    new Set(collectAuthorityPaths(ticketNavigationConfig)),\n)\n\nconst ticketSubmenuAllExpanded: NavigationTree[] = ticketNavigationConfig.map(\n    (menu) => {\n        if (menu.key !== 'ticket') {\n            return menu\n        }\n\n        return {\n            ...menu,\n            subMenu: menu.subMenu.map((subMenu) => {\n                if (\n                    subMenu.key === 'ticket.relatorios' ||\n                    subMenu.key === 'ticket.cadastros'\n                ) {\n                    return {\n                        ...subMenu,\n                        type: NAV_ITEM_TYPE_TITLE,\n                    }\n                }\n\n                return subMenu\n            }),\n        }\n    },\n)\n\nconst mockNavigationTree: NavigationTree[] = [\n    {\n        key: 'inicio',\n        path: '/inicio',\n        title: 'Início',\n        translateKey: 'nav.inicio',\n        icon: '',\n        type: NAV_ITEM_TYPE_ITEM,\n        authority: ['/inicio'],\n        subMenu: [],\n    },\n    {\n        key: 'cadastros',\n        path: '',\n        title: 'Cadastros',\n        translateKey: 'nav.cadastros',\n        icon: '',\n        type: NAV_ITEM_TYPE_COLLAPSE,\n        authority: ['/cadastros'],\n        subMenu: [\n            {\n                key: 'clientes',\n                path: '/cadastros/clientes',\n                title: 'Clientes',\n                translateKey: 'nav.clientes',\n                icon: '',\n                type: NAV_ITEM_TYPE_ITEM,\n                authority: ['/cadastros/clientes'],\n                subMenu: [],\n            },\n            {\n                key: 'fornecedores',\n                path: '/cadastros/fornecedores',\n                title: 'Fornecedores',\n                translateKey: 'nav.fornecedores',\n                icon: '',\n                type: NAV_ITEM_TYPE_ITEM,\n                authority: ['/cadastros/fornecedores'],\n                subMenu: [],\n            },\n        ],\n    },\n    {\n        key: 'relatorios',\n        path: '/relatorios',\n        title: 'Relatórios',\n        translateKey: 'nav.relatorios',\n        icon: 'ChartBarIcon',\n        type: NAV_ITEM_TYPE_ITEM,\n        authority: ['/relatorios'],\n        subMenu: [],\n    },\n    {\n        key: 'configuracoes',\n        path: '',\n        title: 'Configurações',\n        translateKey: 'nav.configuracoes',\n        icon: '',\n        type: NAV_ITEM_TYPE_COLLAPSE,\n        authority: ['/configuracoes'],\n        subMenu: [\n            {\n                key: 'perfil',\n                path: '/configuracoes/perfil',\n                title: 'Perfil',\n                translateKey: 'nav.perfil',\n                icon: '',\n                type: NAV_ITEM_TYPE_ITEM,\n                authority: ['/configuracoes/perfil'],\n                subMenu: [],\n            },\n            {\n                key: 'integracoes',\n                path: '',\n                title: 'Integrações',\n                translateKey: 'nav.integracoes',\n                icon: '',\n                type: NAV_ITEM_TYPE_COLLAPSE,\n                authority: ['/configuracoes/integracoes'],\n                subMenu: [\n                    {\n                        key: 'webhooks',\n                        path: '/configuracoes/integracoes/webhooks',\n                        title: 'Webhooks',\n                        translateKey: 'nav.webhooks',\n                        icon: 'WebhookIcon',\n                        type: NAV_ITEM_TYPE_ITEM,\n                        authority: ['/configuracoes/integracoes/webhooks'],\n                        subMenu: [],\n                    },\n                    {\n                        key: 'lorem.ipsum',\n                        path: '/configuracoes/integracoes/lorem-ipsum',\n                        title: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',\n                        translateKey: 'nav.loremIpsum',\n                        icon: 'LoremIpsumIcon',\n                        type: NAV_ITEM_TYPE_ITEM,\n                        authority: ['/configuracoes/integracoes/lorem-ipsum'],\n                        subMenu: [],\n                    },\n                ],\n            },\n        ],\n    },\n]\n\nconst allUserAuthority = [\n    '/inicio',\n    '/cadastros/clientes',\n    '/cadastros/fornecedores',\n    '/relatorios',\n    '/configuracoes/perfil',\n    '/configuracoes/integracoes/webhooks',\n    '/configuracoes/integracoes/lorem-ipsum',\n]\n\nconst meta: Meta<typeof VerticalMenuContent> = {\n    title: '@ecme/Template/VerticalMenuContent',\n    component: VerticalMenuContent,\n    parameters: {\n        layout: 'padded',\n    },\n    tags: ['autodocs'],\n    decorators: [\n        (Story) => (\n            <BrowserRouter>\n                <Story />\n            </BrowserRouter>\n        ),\n    ],\n    argTypes: {\n        collapsed: {\n            control: 'boolean',\n        },\n        direction: {\n            control: { type: 'select' },\n            options: ['ltr', 'rtl'],\n        },\n        routeKey: {\n            control: 'text',\n        },\n    },\n}\n\nexport default meta\ntype TStory = StoryObj<typeof VerticalMenuContent>\n\nexport const Default: TStory = {\n    args: {\n        collapsed: false,\n        routeKey: '/inicio',\n        navigationTree: mockNavigationTree,\n        userAuthority: allUserAuthority,\n        direction: 'ltr',\n        translationSetup: true,\n    },\n}\n\nexport const Collapsed: TStory = {\n    args: {\n        collapsed: true,\n        routeKey: '/cadastros/clientes',\n        navigationTree: mockNavigationTree,\n        userAuthority: allUserAuthority,\n        direction: 'ltr',\n        translationSetup: true,\n    },\n}\n\nexport const WithExpandedMenu: TStory = {\n    args: {\n        collapsed: false,\n        routeKey: '/configuracoes/integracoes/webhooks',\n        navigationTree: mockNavigationTree,\n        userAuthority: allUserAuthority,\n        direction: 'ltr',\n        translationSetup: true,\n    },\n}\n\nexport const LimitedAuthority: TStory = {\n    args: {\n        collapsed: false,\n        routeKey: '/inicio',\n        navigationTree: mockNavigationTree,\n        userAuthority: ['/inicio', '/relatorios'],\n        direction: 'ltr',\n        translationSetup: true,\n    },\n}\n\nexport const RTLDirection: TStory = {\n    args: {\n        collapsed: false,\n        routeKey: '/inicio',\n        navigationTree: mockNavigationTree,\n        userAuthority: allUserAuthority,\n        direction: 'rtl',\n        translationSetup: true,\n    },\n}\n\nexport const MinimalNavigation: TStory = {\n    args: {\n        collapsed: false,\n        routeKey: '/inicio',\n        navigationTree: [\n            {\n                key: 'inicio',\n                path: '/inicio',\n                title: 'Início',\n                translateKey: 'nav.inicio',\n                icon: '',\n                type: NAV_ITEM_TYPE_ITEM,\n                authority: ['/inicio'],\n                subMenu: [],\n            },\n        ],\n        userAuthority: ['/inicio'],\n        direction: 'ltr',\n        translationSetup: true,\n    },\n}\n\nexport const WithMenuClick: TStory = {\n    args: {\n        collapsed: false,\n        routeKey: '/inicio',\n        navigationTree: mockNavigationTree,\n        userAuthority: allUserAuthority,\n        direction: 'ltr',\n        translationSetup: true,\n        onMenuItemClick: () => alert('Menu item clicked!'),\n    },\n}\n\nexport const TicketSubmenu: TStory = {\n    args: {\n        collapsed: false,\n        routeKey: 'ticket',\n        navigationTree: ticketNavigationConfig,\n        userAuthority: ticketAuthority,\n        direction: 'ltr',\n        translationSetup: true,\n    },\n}\n\nexport const TicketSubmenuSortOrderStable: TStory = {\n    args: {\n        collapsed: false,\n        routeKey: 'ticket',\n        navigationTree: ticketSubmenuAllExpanded,\n        userAuthority: ticketAuthority,\n        direction: 'ltr',\n        translationSetup: true,\n    },\n}\n"],"names":[],"mappings":"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"}

package/dist/@ecme/components/template/VerticalMenuContent/VerticalSingleMenuItem.js

@@ -1,45 +1,12 @@
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import "../../ui/Tooltip/index.js";
 import { Menu } from "../../ui/Menu/index.js";
+import "../../ui/ScrollBar/index.js";
 import VerticalMenuIcon from "./VerticalMenuIcon.js";
 import { Link } from "react-router-dom";
-import { Dropdown } from "../../ui/Dropdown/index.js";
+import ScrollBar from "../../ui/ScrollBar/ScrollBar.js";
 import Tooltip from "../../ui/Tooltip/Tooltip.js";
 const { MenuItem } = Menu;
-const CollapsedItem = ({
-  nav,
-  children,
-  direction,
-  renderAsIcon,
-  onLinkClick,
-  userAuthority,
-  t,
-  currentKey,
-  linkRenderer
-}) => {
-  const linkContent = /* @__PURE__ */ jsx("span", { children: t(nav.translateKey, nav.title) });
-  const renderLink = () => {
-    if (linkRenderer) {
-      return linkRenderer(nav, linkContent);
-    }
-    return /* @__PURE__ */ jsx(
-      Link,
-      {
-        id: nav.path,
-        className: "flex h-full w-full items-center outline-none",
-        to: nav.path,
-        target: nav.isExternalLink ? "_blank" : "",
-        onClick: () => onLinkClick?.({
-          key: nav.key,
-          title: nav.title,
-          path: nav.path
-        }),
-        children: linkContent
-      }
-    );
-  };
-  return /* @__PURE__ */ jsx(Dropdown.Item, { active: currentKey === nav.key, children: nav.path ? renderLink() : /* @__PURE__ */ jsx("span", { children: t(nav.translateKey, nav.title) }) });
-};
 const DefaultItem = (props) => {
   const {
     nav,
@@ -47,13 +14,24 @@ const DefaultItem = (props) => {
     showTitle,
     indent,
     showIcon = true,
-    userAuthority,
     t,
     linkRenderer
   } = props;
-  const linkContent = /* @__PURE__ */ jsxs(Fragment, { children: [
+  const translatedTitle = t(nav.translateKey, nav.title);
+  const renderItemContent = (titleClassName) => /* @__PURE__ */ jsxs(Fragment, { children: [
     showIcon && /* @__PURE__ */ jsx(VerticalMenuIcon, { icon: nav.icon }),
-    showTitle && /* @__PURE__ */ jsx("span", { children: t(nav.translateKey, nav.title) })
+    showTitle && /* @__PURE__ */ jsx("span", { className: titleClassName, children: translatedTitle })
+  ] });
+  const linkContent = /* @__PURE__ */ jsxs("span", { className: "relative flex min-w-0 flex-1 items-center gap-2", children: [
+    /* @__PURE__ */ jsx("span", { className: "flex min-w-0 flex-1 items-center gap-2 overflow-hidden", children: renderItemContent("truncate") }),
+    showTitle && /* @__PURE__ */ jsx("div", { className: "w-100 absolute -left-3 top-1/2 z-20 hidden min-w-[calc(100%+1.5rem)] -translate-y-1/2 group-hover/item:block group-focus-visible/item:block", children: /* @__PURE__ */ jsx(
+      ScrollBar,
+      {
+        autoHide: true,
+        className: "max-h-16 rounded-lg bg-gray-100 text-gray-900 dark:bg-gray-700 dark:text-gray-100",
+        children: /* @__PURE__ */ jsx("div", { className: "flex h-full w-max min-w-full items-center gap-2 whitespace-nowrap rounded-lg px-3 font-semibold", children: renderItemContent() })
+      }
+    ) })
   ] });
   const renderLink = () => {
     if (linkRenderer) {
@@ -63,7 +41,7 @@ const DefaultItem = (props) => {
       Link,
       {
         to: nav.path,
-        className: "flex h-full w-full items-center gap-2",
+        className: "group/item relative flex w-full min-w-0 items-center gap-2",
         target: nav.isExternalLink ? "_blank" : "",
         onClick: () => onLinkClick?.({
           key: nav.key,