@yeverlibs/ds 1.0.4 → 1.0.6

package/dist/index.mjs

@@ -1,7 +1,7 @@
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import * as React107 from 'react';
-import React107__default, { forwardRef, createContext, useState, useEffect, memo, useCallback, useContext, useRef, Suspense } from 'react';
+import React107__default, { forwardRef, createContext, useState, useEffect, memo, useCallback, useContext, useRef } from 'react';
 import { usePathname, useRouter, useSearchParams } from 'next/navigation';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import tw5 from 'tailwind-styled-components';
@@ -6135,6 +6135,26 @@ var Skeleton = ({ className }) => {
   return /* @__PURE__ */ jsx("div", { className: cn("animate-pulse rounded-md bg-gray-200", className) });
 };
 var RESET_PAGE = 1;
+var defaultUpdateUrlParam = (key, value) => {
+  if (typeof window === "undefined") return;
+  const params = new URLSearchParams(window.location.search);
+  if (value) {
+    params.set(key, value);
+  } else {
+    params.delete(key);
+  }
+  const queryString = params.toString();
+  const newUrl = queryString ? `${window.location.pathname}?${queryString}` : window.location.pathname;
+  window.history.replaceState(null, "", newUrl);
+};
+var defaultGetUrlParam = (key, defaultValue = "") => {
+  if (typeof window === "undefined") return defaultValue;
+  const params = new URLSearchParams(window.location.search);
+  const value = params.get(key);
+  if (value === null) return defaultValue;
+  if (typeof defaultValue === "number") return Number(value) || defaultValue;
+  return value;
+};
 var TableContent = ({
   columns,
   data,
@@ -6150,9 +6170,11 @@ var TableContent = ({
   onPaginateAction,
   noPagination,
   wrapperClassName,
-  noBackground = false
+  noBackground = false,
+  getUrlParam,
+  updateUrlParam,
+  getPathname
 }) => {
-  const pathname = usePathname();
   const actionMenuRef = useRef(null);
   const [visibleActionRow, setVisibleActionRow] = useState(null);
   const [isLoading, setIsLoading] = useState(false);
@@ -6160,20 +6182,29 @@ var TableContent = ({
   const [searchQuery, setSearchQuery] = useState("");
   const [itemsPerPage, setItemsPerPage] = useState(10);
   const [selectedRows, setSelectedRows] = useState(/* @__PURE__ */ new Set());
-  const searchParams = useSearchParams();
-  const perPage = Number(searchParams?.get("perPage")) || 10;
-  const page = Number(searchParams?.get("page")) || 1;
-  const searchParam = searchParams?.get("search") || "";
+  const getUrlParamValue = getUrlParam || defaultGetUrlParam;
+  const updateUrlParamValue = updateUrlParam || defaultUpdateUrlParam;
+  getUrlParamValue("perPage", 10);
+  const page = getUrlParamValue("page", 1);
+  getUrlParamValue("search", "");
+  const handlePagination = useCallback(async () => {
+    if (!onPaginateAction) return;
+    setIsLoading(true);
+    await onPaginateAction();
+    setIsLoading(false);
+  }, [onPaginateAction]);
   useEffect(() => {
     setCurrentPage(page);
   }, [page]);
   useEffect(() => {
-    const searchParams2 = new URLSearchParams(window.location.search);
-    if (searchParams2.toString().length > 0) {
+    if (typeof window === "undefined") return;
+    const searchParams = new URLSearchParams(window.location.search);
+    if (searchParams.toString().length > 0) {
       onPaginateAction?.();
     }
-  }, []);
+  }, [onPaginateAction]);
   useEffect(() => {
+    if (typeof window === "undefined") return;
     const shouldReset = document.cookie.includes("reset-table-params=true");
     if (shouldReset) {
       document.cookie = "reset-table-params=; max-age=0; path=/";
@@ -6189,38 +6220,39 @@ var TableContent = ({
       }
       window.history.replaceState({}, "", url);
     }
-  }, [pathname]);
+  }, []);
   useEffect(() => {
-    if (!pathname) return;
-    if (searchParams?.has("perPage")) {
-      setItemsPerPage(perPage);
-      nextReplaceUrl("perPage", String(perPage), pathname);
-      handlePagination();
-    }
-    if (searchParams?.has("search")) {
-      setSearchQuery(searchParam);
-      nextReplaceUrl("search", searchParam, pathname);
-      handlePagination();
-    }
-  }, [perPage, searchParam]);
-  const handlePagination = async () => {
-    if (!onPaginateAction) return;
-    setIsLoading(true);
-    await onPaginateAction();
-    setIsLoading(false);
-  };
+    if (!getUrlParam && typeof window === "undefined") return;
+    const urlPerPage = getUrlParamValue("perPage", 10);
+    const urlSearch = getUrlParamValue("search", "");
+    if (urlPerPage !== itemsPerPage) {
+      setItemsPerPage(urlPerPage);
+      if (onPaginateAction) {
+        handlePagination();
+      }
+    }
+    if (urlSearch !== searchQuery) {
+      setSearchQuery(urlSearch);
+      if (onPaginateAction) {
+        handlePagination();
+      }
+    }
+  }, [itemsPerPage, searchQuery, handlePagination, getUrlParam, getUrlParamValue, onPaginateAction]);
   const totalPages = pagination ? Math.ceil(pagination.total / itemsPerPage) : 1;
-  const paginatedData = data;
+  const paginatedData = data || [];
   const visibleColumns = columns.filter((column) => !hiddenColumns.includes(column.accessor));
   const headersWithContent = visibleColumns.filter((column) => column.Header);
+  if (visibleColumns.length === 0 && columns.length > 0) {
+    console.warn("Table: Todas as colunas est\xE3o ocultas. Verifique a prop hiddenColumns.");
+  }
   const handleSearch = (e) => {
     setSearchQuery(e.target.value);
   };
   const handleSearchSubmit = () => {
-    if (!pathname) return;
-    Promise.all([nextReplaceUrl("search", searchQuery, pathname), nextReplaceUrl("page", "1", pathname)]).then(() => {
-      handlePagination();
-    });
+    updateUrlParamValue("search", searchQuery);
+    updateUrlParamValue("page", "1");
+    setCurrentPage(1);
+    handlePagination();
   };
   const handleClickOutside = useCallback((event) => {
     if (actionMenuRef.current && !actionMenuRef.current.contains(event.target)) {
@@ -6275,7 +6307,7 @@ var TableContent = ({
         return cellValue;
       }
     };
-    return isLink && linkHref ? /* @__PURE__ */ jsx(Link2, { href: linkHref, children: content() }) : content();
+    return isLink && linkHref ? /* @__PURE__ */ jsx("a", { href: linkHref, className: "text-blue-600 hover:text-blue-800 underline", children: content() }) : content();
   };
   if (isLoading) {
     return /* @__PURE__ */ jsxs(
@@ -6379,7 +6411,7 @@ var TableContent = ({
                   onChange: handleSelectAllRows
                 }
               ) }),
-              headersWithContent.length === 1 ? /* @__PURE__ */ jsx(
+              headersWithContent.length === 1 && visibleColumns.length > 0 ? /* @__PURE__ */ jsx(
                 "th",
                 {
                   colSpan: visibleColumns.length,
@@ -6393,10 +6425,10 @@ var TableContent = ({
                   style: { minWidth: columnWidths[index] },
                   children: column.Header ?? ""
                 },
-                column.id || index
+                column.id || `column-${index}`
               ))
             ] }) }),
