lecom-ui 3.8.0 → 3.8.2

package/dist/components/DataTable/DataTable.js

@@ -1,55 +1,135 @@
-import * as React from 'react';
+import { useState } from 'react';
 import { useReactTable, getCoreRowModel, getSortedRowModel, flexRender } from '@tanstack/react-table';
-import { Table, TableHeader, TableRowHeader, TableHead, TableBody, TableRowBody, TableCell } from '../Table/Table.js';
+import { Pagination } from '../Pagination/Pagination.js';
+import { ScrollArea, ScrollBar } from '../ScrollArea/ScrollArea.js';
+import { Skeleton } from '../Skeleton/Skeleton.js';
 
 function DataTable({
+  columnFullSize,
+  fixedColumns,
+  isLoading,
   columns,
   data,
   noResults,
-  onRowSelectionChange
+  pagination,
+  vwDiff,
+  vhDiff,
+  onIsSelected
 }) {
-  const [sorting, setSorting] = React.useState([]);
-  const [rowSelection, setRowSelection] = React.useState({});
+  const [sorting, setSorting] = useState([]);
   const table = useReactTable({
     data,
     columns,
     getCoreRowModel: getCoreRowModel(),
     onSortingChange: setSorting,
     getSortedRowModel: getSortedRowModel(),
-    onRowSelectionChange: setRowSelection,
     state: {
       sorting,
-      rowSelection
+      columnPinning: {
+        left: fixedColumns || []
+      }
     }
   });
-  const getMetaStyle = (header) => {
-    const meta = header.column.columnDef.meta;
-    if (!meta) {
-      return {};
+  const styleFixed = (column, elemIndex, elem) => {
+    const isPinned = column.getIsPinned();
+    if (!isPinned) {
+      return {
+        width: column.id === columnFullSize ? "100%" : undefined
+      };
     }
-    return meta["style"] ?? {};
+    const selector = elem === "th" ? "thead" : "tbody";
+    const columnIndex = column.getIndex();
+    const elemBefore = document.querySelector(
+      `table#data-table ${selector} tr:nth-child(${elemIndex + 1}) ${elem}:nth-child(${columnIndex})`
+    );
+    const isLastLeftPinnedColumn = isPinned === "left" && column.getIsLastColumn("left");
+    const leftStyleElemBefore = elemBefore?.style?.left ? Number(elemBefore.style.left.replace(/px/g, "")) : 0;
+    const widthElemBefore = elemBefore?.getBoundingClientRect()?.width ?? 0;
+    const left = leftStyleElemBefore + widthElemBefore;
+    const lastRow = table.getRowCount() === elemIndex + 1;
+    const boxShadow = elem === "td" ? `-0.5px ${lastRow ? "0px" : "-0.5px"}` : "-0.5px -1.5px";
+    return {
+      boxShadow: isLastLeftPinnedColumn ? `#c9c9c9 ${boxShadow} 0px 0px inset` : undefined,
+      position: "sticky",
+      left,
+      zIndex: 1,
+      width: column.id === columnFullSize ? "100%" : undefined
+    };
   };
-  React.useEffect(() => {
-    onRowSelectionChange?.(rowSelection);
-  }, [rowSelection]);
-  return /* @__PURE__ */ React.createElement(Table, null, /* @__PURE__ */ React.createElement(TableHeader, null, table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ React.createElement(TableRowHeader, { key: headerGroup.id }, headerGroup.headers.map((header) => /* @__PURE__ */ React.createElement(
-    TableHead,
-    {
-      key: header.id,
-      style: getMetaStyle(header)
-    },
-    header.isPlaceholder ? null : flexRender(
-      header.column.columnDef.header,
-      header.getContext()
-    )
-  ))))), /* @__PURE__ */ React.createElement(TableBody, null, table.getRowModel().rows?.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ React.createElement(
-    TableRowBody,
+  const styleDataTableContainer = () => ({
+    width: vwDiff ? `calc(100vw - ${vwDiff}px)` : "100%",
+    height: vhDiff ? `calc(100vh - ${vhDiff}px)` : "100%"
+  });
+  const hasPagination = () => {
+    if (!pagination) {
+      return null;
+    }
+    return /* @__PURE__ */ React.createElement(Pagination, { ...pagination });
+  };
+  const arrSkeleton = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15];
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+    "div",
     {
-      key: row.id,
-      "data-state": row.getIsSelected() && "selected"
+      className: "bg-white rounded-[8px] p-2 transition-all duration-500",
+      style: { width: styleDataTableContainer().width }
     },
-    row.getVisibleCells().map((cell) => /* @__PURE__ */ React.createElement(TableCell, { key: cell.id }, flexRender(cell.column.columnDef.cell, cell.getContext())))
-  )) : /* @__PURE__ */ React.createElement(TableRowBody, null, /* @__PURE__ */ React.createElement(TableCell, { colSpan: columns.length }, noResults ?? /* @__PURE__ */ React.createElement("div", { className: "text-center" }, "No results.")))));
+    /* @__PURE__ */ React.createElement(ScrollArea, { type: "always", className: "p-2" }, /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: "transition-all duration-500",
+        style: { maxHeight: styleDataTableContainer().height }
+      },
+      isLoading ? /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-4" }, arrSkeleton.map((id) => /* @__PURE__ */ React.createElement(
+        Skeleton,
+        {
+          key: id,
+          className: "w-full h-[25px] rounded-lg bg-grey-200"
+        }
+      ))) : /* @__PURE__ */ React.createElement("table", { id: "data-table", className: "w-full" }, /* @__PURE__ */ React.createElement("thead", { className: "sticky top-0 z-10" }, table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ React.createElement("tr", { key: headerGroup.id }, headerGroup.headers.map((header) => /* @__PURE__ */ React.createElement(
+        "th",
+        {
+          key: header.id,
+          className: "h-12 px-4 [&:has([role=checkbox])]:pr-0 bg-white shadow-[0_-1.5px_0px_0px_#c9c9c9_inset]",
+          style: styleFixed(header.column, 0, "th")
+        },
+        header.isPlaceholder ? null : flexRender(
+          header.column.columnDef.header,
+          header.getContext()
+        )
+      ))))), /* @__PURE__ */ React.createElement("tbody", { className: "[&_tr:last-child]:border-0 [&_tr:last-child_td]:shadow-none" }, table.getRowModel().rows?.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ React.createElement(
+        "tr",
+        {
+          key: row.id,
+          "data-state": !!onIsSelected?.(row) ? "selected" : "",
+          className: "[&_td]:hover:bg-grey-100 [&_td]:data-[state=selected]:bg-grey-100"
+        },
+        row.getVisibleCells().map((cell) => /* @__PURE__ */ React.createElement(
+          "td",
+          {
+            key: cell.id,
+            className: "p-4 py-0 h-10 [&:has([role=checkbox])]:pr-0 transition-colors bg-white shadow-[0_-0.5px_0px_0px_#c9c9c9_inset]",
+            style: styleFixed(
+              cell.column,
+              cell.row.index,
+              "td"
+            )
+          },
+          flexRender(
+            cell.column.columnDef.cell,
+            cell.getContext()
+          )
+        ))
+      )) : /* @__PURE__ */ React.createElement("tr", { className: "border-b-[0.5px] [&_td]:hover:bg-grey-100 [&_td]:data-[state=selected]:bg-grey-100" }, /* @__PURE__ */ React.createElement(
+        "td",
+        {
+          colSpan: columns.length,
+          className: "p-4 py-0 h-10 align-middle [&:has([role=checkbox])]:pr-0 transition-colors bg-white"
+        },
+        noResults ?? /* @__PURE__ */ React.createElement("div", { className: "text-center" }, "-")
+      ))))
+    ), /* @__PURE__ */ React.createElement(ScrollBar, { orientation: "horizontal" }))
+  ), hasPagination());
 }
