lecom-ui 4.2.1 → 4.3.0

package/dist/components/DataTable/DataTable.js

@@ -1,57 +1,194 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import * as React from 'react';
 import { useReactTable, flexRender } from '../../node_modules/@tanstack/react-table/build/lib/index.js';
-import { Table, TableHeader, TableRow, TableHead, TableBody, TableCell } from '../Table/Table.js';
+import { Pagination } from '../Pagination/Pagination.js';
+import { ScrollArea, ScrollBar } from '../ScrollArea/ScrollArea.js';
+import { Skeleton } from '../Skeleton/Skeleton.js';
+import { buildColumns } from './DataTable.utils.js';
 import { getSortedRowModel, getCoreRowModel } from '../../node_modules/@tanstack/table-core/build/lib/index.js';
 
 function DataTable({
+  isLoading,
   columns,
   data,
-  noResults
+  noResults,
+  pagination,
+  vwDiff,
+  vhDiff,
+  onIsSelected
 }) {
   const [sorting, setSorting] = React.useState([]);
-  const [rowSelection, setRowSelection] = React.useState({});
   const table = useReactTable({
     data,
-    columns,
+    columns: buildColumns({ columns }),
     getCoreRowModel: getCoreRowModel(),
     onSortingChange: setSorting,
     getSortedRowModel: getSortedRowModel(),
-    onRowSelectionChange: setRowSelection,
     state: {
-      sorting,
-      rowSelection
+      sorting
     }
   });
-  const getMetaStyle = (header) => {
-    const meta = header.column.columnDef.meta;
-    if (!meta) {
-      return {};
+  const styleDataTableContainer = () => ({
+    width: vwDiff ? `calc(100vw - ${vwDiff}px)` : "100%",
+    height: vhDiff ? `calc(100vh - ${vhDiff}px)` : "100%"
+  });
+  const hasPagination = () => {
+    if (!pagination) {
+      return null;
     }
-    return meta["style"] ?? {};
+    return /* @__PURE__ */ jsx(Pagination, { ...pagination });
   };
-  return /* @__PURE__ */ jsx("div", { className: "bg-white rounded-[8px] py-0 px-2 pb-2", children: /* @__PURE__ */ jsxs(Table, { children: [
-    /* @__PURE__ */ jsx(TableHeader, { className: "[&_tr]:border-b-[1.5px] [&_tr]:border-grey-400", children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(TableRow, { children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx(
-      TableHead,
-      {
-        style: getMetaStyle(header),
-        children: header.isPlaceholder ? null : flexRender(
-          header.column.columnDef.header,
-          header.getContext()
-        )
-      },
-      header.id
-    )) }, headerGroup.id)) }),
-    /* @__PURE__ */ jsx(TableBody, { children: table.getRowModel().rows?.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx(
-      TableRow,
+  const styleColumn = (meta, elem) => {
+    if (elem === "td" && meta.truncate) {
+      return {
+        width: meta.width,
+        overflow: "hidden",
+        maxWidth: "0",
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap"
+      };
+    }
+    return {
+      width: meta.width
+    };
+  };
+  const getFixed = (meta) => meta.fixed;
+  const arrSkeleton = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15];
+  React.useEffect(() => {
+    if (!isLoading) {
+      const listRows = document.querySelectorAll(`table#data-table tr`);
+      listRows.forEach((listRow, listRowIndex) => {
+        const rowsElem = listRow.querySelectorAll("[data-fixed]");
+        rowsElem.forEach((rowElem, rowElemIndex) => {
+          const beforeElem = rowsElem[rowElemIndex - 1];
+          const currentElem = rowElem;
+          const beforeElemWidth = beforeElem?.getBoundingClientRect()?.width ?? 0;
+          const beforeElemLeft = beforeElem?.style?.left ? Number(beforeElem.style.left.replace(/px/g, "")) : 0;
+          const lastColumnFixed = rowsElem.length - 1 === rowElemIndex;
+          const lastRow = listRows.length - 1 === listRowIndex;
+          const currentElemIsTh = currentElem.tagName === "TH";
+          const boxShadowWidth = currentElemIsTh ? "-1.5px" : "-0.5px";
+          const boxShadow = `#c9c9c9 0px ${lastRow ? "0px" : boxShadowWidth} 0px inset`;
+          currentElem.style.position = "sticky";
+          currentElem.style.left = `${beforeElemWidth + beforeElemLeft}px`;
+          currentElem.style.boxShadow = boxShadow;
+          if (lastColumnFixed) {
+            currentElem.setAttribute("data-separator-fixed", "true");
+          }
+        });
+      });
+    }
+  }, [isLoading]);
+  const onScroll = (e) => {
+    const target = e.target;
+    const elemSeparator = document.querySelectorAll("[data-separator-fixed]");
+    const countSeparator = elemSeparator.length - 1;
+    if (target.scrollLeft > 0) {
+      elemSeparator.forEach((elem, i) => {
+        const separator = elem;
+        if (countSeparator === i) {
+          separator.style.boxShadow = "#c9c9c9 -0.5px 0px 0px inset";
+        } else {
+          separator.style.boxShadow = `#c9c9c9 -0.5px ${i === 0 ? "-1.5px" : "-0.5px"} 0px inset`;
+        }
+      });
+    } else {
+      elemSeparator.forEach((elem, i) => {
+        const separator = elem;
+        if (i === 0) {
+          separator.style.boxShadow = "#c9c9c9 0px -1.5px 0px inset";
+        } else {
+          separator.style.boxShadow = `#c9c9c9 0px ${countSeparator === i ? "0px" : "-0.5px"} 0px inset`;
+        }
+      });
+    }
+  };
+  React.useEffect(() => {
+    document.querySelector("[data-radix-scroll-area-viewport]")?.addEventListener("scroll", onScroll);
+    return () => document.querySelector("[data-radix-scroll-area-viewport]")?.removeEventListener("scroll", onScroll);
+  }, []);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "div",
       {
-        "data-state": row.getIsSelected() && "selected",
-        className: "border-b-[0.5px] border-grey-400",
-        children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx(TableCell, { className: "py-0 h-10", children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))
-      },
-      row.id
-    )) : /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, { colSpan: columns.length, children: noResults ?? /* @__PURE__ */ jsx("div", { className: "text-center", children: "No results." }) }) }) })
-  ] }) });
+        className: "bg-white rounded-[8px] p-2 transition-all duration-500",
+        style: { width: styleDataTableContainer().width },
+        children: /* @__PURE__ */ jsxs(ScrollArea, { type: "always", className: "p-2", children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "transition-all duration-500",
+              style: { maxHeight: styleDataTableContainer().height },
+              children: isLoading ? /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-4", children: arrSkeleton.map((id) => /* @__PURE__ */ jsx(
+                Skeleton,
+                {
+                  className: "w-full h-[25px] rounded-lg bg-grey-200"
+                },
+                id
+              )) }) : /* @__PURE__ */ jsxs("table", { id: "data-table", className: "w-full", children: [
+                /* @__PURE__ */ jsx("thead", { className: "sticky top-0 z-10", children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx("tr", { children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx(
+                  "th",
+                  {
+                    className: "h-12 px-4 [&:has([role=checkbox])]:pr-0 bg-white shadow-[0_-1.5px_0px_0px_#c9c9c9_inset] text-left",
+                    "data-header": header.id,
+                    "data-fixed": getFixed(
+                      header.column.columnDef.meta
+                    ),
+                    style: styleColumn(
+                      header.column.columnDef.meta,
+                      "th"
+                    ),
+                    children: header.isPlaceholder ? null : flexRender(
+                      header.column.columnDef.header,
+                      header.getContext()
+                    )
+                  },
+                  header.id
+                )) }, headerGroup.id)) }),
+                /* @__PURE__ */ jsx("tbody", { className: "[&_tr:last-child]:border-0 [&_tr:last-child_td]:shadow-none", children: table.getRowModel().rows?.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx(
+                  "tr",
+                  {
+                    "data-state": onIsSelected?.(row) ? "selected" : "",
+                    className: "[&_td]:hover:bg-grey-100 [&_td]:data-[state=selected]:bg-grey-100",
+                    children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx(
+                      "td",
+                      {
+                        className: "p-4 py-0 h-10 [&:has([role=checkbox])]:pr-0 transition-colors bg-white shadow-[0_-0.5px_0px_0px_#c9c9c9_inset] text-left",
+                        "data-column": cell.column.id,
+                        "data-fixed": getFixed(
+                          cell.column.columnDef.meta
+                        ),
+                        style: styleColumn(
+                          cell.column.columnDef.meta,
+                          "td"
+                        ),
+                        children: flexRender(
+                          cell.column.columnDef.cell,
+                          cell.getContext()
+                        )
+                      },
+                      cell.id
+                    ))
+                  },
+                  row.id
+                )) : /* @__PURE__ */ jsx("tr", { className: "border-b-[0.5px] [&_td]:hover:bg-grey-100 [&_td]:data-[state=selected]:bg-grey-100", children: /* @__PURE__ */ jsx(
+                  "td",
+                  {
+                    colSpan: columns.length,
+                    className: "p-4 py-0 h-10 align-middle [&:has([role=checkbox])]:pr-0 transition-colors bg-white",
+                    children: noResults ?? /* @__PURE__ */ jsx("div", { className: "text-center", children: "-" })
+                  }
+                ) }) })
+              ] })
+            }
+          ),
+          /* @__PURE__ */ jsx(ScrollBar, { orientation: "horizontal" })
+        ] })
+      }
+    ),
+    hasPagination()
+  ] });
 }