-            /* @__PURE__ */ jsx("tbody", { children: paginatedData?.length > 0 ? paginatedData?.map((row, rowIndex) => /* @__PURE__ */ jsxs(
+            /* @__PURE__ */ jsx("tbody", { children: paginatedData && paginatedData.length > 0 ? paginatedData.map((row, rowIndex) => /* @__PURE__ */ jsxs(
               "tr",
               {
                 className: cn(
@@ -6455,15 +6487,18 @@ var TableContent = ({
                 ]
               },
               rowIndex
-            )) : /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { colSpan: columns.length + (selectable ? 1 : 0), style: { textAlign: "center" }, children: /* @__PURE__ */ jsxs("div", { className: "py-6", children: [
+            )) : /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { colSpan: visibleColumns.length + (selectable ? 1 : 0), style: { textAlign: "center" }, children: /* @__PURE__ */ jsxs("div", { className: "py-6", children: [
               /* @__PURE__ */ jsx(
-                Image4,
+                "img",
                 {
                   src: "/empty-table.svg",
                   width: 666,
                   height: 329,
                   alt: "Nenhum resultado encontrado",
-                  className: "mx-auto"
+                  className: "mx-auto",
+                  onError: (e) => {
+                    e.currentTarget.style.display = "none";
+                  }
                 }
               ),
               /* @__PURE__ */ jsxs("div", { className: "mt-8", children: [
@@ -6494,16 +6529,12 @@ var TableContent = ({
             {
               value: itemsPerPage,
               onChange: async (e) => {
-                if (!pathname) return;
                 const newPerPage = Number(e.target.value);
                 setItemsPerPage(newPerPage);
                 setCurrentPage(RESET_PAGE);
-                Promise.all([
-                  nextReplaceUrl("page", "1", pathname),
-                  nextReplaceUrl("perPage", String(newPerPage), pathname)
-                ]).then(() => {
-                  handlePagination();
-                });
+                updateUrlParamValue("page", "1");
+                updateUrlParamValue("perPage", String(newPerPage));
+                handlePagination();
               },
               className: "block h-8 w-full cursor-pointer appearance-none rounded border border-gray-300 bg-white p-2 text-sm leading-tight text-gray-700 focus:border-gray-500 focus:bg-white focus:outline-none",
               children: [
@@ -6533,7 +6564,23 @@ var TableContent = ({
   ] }) });
 };
 var Table = (props) => {
-  return /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx(TableContent, { ...props }) });
+  if (!props.columns || props.columns.length === 0) {
+    return /* @__PURE__ */ jsx(
+      Box,
+      {
+        className: cn(
+          "flex flex-col overflow-hidden",
+          props.wrapperClassName,
+          props.noBackground ? "bg-transparent border-none p-0" : ""
+        ),
+        children: /* @__PURE__ */ jsx("div", { className: "p-6", children: /* @__PURE__ */ jsx(Text, { $as: "p", children: "Nenhuma coluna definida para a tabela." }) })
+      }
+    );
+  }
+  if (!props.data) {
+    console.warn('Table: A prop "data" n\xE3o foi fornecida ou \xE9 undefined.');
+  }
+  return /* @__PURE__ */ jsx(TableContent, { ...props });
 };
 var Tabs = ({ headers, children, noGap, active, alignDiv = "full" }) => {
   const [activeTab, setActiveTab] = useState(active || 0);