lecom-ui 5.0.15 → 5.1.1

package/dist/pagination.js

@@ -1,474 +0,0 @@
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import * as React from 'react';
-import { ChevronLeftIcon, ChevronRightIcon, DotsHorizontalIcon } from '@radix-ui/react-icons';
-import { ChevronsLeftIcon, ChevronsRightIcon } from 'lucide-react';
-import { cn } from './lib/utils.js';
-import { buttonVariants } from './button.js';
-import { Input } from './input.js';
-import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from './select.js';
-
-const PaginationSection = ({ className, ...props }) => /* @__PURE__ */ jsx(
-  "nav",
-  {
-    role: "navigation",
-    "aria-label": "pagination",
-    className: cn("mx-auto flex w-full justify-center", className),
-    ...props
-  }
-);
-PaginationSection.displayName = "PaginationSection";
-const PaginationContent = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  "ul",
-  {
-    ref,
-    className: cn("flex flex-row items-center gap-1", className),
-    ...props
-  }
-));
-PaginationContent.displayName = "PaginationContent";
-const PaginationItem = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("li", { ref, className: cn("", className), ...props }));
-PaginationItem.displayName = "PaginationItem";
-const PaginationLink = ({
-  className,
-  isActive,
-  size = "icon",
-  ...props
-}) => /* @__PURE__ */ jsx(
-  "a",
-  {
-    "aria-current": isActive ? "page" : void 0,
-    className: cn(
-      buttonVariants({
-        variant: isActive ? "outline" : "ghost",
-        size
-      }),
-      className
-    ),
-    ...props
-  }
-);
-PaginationLink.displayName = "PaginationLink";
-const PaginationPrevious = ({
-  hiddenText = false,
-  className,
-  children,
-  ...props
-}) => /* @__PURE__ */ jsxs(
-  PaginationLink,
-  {
-    "aria-label": "Go to previous page",
-    size: "default",
-    className: cn(!hiddenText && "gap-1 pl-2.5", className),
-    ...props,
-    children: [
-      children,
-      !children && /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(ChevronLeftIcon, { className: "h-4 w-4" }),
-        !hiddenText && /* @__PURE__ */ jsx("span", { children: "Previous" })
-      ] })
-    ]
-  }
-);
-PaginationPrevious.displayName = "PaginationPrevious";
-const PaginationNext = ({
-  className,
-  hiddenText = false,
-  children,
-  ...props
-}) => /* @__PURE__ */ jsxs(
-  PaginationLink,
-  {
-    "aria-label": "Go to next page",
-    size: "default",
-    className: cn(!hiddenText && "gap-1 pl-2.5", className),
-    ...props,
-    children: [
-      children,
-      !children && /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(ChevronRightIcon, { className: "h-4 w-4" }),
-        !hiddenText && /* @__PURE__ */ jsx("span", { children: "Previous" })
-      ] })
-    ]
-  }
-);
-PaginationNext.displayName = "PaginationNext";
-const PaginationEllipsis = ({
-  className,
-  ...props
-}) => /* @__PURE__ */ jsxs(
-  "span",
-  {
-    "aria-hidden": true,
-    className: cn("flex h-9 w-9 items-center justify-center", className),
-    ...props,
-    children: [
-      /* @__PURE__ */ jsx(DotsHorizontalIcon, { className: "h-4 w-4" }),
-      /* @__PURE__ */ jsx("span", { className: "sr-only", children: "More pages" })
-    ]
-  }
-);
-PaginationEllipsis.displayName = "PaginationEllipsis";
-const Pagination = ({
-  align,
-  current,
-  defaultCurrent = 1,
-  defaultPageSize = 10,
-  disabled = false,
-  hideOnSinglePage = false,
-  itemRender,
-  pageSize,
-  pageSizeOptions = [5, 10, 20, 50, 100],
-  responsive,
-  showLessItems = false,
-  showQuickJumper = false,
-  showSizeChanger = false,
-  showTotal,
-  simple = false,
-  size = "default",
-  total,
-  onChange,
-  onShowSizeChange,
-  textGoToPage = ""
-}) => {
-  const [internalCurrent, setInternalCurrent] = React.useState(
-    current || defaultCurrent
-  );
-  const [internalPageSize, setInternalPageSize] = React.useState(
-    pageSize || defaultPageSize
-  );
-  const [hoveredEllipsis, setHoveredEllipsis] = React.useState(null);
-  const totalPages = Math.ceil(total / internalPageSize);
-  React.useEffect(() => {
-    if (current !== void 0) {
-      setInternalCurrent(current);
-    }
-  }, [current]);
-  React.useEffect(() => {
-    if (pageSize !== void 0) {
-      setInternalPageSize(pageSize);
-    }
-  }, [pageSize]);
-  const handlePageChange = (page, disabled2 = false) => {
-    if (!disabled2) {
-      if (!current) {
-        setInternalCurrent(page);
-      }
-      if (onChange) {
-        onChange(page, internalPageSize);
-      }
-    }
-  };
-  const handleSizeChange = (value) => {
-    const newSize = parseInt(value, 10);
-    setInternalPageSize(newSize);
-    if (onShowSizeChange) {
-      onShowSizeChange(internalCurrent, newSize);
-    }
-    if (onChange) {
-      onChange(internalCurrent, newSize);
-    }
-  };
-  const handleQuickJump = (event) => {
-    if (event.key === "Enter") {
-      const page = Math.min(Math.max(1, internalCurrent), totalPages);
-      handlePageChange(page);
-    }
-  };
-  if (hideOnSinglePage && totalPages <= 1) {
-    return null;
-  }
-  const renderItem = (page, type) => {
-    const originalElement = /* @__PURE__ */ jsx("span", { children: page });
-    return itemRender ? itemRender(page, type, originalElement) : originalElement;
-  };
-  const renderPages = () => {
-    if (simple) {
-      const isReadOnly = typeof simple === "object" && simple.readOnly;
-      return /* @__PURE__ */ jsx("div", { className: "flex items-center", children: isReadOnly ? /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-1", children: [
-        /* @__PURE__ */ jsx(
-          "span",
-          {
-            className: cn(
-              "text-center w-10 h-6",
-              size === "small" && "text-xs",
-              disabled && "cursor-not-allowed text-gray-scale79 hover:text-gray-scale79"
-            ),
-            children: internalCurrent
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "span",
-          {
-            className: cn(
-              disabled && "cursor-not-allowed text-gray-scale96"
-            ),
-            children: "/"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "span",
-          {
-            className: cn(
-              "text-center w-10 h-6",
-              size === "small" && "text-xs",
-              disabled && "cursor-not-allowed text-gray-scale79 hover:text-gray-scale79"
-            ),
-            children: totalPages
-          }
-        )
-      ] }) : /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-2", children: [
-        /* @__PURE__ */ jsx(
-          Input,
-          {
-            type: "text",
-            className: cn(
-              "text-center border rounded px-2 py-1 w-14 h-6 border-gray-scale79",
-              size === "small" && "text-xs",
-              disabled && "cursor-not-allowed text-gray-scale79 bg-gray-scale96 border-gray-scale79 hover:text-gray-scale79 hover:bg-gray-scale96"
-            ),
-            value: internalCurrent,
-            onChange: (e) => {
-              const value = e.target.value.replace(/[^0-9]/g, "");
-              setInternalCurrent(value ? Number(value) : 0);
-            },
-            onKeyDown: (e) => {
-              if (e.key === "Enter") {
-                handleQuickJump(e);
-              }
-            },
-            disabled
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "span",
-          {
-            className: cn(
-              disabled && "cursor-not-allowed text-gray-scale96"
-            ),
-            children: "/"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "span",
-          {
-            className: cn(
-              "px-2 py-1",
-              size === "small" && "px-1 h-[26px] text-xs",
-              disabled && "cursor-not-allowed text-gray-scale79"
-            ),
-            children: totalPages
-          }
-        )
-      ] }) });
-    }
-    const renderPageItem = (page) => /* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(
-      PaginationLink,
-      {
-        className: cn(
-          "w-8 h-8 bg-white text-black font-normal cursor-pointer",
-          page === internalCurrent && "border border-blue-dark text-blue-dark hover:text-blue-dark hover:bg-white font-bold",
-          disabled && "cursor-not-allowed text-gray-scale79 hover:text-gray-scale79 hover:bg-white",
-          page === internalCurrent && disabled && "cursor-not-allowed text-gray-scale79 bg-gray-scale96 border-gray-scale96 hover:text-gray-scale79 hover:bg-gray-scale96",
-          size === "small" && "w-6 h-[26px] text-xs"
-        ),
-        onClick: () => typeof page === "number" && handlePageChange(page, disabled),
-        children: typeof page === "number" ? renderItem(page, "page") : "..."
-      }
-    ) }, page);
-    const renderEllipsis = (key, direction) => /* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(
-      PaginationLink,
-      {
-        className: cn(
-          "w-8 h-8 cursor-pointer bg-white hover:bg-white",
-          size === "small" && "px-1 h-[26px] text-xs",
-          disabled && "cursor-not-allowed text-gray-scale79 hover:text-gray-scale79 hover:bg-white"
-        ),
-        onMouseEnter: () => setHoveredEllipsis(key),
-        onMouseLeave: () => setHoveredEllipsis(null),
-        onClick: () => {
-          if (!disabled) {
-            const quantityPages = showLessItems ? 3 : 5;
-            if (direction === "left") {
-              handlePageChange(
-                Math.max(1, internalCurrent - quantityPages),
-                disabled
-              );
-            } else {
-              handlePageChange(
-                Math.min(totalPages, internalCurrent + quantityPages),
-                disabled
-              );
-            }
-          }
-        },
-        children: hoveredEllipsis === key && !disabled ? direction === "left" ? /* @__PURE__ */ jsx(ChevronsLeftIcon, { className: "w-4 h-4 text-blue-dark" }) : /* @__PURE__ */ jsx(ChevronsRightIcon, { className: "w-4 h-4 text-blue-dark" }) : /* @__PURE__ */ jsx(PaginationEllipsis, {})
-      }
-    ) }, key);
-    const pages = [];
-    const pagesArray = Array.from(
-      { length: totalPages },
-      (_, index) => index + 1
-    );
-    if (showLessItems && totalPages > 5) {
-      const startPages = [2].filter((page) => page <= totalPages);
-      const endPages = [totalPages - 1].filter(
-        (page) => page > 3 && page <= totalPages
-      );
-      const middlePage = internalCurrent;
-      return /* @__PURE__ */ jsxs(Fragment, { children: [
-        renderPageItem(1),
-        internalCurrent <= 3 && startPages.map((page) => renderPageItem(page)),
-        internalCurrent > 3 && renderEllipsis("start-ellipsis", "left"),
-        internalCurrent > 2 && internalCurrent < totalPages - 1 && renderPageItem(middlePage),
-        internalCurrent < totalPages - 2 && renderEllipsis("end-ellipsis", "right"),
-        internalCurrent >= totalPages - 2 && endPages.map((page) => renderPageItem(page)),
-        renderPageItem(totalPages)
-      ] });
-    }
-    if (totalPages <= 7) {
-      for (let i = 1; i <= totalPages; i++) {
-        pages.push(i);
-      }
-    } else {
-      const lastFourPages = pagesArray.slice(-4);
-      const arrayEndPages = internalCurrent === lastFourPages[0] ? [totalPages - 4, totalPages - 3, totalPages - 2, totalPages - 1] : [totalPages - 3, totalPages - 2, totalPages - 1];
-      const endPages = arrayEndPages;
-      const firstFourPages = pagesArray.slice(0, 4);
-      const arrayStartPages = internalCurrent === firstFourPages[firstFourPages.length - 1] ? [2, 3, 4, 5] : [2, 3, 4];
-      const startPages = arrayStartPages.filter((page) => page <= totalPages);
-      const middlePage = [];
-      if (internalCurrent > totalPages - 4) {
-        middlePage.push(1);
-        middlePage.push("...");
-        for (let i = totalPages - 3; i <= totalPages; i++) {
-          middlePage.push(i);
-        }
-      } else {
-        middlePage.push(internalCurrent - 1);
-        middlePage.push(internalCurrent);
-        middlePage.push(internalCurrent + 1);
-      }
-      return /* @__PURE__ */ jsxs(Fragment, { children: [
-        renderPageItem(1),
-        internalCurrent <= 4 && startPages.map((page) => renderPageItem(page)),
-        internalCurrent > 4 && renderEllipsis("start-ellipsis", "left"),
-        internalCurrent > 4 && internalCurrent < totalPages - 3 && middlePage.map(
-          (page) => typeof page === "number" && renderPageItem(page)
-        ),
-        internalCurrent < totalPages - 3 && renderEllipsis("end-ellipsis", "right"),
-        internalCurrent >= totalPages - 3 && endPages.map((page) => renderPageItem(page)),
-        renderPageItem(totalPages)
-      ] });
-    }
-    return pages.filter((page) => typeof page === "number").map((page) => renderPageItem(page));
-  };
-  return /* @__PURE__ */ jsxs(
-    PaginationSection,
-    {
-      className: cn(
-        "flex items-center gap-2",
-        align && `justify-${align}`,
-        size === "small" && "text-sm",
-        responsive && "w-full"
-      ),
-      children: [
-        showTotal && /* @__PURE__ */ jsx("div", { className: cn("mr-2", size === "small" && "text-xs"), children: showTotal(total, [
-          (internalCurrent - 1) * internalPageSize + 1,
-          Math.min(internalCurrent * internalPageSize, total)
-        ]) }),
-        /* @__PURE__ */ jsxs(PaginationContent, { className: "flex justify-center items-center", children: [
-          /* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(
-            PaginationPrevious,
-            {
-              className: cn(
-                "px-2 h-8 bg-white text-black cursor-pointer",
-                internalCurrent === 1 && "cursor-not-allowed opacity-50 hover:bg-transparent",
-                disabled && "cursor-not-allowed text-gray-scale79 border-gray-scale96 hover:text-gray-scale79 hover:bg-white",
-                size === "small" && "px-1 h-[26px] text-xs"
-              ),
-              onClick: () => handlePageChange(
-                Math.max(1, internalCurrent - 1),
-                disabled || internalCurrent === 1
-              ),
-              children: itemRender ? renderItem(internalCurrent - 1, "prev") : /* @__PURE__ */ jsx(ChevronLeftIcon, { className: "w-4 h-4" })
-            }
-          ) }),
-          renderPages(),
-          /* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(
-            PaginationNext,
-            {
-              className: cn(
-                "px-2 h-8 bg-white text-black cursor-pointer",
-                internalCurrent === totalPages && "cursor-not-allowed opacity-50 hover:bg-white",
-                disabled && "cursor-not-allowed text-gray-scale79 border-gray-scale96 hover:text-gray-scale79 hover:bg-white",
-                size === "small" && "px-1 h-[26px] text-xs"
-              ),
-              onClick: () => handlePageChange(
-                Math.min(totalPages, internalCurrent + 1),
-                internalCurrent === totalPages || disabled
-              ),
-              children: itemRender ? renderItem(internalCurrent + 1, "next") : /* @__PURE__ */ jsx(ChevronRightIcon, { className: "w-4 h-4" })
-            }
-          ) })
-        ] }),
-        showSizeChanger && totalPages >= 7 && /* @__PURE__ */ jsxs(
-          Select,
-          {
-            onValueChange: handleSizeChange,
-            value: internalPageSize.toString(),
-            disabled,
-            children: [
-              /* @__PURE__ */ jsx(
-                SelectTrigger,
-                {
-                  className: cn(
-                    "flex gap-2 ml-2 border rounded w-fit h-8",
-                    size === "small" && "px-2 h-[26px] text-xs",
-                    disabled && "cursor-not-allowed text-gray-scale60 bg-gray-scale96 border-gray-scale79 hover:text-gray-scale60 hover:bg-gray-scale96"
-                  ),
-                  children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Selecione..." })
-                }
-              ),
-              /* @__PURE__ */ jsx(SelectContent, { children: pageSizeOptions.map((size2) => /* @__PURE__ */ jsx(SelectItem, { value: size2.toString(), children: `${size2.toString()} / page` }, size2)) })
-            ]
-          }
-        ),
-        showQuickJumper && /* @__PURE__ */ jsxs(Fragment, { children: [
-          textGoToPage && /* @__PURE__ */ jsx("div", { className: cn("mx-2", size === "small" && "text-xs"), children: textGoToPage }),
-          /* @__PURE__ */ jsx(
-            Input,
-            {
-              type: "text",
-              className: cn(
-                "h-8 w-12 ml-2 border rounded px-2",
-                size === "small" && "px-2 h-[26px] text-xs",
-                disabled && "cursor-not-allowed text-gray-scale60 bg-gray-scale96 border-gray-scale79 hover:text-gray-scale60 hover:bg-gray-scale96",
-                textGoToPage && "ml-0"
-              ),
-              value: disabled ? "" : internalCurrent,
-              onChange: (e) => {
-                const value = e.target.value.replace(/[^0-9]/g, "");
-                setInternalCurrent(value ? Number(value) : 0);
-              },
-              onBlur: (e) => {
-                const value = e.target.value.replace(/[^0-9]/g, "");
-                if (Number(value) === 0) {
-                  setInternalCurrent(1);
-                }
-              },
-              onKeyDown: (e) => {
-                if (e.key === "Enter") {
-                  handleQuickJump(e);
-                }
-              },
-              disabled
-            }
-          )
-        ] })
-      ]
-    }
-  );
-};
-Pagination.displayName = "Pagination";
-
-export { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, PaginationSection };