@yeverlibs/ds 1.0.6 → 1.0.8

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 } from 'react';
+import React107__default, { forwardRef, createContext, useState, useEffect, memo, useCallback, useContext, useRef, Suspense } from 'react';
 import { usePathname, useRouter, useSearchParams } from 'next/navigation';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import tw5 from 'tailwind-styled-components';
@@ -6135,26 +6135,6 @@ 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,
@@ -6170,11 +6150,9 @@ var TableContent = ({
   onPaginateAction,
   noPagination,
   wrapperClassName,
-  noBackground = false,
-  getUrlParam,
-  updateUrlParam,
-  getPathname
+  noBackground = false
 }) => {
+  const pathname = usePathname();
   const actionMenuRef = useRef(null);
   const [visibleActionRow, setVisibleActionRow] = useState(null);
   const [isLoading, setIsLoading] = useState(false);
@@ -6182,29 +6160,20 @@ var TableContent = ({
   const [searchQuery, setSearchQuery] = useState("");
   const [itemsPerPage, setItemsPerPage] = useState(10);
   const [selectedRows, setSelectedRows] = useState(/* @__PURE__ */ new Set());
-  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]);
+  const searchParams = useSearchParams();
+  const perPage = Number(searchParams?.get("perPage")) || 10;
+  const page = Number(searchParams?.get("page")) || 1;
+  const searchParam = searchParams?.get("search") || "";
   useEffect(() => {
     setCurrentPage(page);
   }, [page]);
   useEffect(() => {
-    if (typeof window === "undefined") return;
-    const searchParams = new URLSearchParams(window.location.search);
-    if (searchParams.toString().length > 0) {
+    const searchParams2 = new URLSearchParams(window.location.search);
+    if (searchParams2.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=/";
@@ -6220,39 +6189,38 @@ var TableContent = ({
       }
       window.history.replaceState({}, "", url);
     }
-  }, []);
+  }, [pathname]);
   useEffect(() => {
-    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]);
+    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);
+  };
   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 = () => {
-    updateUrlParamValue("search", searchQuery);
-    updateUrlParamValue("page", "1");
-    setCurrentPage(1);
-    handlePagination();
+    if (!pathname) return;
+    Promise.all([nextReplaceUrl("search", searchQuery, pathname), nextReplaceUrl("page", "1", pathname)]).then(() => {
+      handlePagination();
+    });
   };
   const handleClickOutside = useCallback((event) => {
     if (actionMenuRef.current && !actionMenuRef.current.contains(event.target)) {
@@ -6307,7 +6275,7 @@ var TableContent = ({
         return cellValue;
       }
     };
-    return isLink && linkHref ? /* @__PURE__ */ jsx("a", { href: linkHref, className: "text-blue-600 hover:text-blue-800 underline", children: content() }) : content();
+    return isLink && linkHref ? /* @__PURE__ */ jsx(Link2, { href: linkHref, children: content() }) : content();
   };
   if (isLoading) {
     return /* @__PURE__ */ jsxs(
@@ -6411,7 +6379,7 @@ var TableContent = ({
                   onChange: handleSelectAllRows
                 }
               ) }),
-              headersWithContent.length === 1 && visibleColumns.length > 0 ? /* @__PURE__ */ jsx(
+              headersWithContent.length === 1 ? /* @__PURE__ */ jsx(
                 "th",
                 {
                   colSpan: visibleColumns.length,
@@ -6425,10 +6393,10 @@ var TableContent = ({
                   style: { minWidth: columnWidths[index] },
                   children: column.Header ?? ""
                 },
-                column.id || `column-${index}`
+                column.id || index
               ))
             ] }) }),
-            /* @__PURE__ */ jsx("tbody", { children: paginatedData && paginatedData.length > 0 ? paginatedData.map((row, rowIndex) => /* @__PURE__ */ jsxs(
+            /* @__PURE__ */ jsx("tbody", { children: paginatedData?.length > 0 ? paginatedData?.map((row, rowIndex) => /* @__PURE__ */ jsxs(
               "tr",
               {
                 className: cn(
@@ -6487,18 +6455,15 @@ var TableContent = ({
                 ]
               },
               rowIndex
-            )) : /* @__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("tr", { children: /* @__PURE__ */ jsx("td", { colSpan: columns.length + (selectable ? 1 : 0), style: { textAlign: "center" }, children: /* @__PURE__ */ jsxs("div", { className: "py-6", children: [
               /* @__PURE__ */ jsx(
-                "img",
+                Image4,
                 {
                   src: "/empty-table.svg",
                   width: 666,
                   height: 329,
                   alt: "Nenhum resultado encontrado",
-                  className: "mx-auto",
-                  onError: (e) => {
-                    e.currentTarget.style.display = "none";
-                  }
+                  className: "mx-auto"
                 }
               ),
               /* @__PURE__ */ jsxs("div", { className: "mt-8", children: [
@@ -6529,12 +6494,16 @@ var TableContent = ({
             {
               value: itemsPerPage,
               onChange: async (e) => {
+                if (!pathname) return;
                 const newPerPage = Number(e.target.value);
                 setItemsPerPage(newPerPage);
                 setCurrentPage(RESET_PAGE);
-                updateUrlParamValue("page", "1");
-                updateUrlParamValue("perPage", String(newPerPage));
-                handlePagination();
+                Promise.all([
+                  nextReplaceUrl("page", "1", pathname),
+                  nextReplaceUrl("perPage", String(newPerPage), pathname)
+                ]).then(() => {
+                  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: [
@@ -6564,23 +6533,7 @@ var TableContent = ({
   ] }) });
 };
 var Table = (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 });
+  return /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx(TableContent, { ...props }) });
 };
 var Tabs = ({ headers, children, noGap, active, alignDiv = "full" }) => {
   const [activeTab, setActiveTab] = useState(active || 0);