@orbe-agro/client-core-prod 5.6.136 → 5.6.155

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

@@ -1,8 +1,7 @@
 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";
+import modulesNavigationConfig from "../../../../base/configs/navigation.config/modules.navigation.js";
 const collectAuthorityPaths = (navTree) => {
   return navTree.reduce((acc, node) => {
     if (node.path) {
@@ -14,142 +13,9 @@ const collectAuthorityPaths = (navTree) => {
     return acc;
   }, []);
 };
-const ticketAuthority = Array.from(
-  new Set(collectAuthorityPaths(ticketNavigationConfig))
+const allAuthority = Array.from(
+  new Set(collectAuthorityPaths(modulesNavigationConfig))
 );
-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,
@@ -176,115 +42,18 @@ const meta = {
 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"],
+    routeKey: "modules",
+    navigationTree: modulesNavigationConfig,
+    userAuthority: allAuthority,
     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
-  }
+  },
+  decorators: [
+    (Story) => /* @__PURE__ */ jsx("div", { style: { maxWidth: "25vw" }, children: /* @__PURE__ */ jsx(Story, {}) })
+  ]
 };
 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

@@ -1 +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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"}
+{"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 modulesNavigationConfig from '@base/configs/navigation.config/modules.navigation'\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 allAuthority = Array.from(\n    new Set(collectAuthorityPaths(modulesNavigationConfig)),\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: 'modules',\n        navigationTree: modulesNavigationConfig,\n        userAuthority: allAuthority,\n        direction: 'ltr',\n        translationSetup: true,\n    },\n    decorators: [\n        (Story) => (\n            <div style={{ maxWidth: '25vw' }}>\n                <Story />\n            </div>\n        ),\n    ],\n}\n"],"names":[],"mappings":";;;;AAMA,MAAM,wBAAwB,CAAC,YAAwC;AACnE,SAAO,QAAQ,OAAO,CAAC,KAAe,SAAS;AAC3C,QAAI,KAAK,MAAM;AACX,UAAI,KAAK,KAAK,IAAI;AAAA,IACtB;AAEA,QAAI,KAAK,SAAS,QAAQ;AACtB,UAAI,KAAK,GAAG,sBAAsB,KAAK,OAAO,CAAC;AAAA,IACnD;AAEA,WAAO;AAAA,EACX,GAAG,CAAA,CAAE;AACT;AAEA,MAAM,eAAe,MAAM;AAAA,EACvB,IAAI,IAAI,sBAAsB,uBAAuB,CAAC;AAC1D;AAEA,MAAM,OAAyC;AAAA,EAC3C,OAAO;AAAA,EACP,WAAW;AAAA,EACX,YAAY;AAAA,IACR,QAAQ;AAAA,EAAA;AAAA,EAEZ,MAAM,CAAC,UAAU;AAAA,EACjB,YAAY;AAAA,IACR,CAAC,UACG,oBAAC,eAAA,EACG,UAAA,oBAAC,SAAM,EAAA,CACX;AAAA,EAAA;AAAA,EAGR,UAAU;AAAA,IACN,WAAW;AAAA,MACP,SAAS;AAAA,IAAA;AAAA,IAEb,WAAW;AAAA,MACP,SAAS,EAAE,MAAM,SAAA;AAAA,MACjB,SAAS,CAAC,OAAO,KAAK;AAAA,IAAA;AAAA,IAE1B,UAAU;AAAA,MACN,SAAS;AAAA,IAAA;AAAA,EACb;AAER;AAKO,MAAM,UAAkB;AAAA,EAC3B,MAAM;AAAA,IACF,WAAW;AAAA,IACX,UAAU;AAAA,IACV,gBAAgB;AAAA,IAChB,eAAe;AAAA,IACf,WAAW;AAAA,IACX,kBAAkB;AAAA,EAAA;AAAA,EAEtB,YAAY;AAAA,IACR,CAAC,UACG,oBAAC,OAAA,EAAI,OAAO,EAAE,UAAU,OAAA,GACpB,UAAA,oBAAC,OAAA,CAAA,CAAM,EAAA,CACX;AAAA,EAAA;AAGZ;"}

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