+DataTable.displayName = "DataTable";
 
 export { DataTable };

package/dist/components/Header/UserMenu.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 { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '../Select/Select.js';
-import { useIsMobile } from '../../hooks/use-mobile.js';
+import { useIsMobile } from '../../hooks/useIsMobile.js';
 import { User } from 'lucide-react';
 import { i18n } from '../../i18n/index.js';
 import { Tooltip, TooltipTrigger, TooltipPortal, TooltipContent } from '../Tooltip/Tooltip.js';

package/dist/components/Pagination/Pagination.js

@@ -1,18 +1,11 @@
 import * as React from 'react';
+import { useTranslation } from 'react-i18next';
 import { Button } from '../Button/Button.js';
 import { cn } from '../../lib/utils.js';
-import { ChevronFirst, ChevronLast, ChevronLeft, ChevronRight, MoreHorizontal } from 'lucide-react';
+import { ChevronFirst, ChevronLast, ChevronLeft, ChevronRight, MoreHorizontal, ChevronDown } from 'lucide-react';
+import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from '../DropdownMenu/DropdownMenu.js';
+import { Typography } from '../Typography/Typography.js';
 
-const Pagination = ({ className, ...props }) => /* @__PURE__ */ React.createElement(
-  "nav",
-  {
-    role: "navigation",
-    "aria-label": "pagination",
-    className: cn("", className),
-    ...props
-  }
-);
-Pagination.displayName = "Pagination";
 const PaginationContent = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React.createElement(
   "ul",
   {
@@ -145,5 +138,65 @@ const PaginationIndex = ({
   children
 );
 PaginationIndex.displayName = "PaginationIndex";
+const Pagination = ({
+  currentPage,
+  itemsPage,
+  perPage,
+  totalRowsSelected = 0,
+  onChangePerPage
+}) => {
+  const { t } = useTranslation();
+  const perPageOptions = [
+    {
+      value: 50
+    },
+    {
+      value: 100
+    },
+    {
+      value: 200
+    },
+    {
+      value: 300
+    }
+  ];
+  const mapPaginationItem = (item) => {
+    const componentProps = {
+      onClick: item.onClick,
+      disabled: item.disabled
+    };
+    if (item.type === "page") {
+      return /* @__PURE__ */ React.createElement(
+        PaginationIndex,
+        {
+          isActive: item.page === currentPage,
+          ...componentProps
+        },
+        item.page
+      );
+    }
+    if (item.type.includes("ellipsis")) {
+      return /* @__PURE__ */ React.createElement(PaginationEllipsis, { asChild: true });
+    }
+    const mappedComponents = {
+      first: PaginationFirst,
+      previous: PaginationPrevious,
+      next: PaginationNext,
+      last: PaginationLast
+    };
+    return React.createElement(mappedComponents[item.type], componentProps);
+  };
+  return /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-between mt-6 gap-4" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-4" }, /* @__PURE__ */ React.createElement(DropdownMenu, null, /* @__PURE__ */ React.createElement(DropdownMenuTrigger, { asChild: true }, /* @__PURE__ */ React.createElement(Button, { size: "small", color: "grey", variant: "outlined" }, /* @__PURE__ */ React.createElement("span", { className: "max-md:hidden" }, t("process_list.table.show")), " ", perPage, /* @__PURE__ */ React.createElement(ChevronDown, { size: 20 }))), /* @__PURE__ */ React.createElement(DropdownMenuContent, { side: "top", align: "center" }, perPageOptions.map((option) => /* @__PURE__ */ React.createElement(
+    DropdownMenuItem,
+    {
+      key: option.value,
+      onSelect: () => {
+        onChangePerPage?.(option.value);
+      }
+    },
+    option.value.toString()
+  )))), totalRowsSelected > 0 && /* @__PURE__ */ React.createElement(Typography, { variant: "heading-xxsmall-600", textColor: "text-grey-800" }, totalRowsSelected, " ", t("process_list.table.selected_process"))), /* @__PURE__ */ React.createElement("nav", { role: "navigation", "aria-label": "pagination" }, /* @__PURE__ */ React.createElement(PaginationContent, null, itemsPage.map((item) => /* @__PURE__ */ React.createElement(PaginationItem, { key: item.id }, mapPaginationItem(item))))));
+};
+Pagination.displayName = "Pagination";
 
 export { Pagination, PaginationContent, PaginationEllipsis, PaginationFirst, PaginationIndex, PaginationItem, PaginationLast, PaginationNext, PaginationPrevious };

package/dist/components/Sidebar/Sidebar.js

@@ -5,7 +5,7 @@ import { Separator } from '../Separator/Separator.js';
 import { Sheet, SheetContent } from '../Sheet/Sheet.js';
 import { Skeleton } from '../Skeleton/Skeleton.js';
 import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from '../Tooltip/Tooltip.js';
-import { useIsMobile } from '../../hooks/use-mobile.js';
+import { useIsMobile } from '../../hooks/useIsMobile.js';
 import { cn } from '../../lib/utils.js';
 import { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';
@@ -99,7 +99,6 @@ const SidebarProvider = React.forwardRef(
 );
 SidebarProvider.displayName = "SidebarProvider";
 const Sidebar = React.forwardRef(
-  // eslint-disable-next-line complexity
   ({
     side = "left",
     variant = "sidebar",
@@ -260,7 +259,7 @@ const SidebarFooter = React.forwardRef(({ className, ...props }, ref) => /* @__P
     ref,
     "data-sidebar": "footer",
     className: cn(
-      "flex flex-col gap-2 p-2 group-data-[state=collapsed]:opacity-0 transition-all truncate",
+      "flex flex-col gap-2 p-2 group-data-[state=collapsed]:opacity-0 transition-all",
       className
     ),
     ...props
@@ -396,7 +395,6 @@ const sidebarMenuButtonVariants = cva(
   }
 );
 const SidebarMenuButton = React.forwardRef(
-  // eslint-disable-next-line complexity
   ({
     asChild = false,
     isActive = false,

package/dist/hooks/useIsMobile.js

@@ -0,0 +1,20 @@
+import * as React from 'react';
+
+const MOBILE_BREAKPOINT = 768;
+function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState(
+    undefined
+  );
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    };
+    mql.addEventListener("change", onChange);
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    return () => mql.removeEventListener("change", onChange);
+  }, []);
+  return !!isMobile;
+}
+
+export { useIsMobile };

package/dist/hooks/usePagination.js

@@ -0,0 +1,97 @@
+import { useState, useMemo } from 'react';
+
+const usePagination = ({
+  count = 1,
+  defaultPage = 1,
+  boundaryCount = 1,
+  siblingCount = 1,
+  disabled = false,
+  hideNextButton = false,
+  hidePrevButton = false,
+  showFirstButton = true,
+  showLastButton = true,
+  onChange
+} = {}) => {
+  const [page, setPage] = useState(defaultPage);
+  const handleClick = (value) => {
+    if (!disabled && value >= 1 && value <= count) {
+      setPage(value);
+      if (onChange) {
+        onChange(value);
+      }
+    }
+  };
+  const range = (start, end) => Array.from({ length: end - start + 1 }, (_, i) => start + i);
+  const startPages = range(1, Math.min(boundaryCount, count));
+  const endPages = range(
+    Math.max(count - boundaryCount + 1, boundaryCount + 1),
+    count
+  );
+  const siblingsStart = Math.max(
+    Math.min(page - siblingCount, count - boundaryCount - siblingCount * 2 - 1),
+    boundaryCount + 2
+  );
+  const siblingsEnd = Math.min(
+    Math.max(page + siblingCount, boundaryCount + siblingCount * 2 + 2),
+    count - boundaryCount - 1
+  );
+  const itemList = useMemo(
+    () => [
+      ...showFirstButton ? ["first"] : [],
+      ...hidePrevButton ? [] : ["previous"],
+      ...startPages,
+      ...siblingsStart > boundaryCount + 2 ? ["start-ellipsis"] : boundaryCount + 1 < count - boundaryCount ? [boundaryCount + 1] : [],
+      ...range(siblingsStart, siblingsEnd),
+      ...siblingsEnd < count - boundaryCount - 1 ? ["end-ellipsis"] : count - boundaryCount > boundaryCount ? [count - boundaryCount] : [],
+      ...endPages,
+      ...hideNextButton ? [] : ["next"],
+      ...showLastButton ? ["last"] : []
+    ],
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+      page,
+      count,
+      boundaryCount,
+      siblingCount,
+      showFirstButton,
+      showLastButton,
+      hidePrevButton,
+      hideNextButton
+    ]
+  );
+  const buttonPage = (type) => {
+    switch (type) {
+      case "first":
+        return 1;
+      case "previous":
+        return page - 1;
+      case "next":
+        return page + 1;
+      case "last":
+        return count;
+      default:
+        return null;
+    }
+  };
+  const items = itemList.map(
+    (item, i) => typeof item === "number" ? {
+      id: `page_${i}`,
+      onClick: () => handleClick(item),
+      type: "page",
+      page: item,
+      selected: item === page,
+      disabled,
+      "aria-current": item === page ? "page" : undefined
+    } : {
+      id: `${item}_${i}`,
+      onClick: () => handleClick(buttonPage(item)),
+      type: item,
+      page: buttonPage(item),
+      selected: false,
+      disabled: disabled || !item.includes("ellipsis") && (item === "next" || item === "last" ? page >= count : page <= 1)
+    }
+  );
+  return { page, setPage, items };
+};
+
+export { usePagination };