+DataTable.displayName = "DataTable";
 
 export { DataTable };

package/dist/components/DataTable/DataTable.utils.js

@@ -1,8 +1,8 @@
-import * as React from 'react';
-import { clsx } from 'clsx';
-import { ArrowUpDown } from 'lucide-react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { clsx } from '../../node_modules/clsx/dist/clsx.js';
 import { Checkbox } from '../Checkbox/Checkbox.js';
 import { Typography } from '../Typography/Typography.js';
+import ArrowUpDown from '../../node_modules/lucide-react/dist/esm/icons/arrow-up-down.js';
 
 function buildHeaderSelect({
   table,
@@ -10,7 +10,7 @@ function buildHeaderSelect({
   checkedHeader,
   onCheckedHeaderChange
 }) {
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     Checkbox,
     {
       checked: !!checkedHeader?.({ table, column }),
@@ -23,7 +23,7 @@ function buildCellSelect({
   checkedCell,
   onCheckedCellChange
 }) {
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     Checkbox,
     {
       checked: !!checkedCell?.({ row }),
@@ -37,7 +37,7 @@ function buildColumns({
   const mappedColumns = columns.map((externalColumn) => ({
     accessorKey: externalColumn.key,
     header: ({ table, column }) => {
-      if (!!externalColumn.enableSelect) {
+      if (externalColumn.enableSelect) {
         return buildHeaderSelect({
           table,
           column,
@@ -50,34 +50,36 @@ function buildColumns({
       }
       const hasSort = !!externalColumn.onSort;
       const title = typeof externalColumn.title === "function" ? externalColumn.title({ table, column }) : externalColumn.title;
-      return /* @__PURE__ */ React.createElement(
+      return /* @__PURE__ */ jsxs(
         "div",
         {
           className: clsx(
             "group flex items-center gap-1",
             hasSort && "hover:cursor-pointer"
           ),
-          onClick: () => externalColumn.onSort?.({ table, column })
-        },
-        typeof externalColumn.title === "string" ? /* @__PURE__ */ React.createElement(Typography, { variant: "body-large-500", textColor: "text-grey-950" }, externalColumn.title) : title,
-        hasSort && /* @__PURE__ */ React.createElement(
-          ArrowUpDown,
-          {
-            size: 16,
-            className: "text-grey-400 group-hover:text-grey-950"
-          }
-        )
+          onClick: () => externalColumn.onSort?.({ table, column }),
+          children: [
+            typeof externalColumn.title === "string" ? /* @__PURE__ */ jsx(Typography, { variant: "body-large-500", textColor: "text-grey-950", children: externalColumn.title }) : title,
+            hasSort && /* @__PURE__ */ jsx(
+              ArrowUpDown,
+              {
+                size: 16,
+                className: "text-grey-400 group-hover:text-grey-950"
+              }
+            )
+          ]
+        }
       );
     },
     cell: ({ row }) => {
-      if (!!externalColumn.enableSelect) {
+      if (externalColumn.enableSelect) {
         return buildCellSelect({
           row,
           checkedCell: externalColumn.checkedCell,
           onCheckedCellChange: externalColumn.onCheckedCellChange
         });
       }
-      if (!!externalColumn.render) {
+      if (externalColumn.render) {
         if (typeof externalColumn.render === "function") {
           return externalColumn.render({
             value: row.getValue(externalColumn.key),
@@ -86,7 +88,7 @@ function buildColumns({
         }
         return externalColumn.render;
       }
-      return /* @__PURE__ */ React.createElement(Typography, { variant: "body-large-400", textColor: "text-grey-800" }, row.getValue(externalColumn.key));
+      return /* @__PURE__ */ jsx(Typography, { variant: "body-large-400", textColor: "text-grey-800", children: row.getValue(externalColumn.key) });
     },
     meta: {
       width: externalColumn.width,

package/dist/components/Header/Header.js

@@ -4,7 +4,7 @@ import { cn } from '../../lib/utils.js';
 import { cva } from '../../node_modules/class-variance-authority/dist/index.js';
 import { colorLuminance } from '../../node_modules/use-color-luminance/index.es.js';
 import { useSidebar } from '../Sidebar/Sidebar.js';
-import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from '../Tooltip/Tooltip.js';
+import { Tooltip, TooltipTrigger, TooltipContent } from '../Tooltip/Tooltip.js';
 import { HelpMenu } from './HelpMenu.js';
 import { ImgBrand } from './ImgBrand.js';
 import { ModulesMenu } from './ModulesMenu.js';
@@ -61,7 +61,7 @@ const Header = ({
       style: { backgroundColor: customStyles.bgColor },
       ...props,
       children: [
-        /* @__PURE__ */ jsx(TooltipProvider, { delayDuration: 0, children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+        /* @__PURE__ */ jsxs(Tooltip, { delayDuration: 0, children: [
           /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
             Menu,
             {
@@ -75,7 +75,7 @@ const Header = ({
             }
           ) }),
           /* @__PURE__ */ jsx(TooltipContent, { color: "black", align: "start", side: "bottom", children: open ? t("header.collapseMenu") : t("header.expandMenu") })
-        ] }) }),
+        ] }),
         /* @__PURE__ */ jsxs("div", { className: "flex items-center grow gap-24", children: [
           /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-12", children: [
             /* @__PURE__ */ jsx(ImgBrand, { src: customImgSrc }),

package/dist/components/Header/HelpMenu.js

@@ -4,7 +4,7 @@ import { Button } from '../Button/Button.js';
 import { Popover, PopoverContent, PopoverTrigger } from '../Popover/Popover.js';
 import { ScrollArea } from '../ScrollArea/ScrollArea.js';
 import { cn } from '../../lib/utils.js';
-import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from '../Tooltip/Tooltip.js';
+import { Tooltip, TooltipTrigger, TooltipPortal, TooltipContent } from '../Tooltip/Tooltip.js';
 import { useTranslation } from '../../node_modules/react-i18next/dist/es/useTranslation.js';
 import CircleHelp from '../../node_modules/lucide-react/dist/esm/icons/circle-help.js';
 
@@ -50,19 +50,19 @@ const HelpMenu = ({
   if (!title && !items) {
     return null;
   }
-  const renderButtonTrigger = () => /* @__PURE__ */ jsx(TooltipProvider, { delayDuration: 0, children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+  const renderButtonTrigger = () => /* @__PURE__ */ jsxs(Tooltip, { delayDuration: 0, children: [
     /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
       Button,
       {
         size: "small",
         iconButton: true,
         customStyles,
-        className: "max-md:hidden",
+        className: "flex-shrink-0 max-md:hidden",
         isActive: isOpen,
         children: /* @__PURE__ */ jsx(CircleHelp, {})
       }
     ) }) }),
-    /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(TooltipPortal, { children: /* @__PURE__ */ jsx(
       TooltipContent,
       {
         color: "black",
@@ -71,8 +71,8 @@ const HelpMenu = ({
         hidden: isOpen,
         children: t("header.help")
       }
-    )
-  ] }) });
+    ) })
+  ] });
   return /* @__PURE__ */ jsxs(Popover, { open: isOpen, onOpenChange: setIsOpen, children: [
     renderButtonTrigger(),
     /* @__PURE__ */ jsxs(

package/dist/components/Header/ImgBrand.js

@@ -1,15 +1,18 @@
 import { jsx } from 'react/jsx-runtime';
 import img from '../../public/imgs/logo-lecom.png.js';
 
-const ImgBrand = ({ src }) => /* @__PURE__ */ jsx(
-  "img",
-  {
-    loading: "lazy",
-    src: src ?? img.src,
-    alt: "Logo",
-    className: "w-auto h-auto max-w-[102px] max-h-[32px]"
-  }
-);
+const ImgBrand = ({ src }) => {
+  const DEFAULT_LOGO = img;
+  return /* @__PURE__ */ jsx(
+    "img",
+    {
+      loading: "lazy",
+      src: src ?? DEFAULT_LOGO,
+      alt: "Logo",
+      className: "w-auto h-auto max-w-[102px] max-h-[32px]"
+    }
+  );
+};
 ImgBrand.displayName = "ImgBrand";
 
 export { ImgBrand };

package/dist/components/Header/ModulesMenu.js

@@ -9,7 +9,7 @@ import '../CustomIcon/Icons/LogoLecomBrand.js';
 import { Popover, PopoverContent, PopoverTrigger } from '../Popover/Popover.js';
 import { ScrollArea } from '../ScrollArea/ScrollArea.js';
 import { cn } from '../../lib/utils.js';
-import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from '../Tooltip/Tooltip.js';
+import { Tooltip, TooltipTrigger, TooltipPortal, TooltipContent } from '../Tooltip/Tooltip.js';
 import { useTranslation } from '../../node_modules/react-i18next/dist/es/useTranslation.js';
 
 const Icon = ({
@@ -100,7 +100,7 @@ const ModulesMenu = ({
   if (!title && !items) {
     return null;
   }
-  const renderButtonTrigger = () => /* @__PURE__ */ jsx(TooltipProvider, { delayDuration: 0, children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+  const renderButtonTrigger = () => /* @__PURE__ */ jsxs(Tooltip, { delayDuration: 0, children: [
     /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
       Button,
       {
@@ -108,11 +108,12 @@ const ModulesMenu = ({
         iconButton: true,
         customStyles,
         isActive: isOpen,
+        className: "flex-shrink-0",
         children: /* @__PURE__ */ jsx(LogoLecom, {})
       }
     ) }) }),
-    /* @__PURE__ */ jsx(TooltipContent, { color: "black", align: "end", side: "bottom", hidden: isOpen, children: t("header.modules") })
-  ] }) });
+    /* @__PURE__ */ jsx(TooltipPortal, { children: /* @__PURE__ */ jsx(TooltipContent, { color: "black", align: "end", side: "bottom", hidden: isOpen, children: t("header.modules") }) })
+  ] });
   return /* @__PURE__ */ jsxs(Popover, { open: isOpen, onOpenChange: setIsOpen, children: [
     renderButtonTrigger(),
     /* @__PURE__ */ jsxs(

package/dist/components/Header/SocialMenu.js

@@ -16,6 +16,7 @@ const SocialMenu = ({
       iconButton: true,
       customStyles,
       onClick: onOpenSocialMenuChange,
+      className: "flex-shrink-0",
       children: /* @__PURE__ */ jsx(MessageSquare, {})
     }
   );

package/dist/components/Header/UserMenu.js

@@ -4,12 +4,11 @@ import { Button } from '../Button/Button.js';
 import { Popover, PopoverContent, PopoverTrigger } from '../Popover/Popover.js';
 import { ScrollArea } from '../ScrollArea/ScrollArea.js';
 import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '../Select/Select.js';
-import { useIsMobile } from '../../hooks/use-mobile.js';
-import '../../i18n/index.js';
-import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from '../Tooltip/Tooltip.js';
+import { useIsMobile } from '../../hooks/useIsMobile.js';
+import instance from '../../node_modules/i18next/dist/esm/i18next.js';
+import { Tooltip, TooltipTrigger, TooltipPortal, TooltipContent } from '../Tooltip/Tooltip.js';
 import { useTranslation } from '../../node_modules/react-i18next/dist/es/useTranslation.js';
 import User from '../../node_modules/lucide-react/dist/esm/icons/user.js';
-import instance from '../../node_modules/i18next/dist/esm/i18next.js';
 
 const UserMenu = ({
   customStyles,
@@ -69,7 +68,7 @@ const UserMenu = ({
       }
     );
   };
-  const renderButtonTrigger = () => /* @__PURE__ */ jsx(TooltipProvider, { delayDuration: 0, children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+  const renderButtonTrigger = () => /* @__PURE__ */ jsxs(Tooltip, { delayDuration: 0, children: [
     /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
       Button,
       {
@@ -80,7 +79,7 @@ const UserMenu = ({
         children: isMobile ? /* @__PURE__ */ jsx(User, {}) : user?.name
       }
     ) }) }),
-    /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(TooltipPortal, { children: /* @__PURE__ */ jsx(
       TooltipContent,
       {
         color: "black",
@@ -89,8 +88,8 @@ const UserMenu = ({
         hidden: isOpen,
         children: t("header.settings")
       }
-    )
-  ] }) });
+    ) })
+  ] });
   return /* @__PURE__ */ jsxs(Popover, { open: isOpen, onOpenChange: setIsOpen, children: [
     renderButtonTrigger(),
     /* @__PURE__ */ jsx(
@@ -107,7 +106,7 @@ const UserMenu = ({
           /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 p-2", children: [
             /* @__PURE__ */ jsx("div", { className: "bg-grey-400/30 rounded-full w-9 h-9 flex items-center justify-center [&>svg]:!w-6 [&>svg]:!h-6 shrink-0", children: /* @__PURE__ */ jsx(User, { className: "text-grey-600" }) }),
             /* @__PURE__ */ jsxs("div", { className: "grow", children: [
-              /* @__PURE__ */ jsx("span", { className: "block body-large-400 break-all", children: user?.name }),
+              /* @__PURE__ */ jsx("span", { className: "block body-large-400 break-words", children: user?.name }),
               /* @__PURE__ */ jsx("span", { className: "block body-medium-400 break-all", children: user?.email })
             ] })
           ] }),

package/dist/components/Layout/Layout.js

@@ -1,5 +1,6 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import * as React from 'react';
+import { initializeI18n } from '../../i18n/index.js';
 import { getCookie } from '../../utils/cookie.js';
 import '../CustomIcon/Icons/CadastroFacil.js';
 import '../CustomIcon/Icons/LogoLecom.js';
@@ -9,10 +10,9 @@ import { LogoLecomBrand } from '../CustomIcon/Icons/LogoLecomBrand.js';
 import { Header } from '../Header/Header.js';
 import { SidebarProvider, Sidebar, SidebarContent, SidebarGroup, SidebarGroupContent, SidebarMenu, SidebarMenuItem, SidebarMenuButton, SidebarFooter } from '../Sidebar/Sidebar.js';
 import { Typography } from '../Typography/Typography.js';
-import { useTranslation } from '../../node_modules/react-i18next/dist/es/useTranslation.js';
 
+initializeI18n();
 const Layout = ({ children, header, sideBar }) => {
-  const { t } = useTranslation();
   const { items, info } = sideBar;
   const [sidebarState, setSidebarState] = React.useState(
     void 0
@@ -46,31 +46,46 @@ const Layout = ({ children, header, sideBar }) => {
             {
               variant: "heading-xsmall-600",
               textColor: "text-grey-800",
-              className: "flex items-center gap-2",
+              className: "flex items-center gap-2 w-[200px]",
               children: [
-                t("sidebar.platform"),
-                " ",
+                info.platformText,
                 /* @__PURE__ */ jsx(LogoLecomBrand, { className: "w-16 shrink-0" })
               ]
             }
           ),
-          /* @__PURE__ */ jsxs(Typography, { variant: "body-medium-400", textColor: "text-grey-800", children: [
-            t("sidebar.version"),
-            " ",
-            info.version,
-            " - ",
-            info.cycle,
-            " ",
-            info.build
-          ] }),
-          /* @__PURE__ */ jsxs(Typography, { variant: "body-medium-400", textColor: "text-grey-800", children: [
-            t("sidebar.authorizedFor"),
-            " ",
-            info.authorizedFor
-          ] })
+          /* @__PURE__ */ jsxs(
+            Typography,
+            {
+              variant: "body-medium-400",
+              textColor: "text-grey-800",
+              className: "w-[200px]",
+              children: [
+                info.versionText,
+                " ",
+                info.version,
+                " - ",
+                info.cycle,
+                " ",
+                info.build
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            Typography,
+            {
+              variant: "body-medium-400",
+              textColor: "text-grey-800",
+              className: "w-[200px]",
+              children: [
+                info.authorizedForText,
+                " ",
+                info.authorizedFor
+              ]
+            }
+          )
         ] })
       ] }),
-      /* @__PURE__ */ jsx("main", { className: "grow", children })
+      /* @__PURE__ */ jsx("main", { className: "grow w-full", children })
     ] })
   ] });
 };