@@ -1,10 +1,8 @@
 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 ScrollBar from "../../ui/ScrollBar/ScrollBar.js";
 import Tooltip from "../../ui/Tooltip/Tooltip.js";
 const { MenuItem } = Menu;
 const DefaultItem = (props) => {
@@ -17,21 +15,9 @@ const DefaultItem = (props) => {
     t,
     linkRenderer
   } = props;
-  const translatedTitle = t(nav.translateKey, nav.title);
-  const renderItemContent = (titleClassName) => /* @__PURE__ */ jsxs(Fragment, { children: [
+  const linkContent = /* @__PURE__ */ jsxs(Fragment, { children: [
     showIcon && /* @__PURE__ */ jsx(VerticalMenuIcon, { icon: nav.icon }),
-    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() })
-      }
-    ) })
+    showTitle && /* @__PURE__ */ jsx("span", { className: "whitespace-normal", children: t(nav.translateKey, nav.title) })
   ] });
   const renderLink = () => {
     if (linkRenderer) {
@@ -41,7 +27,7 @@ const DefaultItem = (props) => {
       Link,
       {
         to: nav.path,
-        className: "group/item relative flex w-full min-w-0 items-center gap-2",
+        className: "flex h-full w-full items-center gap-2",
         target: nav.isExternalLink ? "_blank" : "",
         onClick: () => onLinkClick?.({
           key: nav.key,

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

@@ -1 +1 @@
-{"version":3,"file":"VerticalSingleMenuItem.js","sources":["../../../../../lib/@ecme/components/template/VerticalMenuContent/VerticalSingleMenuItem.tsx"],"sourcesContent":["import Tooltip from '@/components/ui/Tooltip'\nimport Menu from '@/components/ui/Menu'\nimport ScrollBar from '@/components/ui/ScrollBar'\nimport VerticalMenuIcon from './VerticalMenuIcon'\nimport { Link } from 'react-router-dom'\nimport type { CommonProps } from '@/@types/common'\nimport type { Direction } from '@/@types/theme'\nimport type { NavigationTree } from '@/@types/navigation'\n\nconst { MenuItem } = Menu\n\ntype LinkRenderer = (\n    nav: NavigationTree,\n    children: React.ReactNode,\n) => React.ReactNode\n\ninterface CollapsedItemProps extends CommonProps {\n    nav: NavigationTree\n    direction?: Direction\n    linkRenderer?: LinkRenderer\n    onLinkClick?: (link: { key: string; title: string; path: string }) => void\n    t: (\n        key: string,\n        fallback?: string | Record<string, string | number>,\n    ) => string\n    renderAsIcon?: boolean\n    userAuthority: string[]\n    currentKey?: string\n    parentKeys?: string[]\n}\n\ninterface DefaultItemProps {\n    nav: NavigationTree\n    onLinkClick?: (link: { key: string; title: string; path: string }) => void\n    sideCollapsed?: boolean\n    t: (\n        key: string,\n        fallback?: string | Record<string, string | number>,\n    ) => string\n    indent?: boolean\n    userAuthority: string[]\n    showIcon?: boolean\n    showTitle?: boolean\n    linkRenderer?: LinkRenderer\n}\n\ninterface VerticalMenuItemProps extends CollapsedItemProps, DefaultItemProps {}\n\nconst DefaultItem = (props: DefaultItemProps) => {\n    const {\n        nav,\n        onLinkClick,\n        showTitle,\n        indent,\n        showIcon = true,\n        t,\n        linkRenderer,\n    } = props\n\n    const translatedTitle = t(nav.translateKey, nav.title)\n\n    const renderItemContent = (titleClassName?: string) => (\n        <>\n            {showIcon && <VerticalMenuIcon icon={nav.icon} />}\n            {showTitle && (\n                <span className={titleClassName}>{translatedTitle}</span>\n            )}\n        </>\n    )\n\n    const linkContent = (\n        <span className=\"relative flex min-w-0 flex-1 items-center gap-2\">\n            <span className=\"flex min-w-0 flex-1 items-center gap-2 overflow-hidden\">\n                {renderItemContent('truncate')}\n            </span>\n            {showTitle && (\n                <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\">\n                    <ScrollBar\n                        autoHide\n                        className=\"max-h-16 rounded-lg bg-gray-100 text-gray-900 dark:bg-gray-700 dark:text-gray-100\"\n                    >\n                        <div className=\"flex h-full w-max min-w-full items-center gap-2 whitespace-nowrap rounded-lg px-3 font-semibold\">\n                            {renderItemContent()}\n                        </div>\n                    </ScrollBar>\n                </div>\n            )}\n        </span>\n    )\n\n    const renderLink = () => {\n        if (linkRenderer) {\n            return linkRenderer(nav, linkContent)\n        }\n\n        return (\n            <Link\n                to={nav.path}\n                className=\"group/item relative flex w-full min-w-0 items-center gap-2\"\n                target={nav.isExternalLink ? '_blank' : ''}\n                onClick={() =>\n                    onLinkClick?.({\n                        key: nav.key,\n                        title: nav.title,\n                        path: nav.path,\n                    })\n                }\n            >\n                {linkContent}\n            </Link>\n        )\n    }\n\n    return (\n        <MenuItem key={nav.key} eventKey={nav.key} dotIndent={indent}>\n            {renderLink()}\n        </MenuItem>\n    )\n}\nconst VerticalSingleMenuItem = (props: VerticalMenuItemProps) => {\n    const { sideCollapsed, nav, t, userAuthority, onLinkClick, linkRenderer } =\n        props\n\n    if (sideCollapsed) {\n        return (\n            <Tooltip\n                title={t(nav.translateKey, nav.title)}\n                placement={props.direction === 'rtl' ? 'left' : 'right'}\n            >\n                <DefaultItem\n                    nav={nav}\n                    onLinkClick={onLinkClick}\n                    t={t}\n                    userAuthority={userAuthority}\n                    linkRenderer={linkRenderer}\n                    showIcon={true}\n                    showTitle={false}\n                    indent={props.indent}\n                />\n            </Tooltip>\n        )\n    }\n\n    return (\n        <DefaultItem\n            nav={nav}\n            onLinkClick={onLinkClick}\n            t={t}\n            userAuthority={userAuthority}\n            linkRenderer={linkRenderer}\n            showIcon={true}\n            showTitle={true}\n            indent={props.indent}\n        />\n    )\n}\nexport default VerticalSingleMenuItem\n"],"names":[],"mappings":";;;;;;;;AASA,MAAM,EAAE,aAAa;AAuCrB,MAAM,cAAc,CAAC,UAA4B;AAC7C,QAAM;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA;AAAA,EAAA,IACA;AAEJ,QAAM,kBAAkB,EAAE,IAAI,cAAc,IAAI,KAAK;AAErD,QAAM,oBAAoB,CAAC,mBACvB,qBAAA,UAAA,EACK,UAAA;AAAA,IAAA,YAAY,oBAAC,kBAAA,EAAiB,MAAM,IAAI,MAAM;AAAA,IAC9C,aACG,oBAAC,QAAA,EAAK,WAAW,gBAAiB,UAAA,gBAAA,CAAgB;AAAA,EAAA,GAE1D;AAGJ,QAAM,cACF,qBAAC,QAAA,EAAK,WAAU,mDACZ,UAAA;AAAA,IAAA,oBAAC,QAAA,EAAK,WAAU,0DACX,UAAA,kBAAkB,UAAU,GACjC;AAAA,IACC,aACG,oBAAC,OAAA,EAAI,WAAU,+IACX,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,UAAQ;AAAA,QACR,WAAU;AAAA,QAEV,UAAA,oBAAC,OAAA,EAAI,WAAU,mGACV,8BAAkB,CACvB;AAAA,MAAA;AAAA,IAAA,EACJ,CACJ;AAAA,EAAA,GAER;AAGJ,QAAM,aAAa,MAAM;AACrB,QAAI,cAAc;AACd,aAAO,aAAa,KAAK,WAAW;AAAA,IACxC;AAEA,WACI;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,IAAI,IAAI;AAAA,QACR,WAAU;AAAA,QACV,QAAQ,IAAI,iBAAiB,WAAW;AAAA,QACxC,SAAS,MACL,cAAc;AAAA,UACV,KAAK,IAAI;AAAA,UACT,OAAO,IAAI;AAAA,UACX,MAAM,IAAI;AAAA,QAAA,CACb;AAAA,QAGJ,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGb;AAEA,SACI,oBAAC,UAAA,EAAuB,UAAU,IAAI,KAAK,WAAW,QACjD,UAAA,WAAA,EAAW,GADD,IAAI,GAEnB;AAER;AACA,MAAM,yBAAyB,CAAC,UAAiC;AAC7D,QAAM,EAAE,eAAe,KAAK,GAAG,eAAe,aAAa,iBACvD;AAEJ,MAAI,eAAe;AACf,WACI;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,OAAO,EAAE,IAAI,cAAc,IAAI,KAAK;AAAA,QACpC,WAAW,MAAM,cAAc,QAAQ,SAAS;AAAA,QAEhD,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACG;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA,UAAU;AAAA,YACV,WAAW;AAAA,YACX,QAAQ,MAAM;AAAA,UAAA;AAAA,QAAA;AAAA,MAClB;AAAA,IAAA;AAAA,EAGZ;AAEA,SACI;AAAA,IAAC;AAAA,IAAA;AAAA,MACG;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV,WAAW;AAAA,MACX,QAAQ,MAAM;AAAA,IAAA;AAAA,EAAA;AAG1B;"}
+{"version":3,"file":"VerticalSingleMenuItem.js","sources":["../../../../../lib/@ecme/components/template/VerticalMenuContent/VerticalSingleMenuItem.tsx"],"sourcesContent":["import Tooltip from '@/components/ui/Tooltip'\nimport Menu from '@/components/ui/Menu'\nimport ScrollBar from '@/components/ui/ScrollBar'\nimport VerticalMenuIcon from './VerticalMenuIcon'\nimport { Link } from 'react-router-dom'\nimport type { CommonProps } from '@/@types/common'\nimport type { Direction } from '@/@types/theme'\nimport type { NavigationTree } from '@/@types/navigation'\n\nconst { MenuItem } = Menu\n\ntype LinkRenderer = (\n    nav: NavigationTree,\n    children: React.ReactNode,\n) => React.ReactNode\n\ninterface CollapsedItemProps extends CommonProps {\n    nav: NavigationTree\n    direction?: Direction\n    linkRenderer?: LinkRenderer\n    onLinkClick?: (link: { key: string; title: string; path: string }) => void\n    t: (\n        key: string,\n        fallback?: string | Record<string, string | number>,\n    ) => string\n    renderAsIcon?: boolean\n    userAuthority: string[]\n    currentKey?: string\n    parentKeys?: string[]\n}\n\ninterface DefaultItemProps {\n    nav: NavigationTree\n    onLinkClick?: (link: { key: string; title: string; path: string }) => void\n    sideCollapsed?: boolean\n    t: (\n        key: string,\n        fallback?: string | Record<string, string | number>,\n    ) => string\n    indent?: boolean\n    userAuthority: string[]\n    showIcon?: boolean\n    showTitle?: boolean\n    linkRenderer?: LinkRenderer\n}\n\ninterface VerticalMenuItemProps extends CollapsedItemProps, DefaultItemProps {}\n\nconst DefaultItem = (props: DefaultItemProps) => {\n    const {\n        nav,\n        onLinkClick,\n        showTitle,\n        indent,\n        showIcon = true,\n        t,\n        linkRenderer,\n    } = props\n\n    const linkContent = (\n        <>\n            {showIcon && <VerticalMenuIcon icon={nav.icon} />}\n            {showTitle && (\n                <span className=\"whitespace-normal\">{t(nav.translateKey, nav.title)}</span>\n            )}\n        </>\n    )\n\n    const renderLink = () => {\n        if (linkRenderer) {\n            return linkRenderer(nav, linkContent)\n        }\n\n        return (\n            <Link\n                to={nav.path}\n                className=\"flex h-full w-full items-center gap-2\"\n                target={nav.isExternalLink ? '_blank' : ''}\n                onClick={() =>\n                    onLinkClick?.({\n                        key: nav.key,\n                        title: nav.title,\n                        path: nav.path,\n                    })\n                }\n            >\n                {linkContent}\n            </Link>\n        )\n    }\n\n    return (\n        <MenuItem key={nav.key} eventKey={nav.key} dotIndent={indent}>\n            {renderLink()}\n        </MenuItem>\n    )\n}\nconst VerticalSingleMenuItem = (props: VerticalMenuItemProps) => {\n    const { sideCollapsed, nav, t, userAuthority, onLinkClick, linkRenderer } =\n        props\n\n    if (sideCollapsed) {\n        return (\n            <Tooltip\n                title={t(nav.translateKey, nav.title)}\n                placement={props.direction === 'rtl' ? 'left' : 'right'}\n            >\n                <DefaultItem\n                    nav={nav}\n                    onLinkClick={onLinkClick}\n                    t={t}\n                    userAuthority={userAuthority}\n                    linkRenderer={linkRenderer}\n                    showIcon={true}\n                    showTitle={false}\n                    indent={props.indent}\n                />\n            </Tooltip>\n        )\n    }\n\n    return (\n        <DefaultItem\n            nav={nav}\n            onLinkClick={onLinkClick}\n            t={t}\n            userAuthority={userAuthority}\n            linkRenderer={linkRenderer}\n            showIcon={true}\n            showTitle={true}\n            indent={props.indent}\n        />\n    )\n}\nexport default VerticalSingleMenuItem\n"],"names":[],"mappings":";;;;;;AASA,MAAM,EAAE,aAAa;AAuCrB,MAAM,cAAc,CAAC,UAA4B;AAC7C,QAAM;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA;AAAA,EAAA,IACA;AAEJ,QAAM,cACF,qBAAA,UAAA,EACK,UAAA;AAAA,IAAA,YAAY,oBAAC,kBAAA,EAAiB,MAAM,IAAI,MAAM;AAAA,IAC9C,aACG,oBAAC,QAAA,EAAK,WAAU,qBAAqB,YAAE,IAAI,cAAc,IAAI,KAAK,EAAA,CAAE;AAAA,EAAA,GAE5E;AAGJ,QAAM,aAAa,MAAM;AACrB,QAAI,cAAc;AACd,aAAO,aAAa,KAAK,WAAW;AAAA,IACxC;AAEA,WACI;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,IAAI,IAAI;AAAA,QACR,WAAU;AAAA,QACV,QAAQ,IAAI,iBAAiB,WAAW;AAAA,QACxC,SAAS,MACL,cAAc;AAAA,UACV,KAAK,IAAI;AAAA,UACT,OAAO,IAAI;AAAA,UACX,MAAM,IAAI;AAAA,QAAA,CACb;AAAA,QAGJ,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGb;AAEA,SACI,oBAAC,UAAA,EAAuB,UAAU,IAAI,KAAK,WAAW,QACjD,UAAA,WAAA,EAAW,GADD,IAAI,GAEnB;AAER;AACA,MAAM,yBAAyB,CAAC,UAAiC;AAC7D,QAAM,EAAE,eAAe,KAAK,GAAG,eAAe,aAAa,iBACvD;AAEJ,MAAI,eAAe;AACf,WACI;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,OAAO,EAAE,IAAI,cAAc,IAAI,KAAK;AAAA,QACpC,WAAW,MAAM,cAAc,QAAQ,SAAS;AAAA,QAEhD,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACG;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA,UAAU;AAAA,YACV,WAAW;AAAA,YACX,QAAQ,MAAM;AAAA,UAAA;AAAA,QAAA;AAAA,MAClB;AAAA,IAAA;AAAA,EAGZ;AAEA,SACI;AAAA,IAAC;AAAA,IAAA;AAAA,MACG;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV,WAAW;AAAA,MACX,QAAQ,MAAM;AAAA,IAAA;AAAA,EAAA;AAG1B;"}

package/dist/@ecme/components/ui/UploadCustom/UploadCustom.js

@@ -0,0 +1,134 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useRef, useState, useCallback } from "react";
+import classNames from "../utils/classNames.js";
+import Button from "../Button/Button.js";
+import Notification from "../Notification/Notification.js";
+import toast from "../toast/toast.js";
+const UploadCustom = (props) => {
+  const {
+    accept,
+    beforeUpload,
+    disabled = false,
+    draggable = false,
+    multiple,
+    onChange,
+    ref,
+    tip,
+    children,
+    className,
+    ...rest
+  } = props;
+  const fileInputField = useRef(null);
+  const [dragOver, setDragOver] = useState(false);
+  const triggerMessage = (msg = "") => {
+    toast.push(
+      /* @__PURE__ */ jsx(Notification, { type: "danger", duration: 2e3, children: msg || "Upload Failed!" }),
+      {
+        placement: "top-center"
+      }
+    );
+  };
+  const onNewFileUpload = (e) => {
+    const { files: newFiles } = e.target;
+    let result = true;
+    if (beforeUpload) {
+      result = beforeUpload(newFiles);
+      if (result === false) {
+        triggerMessage();
+        return;
+      }
+      if (typeof result === "string" && result.length > 0) {
+        triggerMessage(result);
+        return;
+      }
+    }
+    if (result && newFiles) {
+      const filesArray = Array.from(newFiles);
+      onChange?.(filesArray);
+    }
+    if (fileInputField.current) {
+      fileInputField.current.value = "";
+    }
+  };
+  const triggerUpload = (e) => {
+    if (!disabled) {
+      fileInputField.current?.click();
+    }
+    e.stopPropagation();
+  };
+  const renderChildren = () => {
+    if (!draggable && !children) {
+      return /* @__PURE__ */ jsx(Button, { disabled, onClick: (e) => e.preventDefault(), children: "Upload" });
+    }
+    if (draggable && !children) {
+      return /* @__PURE__ */ jsx("span", { children: "Choose a file or drag and drop here" });
+    }
+    return children;
+  };
+  const handleDragLeave = useCallback(() => {
+    if (draggable) {
+      setDragOver(false);
+    }
+  }, [draggable]);
+  const handleDragOver = useCallback(() => {
+    if (draggable && !disabled) {
+      setDragOver(true);
+    }
+  }, [draggable, disabled]);
+  const handleDrop = useCallback(() => {
+    if (draggable) {
+      setDragOver(false);
+    }
+  }, [draggable]);
+  const draggableProp = {
+    onDragLeave: handleDragLeave,
+    onDragOver: handleDragOver,
+    onDrop: handleDrop
+  };
+  const draggableEventFeedbackClass = `border-primary`;
+  const uploadClass = classNames(
+    "upload",
+    draggable && `upload-draggable`,
+    draggable && !disabled && `hover:${draggableEventFeedbackClass}`,
+    draggable && disabled && "disabled",
+    dragOver && draggableEventFeedbackClass,
+    className
+  );
+  const uploadInputClass = classNames(
+    "upload-input",
+    draggable && `draggable`
+  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: uploadClass,
+        ...draggable ? draggableProp : { onClick: triggerUpload },
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: fileInputField,
+              className: uploadInputClass,
+              type: "file",
+              disabled,
+              multiple,
+              accept,
+              title: "",
+              value: "",
+              onChange: onNewFileUpload
+            }
+          ),
+          renderChildren()
+        ]
+      }
+    ),
+    tip
+  ] });
+};
+export {
+  UploadCustom as default
+};
+//# sourceMappingURL=UploadCustom.js.map

package/dist/@ecme/components/ui/UploadCustom/UploadCustom.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UploadCustom.js","sources":["../../../../../lib/@ecme/components/ui/UploadCustom/UploadCustom.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { useRef, useState, useCallback } from 'react'\nimport classNames from '../utils/classNames'\nimport Button from '../Button/Button'\nimport Notification from '../Notification/Notification'\nimport toast from '../toast/toast'\nimport type { CommonProps } from '../@types/common'\nimport type { ReactNode, ChangeEvent, MouseEvent, Ref } from 'react'\n\nexport interface UploadCustomProps extends CommonProps {\n    accept?: string\n    beforeUpload?: (file: FileList | null) => boolean | string\n    disabled?: boolean\n    draggable?: boolean\n    multiple?: boolean\n    onChange?: (files: File[]) => void\n    ref?: Ref<HTMLDivElement>\n    tip?: string | ReactNode\n}\n\nconst UploadCustom = (props: UploadCustomProps) => {\n    const {\n        accept,\n        beforeUpload,\n        disabled = false,\n        draggable = false,\n        multiple,\n        onChange,\n        ref,\n        tip,\n        children,\n        className,\n        ...rest\n    } = props\n\n    const fileInputField = useRef<HTMLInputElement>(null)\n    const [dragOver, setDragOver] = useState(false)\n\n    const triggerMessage = (msg: string | ReactNode = '') => {\n        toast.push(\n            <Notification type=\"danger\" duration={2000}>\n                {msg || 'Upload Failed!'}\n            </Notification>,\n            {\n                placement: 'top-center',\n            },\n        )\n    }\n\n    const onNewFileUpload = (e: ChangeEvent<HTMLInputElement>) => {\n        const { files: newFiles } = e.target\n        let result: boolean | string = true\n\n        if (beforeUpload) {\n            result = beforeUpload(newFiles)\n\n            if (result === false) {\n                triggerMessage()\n                return\n            }\n\n            if (typeof result === 'string' && result.length > 0) {\n                triggerMessage(result)\n                return\n            }\n        }\n\n        if (result && newFiles) {\n            // Converte FileList para Array e passa apenas os novos arquivos\n            const filesArray = Array.from(newFiles)\n            onChange?.(filesArray)\n        }\n\n        // Limpa o input para permitir selecionar o mesmo arquivo novamente\n        if (fileInputField.current) {\n            fileInputField.current.value = ''\n        }\n    }\n\n    const triggerUpload = (e: MouseEvent<HTMLDivElement>) => {\n        if (!disabled) {\n            fileInputField.current?.click()\n        }\n        e.stopPropagation()\n    }\n\n    const renderChildren = () => {\n        if (!draggable && !children) {\n            return (\n                <Button disabled={disabled} onClick={(e) => e.preventDefault()}>\n                    Upload\n                </Button>\n            )\n        }\n\n        if (draggable && !children) {\n            return <span>Choose a file or drag and drop here</span>\n        }\n\n        return children\n    }\n\n    const handleDragLeave = useCallback(() => {\n        if (draggable) {\n            setDragOver(false)\n        }\n    }, [draggable])\n\n    const handleDragOver = useCallback(() => {\n        if (draggable && !disabled) {\n            setDragOver(true)\n        }\n    }, [draggable, disabled])\n\n    const handleDrop = useCallback(() => {\n        if (draggable) {\n            setDragOver(false)\n        }\n    }, [draggable])\n\n    const draggableProp = {\n        onDragLeave: handleDragLeave,\n        onDragOver: handleDragOver,\n        onDrop: handleDrop,\n    }\n\n    const draggableEventFeedbackClass = `border-primary`\n\n    const uploadClass = classNames(\n        'upload',\n        draggable && `upload-draggable`,\n        draggable && !disabled && `hover:${draggableEventFeedbackClass}`,\n        draggable && disabled && 'disabled',\n        dragOver && draggableEventFeedbackClass,\n        className,\n    )\n\n    const uploadInputClass = classNames(\n        'upload-input',\n        draggable && `draggable`,\n    )\n\n    return (\n        <>\n            <div\n                ref={ref}\n                className={uploadClass}\n                {...(draggable ? draggableProp : { onClick: triggerUpload })}\n                {...(rest as any)}\n            >\n                <input\n                    ref={fileInputField}\n                    className={uploadInputClass}\n                    type=\"file\"\n                    disabled={disabled}\n                    multiple={multiple}\n                    accept={accept}\n                    title=\"\"\n                    value=\"\"\n                    onChange={onNewFileUpload}\n                ></input>\n                {renderChildren()}\n            </div>\n            {tip}\n        </>\n    )\n}\n\nexport default UploadCustom\n"],"names":[],"mappings":"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"}

package/dist/@ecme/components/ui/UploadCustom/index.js

@@ -0,0 +1,6 @@
+import UploadCustom from "./UploadCustom.js";
+export {
+  UploadCustom,
+  UploadCustom as default
+};
+//# sourceMappingURL=index.js.map

package/dist/@ecme/components/ui/UploadCustom/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/@ecme/components/ui/index.js

@@ -38,6 +38,7 @@ import { Timeline } from "./Timeline/index.js";
 import "./toast/index.js";
 import "./Tooltip/index.js";
 import "./Upload/index.js";
+import "./UploadCustom/index.js";
 import { default as default6 } from "./Alert/Alert.js";
 import { default as default7 } from "./Badge/Badge.js";
 import { default as default8 } from "./Button/Button.js";
@@ -59,7 +60,8 @@ import { default as default23 } from "./Switcher/Switcher.js";
 import { default as default24 } from "./Tag/Tag.js";
 import { default as default25 } from "./Tooltip/Tooltip.js";
 import { default as default26 } from "./Upload/Upload.js";
-import { default as default27 } from "./toast/toast.js";
+import { default as default27 } from "./UploadCustom/UploadCustom.js";
+import { default as default28 } from "./toast/toast.js";
 export {
   default6 as Alert,
   Avatar,
@@ -99,7 +101,8 @@ export {
   Timeline,
   default25 as Tooltip,
   default26 as Upload,
+  default27 as UploadCustom,
   default4 as hooks,
-  default27 as toast
+  default28 as toast
 };
 //# sourceMappingURL=index.js.map

package/dist/@ecme/components/ui/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}