@charlesgomes/leafcode-shared-lib-react 1.0.0 → 1.0.2

package/dist/index.css

@@ -11,15 +11,18 @@
 }
 .tableClassName {
   font-weight: 500;
+  font-family: "Roboto", sans-serif;
   font-size: 0.875rem;
 }
 .paginatorClassName {
   padding: 0 0 0.75rem 0;
   font-weight: 500;
+  font-family: "Roboto", sans-serif;
   font-size: 0.875rem;
 }
 .custom-input {
   font-weight: 500;
+  font-family: "Roboto", sans-serif;
   font-size: 0.875rem;
   color: #1c1c1c;
   padding: 0 1.25rem;
@@ -61,6 +64,7 @@
 }
 .pageReport {
   font-weight: 500;
+  font-family: "Roboto", sans-serif;
   font-size: 0.875rem;
   color: #191919;
   padding: 0 0.5rem;
@@ -70,19 +74,16 @@
   max-height: 34px;
   margin-inline-end: 1rem;
 }
-@media (min-width: 640px) {
-  .custom-select {
-    margin-inline-end: 2rem;
-  }
-}
 .custom-select-filtro {
   height: 2rem;
   font-weight: 500;
+  font-family: "Roboto", sans-serif;
   font-size: 0.875rem;
 }
 .mensagem-nenhum-dado {
   text-align: center;
   font-weight: 500;
+  font-family: "Roboto", sans-serif;
   padding: 2rem 0;
   color: #191919;
 }
@@ -100,6 +101,7 @@
 }
 table {
   border-collapse: separate;
+  border-right: 1px solid #edf0f2;
 }
 th {
   border-top: 1px solid #edf0f2;
@@ -114,7 +116,7 @@ th {
 td {
   border-bottom: 1px solid #edf0f2;
   border-left: 1px solid #edf0f2;
-  padding: 5px 14px;
+  padding: 5px 1rem;
 }
 .p-datatable .p-datatable-header {
   background: transparent;
@@ -130,7 +132,6 @@ td {
   -webkit-appearance: none;
   -moz-appearance: none;
   background: #fff url("./seta-T37FWQKV.svg") no-repeat right 6px center;
-  padding-right: 2rem;
 }
 .react-tooltip {
   z-index: 99 !important;
@@ -153,8 +154,8 @@ th {
   font-weight: 500;
 }
 .p-checkbox .p-checkbox-box {
-  width: 18px;
-  height: 18px;
+  width: 1rem;
+  height: 1rem;
   border: 1px solid #094394 !important;
   border-radius: 4px !important;
   background-color: #fff;
@@ -164,8 +165,12 @@ th {
   background: #094394;
 }
 .p-checkbox {
-  width: 18px;
-  height: 18px;
+  width: 1rem;
+  height: 1rem;
+}
+.p-column-header-content .p-checkbox {
+  position: relative;
+  left: -2px;
 }
 .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
   border-color: #094394;
@@ -194,6 +199,7 @@ th {
 .p-dropdown-item-label {
   padding: 6px 1rem;
   font-weight: 500;
+  font-family: "Roboto", sans-serif;
 }
 .p-dropdown-panel .p-dropdown-items .p-dropdown-item {
   margin: 0;
@@ -454,9 +460,14 @@ th:has(.p-column-filter-menu-button.p-column-filter-menu-button-active) .p-icon.
     position: relative;
     top: 4px !important;
   }
+}
+@media (max-width: 567px) {
   .disablePagination,
   .paginatorLeft {
-    display: flex;
+    display: grid;
     gap: 1rem;
   }
+  .custom-select {
+    min-width: 100%;
+  }
 }

package/dist/index.js

@@ -83,7 +83,7 @@ var import_api = require("primereact/api");
 // src/components/DataTableAdvancedFilter/TableHeader.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var TableHeader = ({ globalFilterValue, onGlobalFilterChange }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     import_inputtext.InputText,
     {
       value: globalFilterValue,
@@ -91,7 +91,7 @@ var TableHeader = ({ globalFilterValue, onGlobalFilterChange }) => {
       placeholder: "Pesquisar...",
       className: "custom-input"
     }
-  ) });
+  );
 };
 var TableHeader_default = TableHeader;
 
@@ -463,13 +463,15 @@ function DataTableAdvancedFilterWrapper({
     setSearchText(value);
     setPage(1);
     setFirst(0);
-    updateUrlParams({ page: 1, filter: value });
   };
   const onSort = (e) => {
     setSortField(e.sortField);
     setSortOrder(e.sortOrder);
     updateUrlParams({ sortField: e.sortField, sortOrder: e.sortOrder });
   };
+  (0, import_react4.useEffect)(() => {
+    updateUrlParams({ page: 1, filter: debouncedSearch });
+  }, [debouncedSearch]);
   (0, import_react4.useEffect)(() => {
     if (customers?.items && selectedRowsData.length > 0) {
       const currentIds = new Set(customers.items.map((item) => item.id));
@@ -501,7 +503,15 @@ function DataTableAdvancedFilterWrapper({
         }
       )
     ] }),
-    [selectedRowsData, onNew, onEdit, onDelete, customActions]
+    [
+      searchText,
+      onGlobalFilterChange,
+      selectedRowsData,
+      onNew,
+      onEdit,
+      onDelete,
+      customActions
+    ]
   );
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx_runtime7.Fragment, { children: isClient && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { children: [
     disablePagination && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "disablePagination", children: globalFilterFields.length > 0 && TableHeaderAndTableActions }),

package/dist/index.mjs

@@ -38,7 +38,7 @@ import { FilterMatchMode } from "primereact/api";
 // src/components/DataTableAdvancedFilter/TableHeader.tsx
 import { jsx as jsx2 } from "react/jsx-runtime";
 var TableHeader = ({ globalFilterValue, onGlobalFilterChange }) => {
-  return /* @__PURE__ */ jsx2("div", { children: /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx2(
     InputText,
     {
       value: globalFilterValue,
@@ -46,7 +46,7 @@ var TableHeader = ({ globalFilterValue, onGlobalFilterChange }) => {
       placeholder: "Pesquisar...",
       className: "custom-input"
     }
-  ) });
+  );
 };
 var TableHeader_default = TableHeader;
 
@@ -418,13 +418,15 @@ function DataTableAdvancedFilterWrapper({
     setSearchText(value);
     setPage(1);
     setFirst(0);
-    updateUrlParams({ page: 1, filter: value });
   };
   const onSort = (e) => {
     setSortField(e.sortField);
     setSortOrder(e.sortOrder);
     updateUrlParams({ sortField: e.sortField, sortOrder: e.sortOrder });
   };
+  useEffect2(() => {
+    updateUrlParams({ page: 1, filter: debouncedSearch });
+  }, [debouncedSearch]);
   useEffect2(() => {
     if (customers?.items && selectedRowsData.length > 0) {
       const currentIds = new Set(customers.items.map((item) => item.id));
@@ -456,7 +458,15 @@ function DataTableAdvancedFilterWrapper({
         }
       )
     ] }),
-    [selectedRowsData, onNew, onEdit, onDelete, customActions]
+    [
+      searchText,
+      onGlobalFilterChange,
+      selectedRowsData,
+      onNew,
+      onEdit,
+      onDelete,
+      customActions
+    ]
   );
   return /* @__PURE__ */ jsx7(Fragment3, { children: isClient && /* @__PURE__ */ jsxs3("div", { children: [
     disablePagination && /* @__PURE__ */ jsx7("div", { className: "disablePagination", children: globalFilterFields.length > 0 && TableHeaderAndTableActions }),

package/dist/styles/table.css

@@ -12,17 +12,20 @@
 
 .tableClassName {
   font-weight: 500;
+  font-family: "Roboto", sans-serif;
   font-size: 0.875rem;
 }
 
 .paginatorClassName {
   padding: 0 0 0.75rem 0;
   font-weight: 500;
+  font-family: "Roboto", sans-serif;
   font-size: 0.875rem;
 }
 
 .custom-input {
   font-weight: 500;
+  font-family: "Roboto", sans-serif;
   font-size: 0.875rem;
   color: #1c1c1c;
   padding: 0 1.25rem;
@@ -71,6 +74,7 @@
 
 .pageReport {
   font-weight: 500;
+  font-family: "Roboto", sans-serif;
   font-size: 0.875rem;
   color: #191919;
   padding: 0 0.5rem;
@@ -82,21 +86,17 @@
   margin-inline-end: 1rem;
 }
 
-@media (min-width: 640px) {
-  .custom-select {
-    margin-inline-end: 2rem;
-  }
-}
-
 .custom-select-filtro {
   height: 2rem;
   font-weight: 500;
+  font-family: "Roboto", sans-serif;
   font-size: 0.875rem;
 }
 
 .mensagem-nenhum-dado {
   text-align: center;
   font-weight: 500;
+  font-family: "Roboto", sans-serif;
   padding: 2rem 0;
   color: #191919;
 }
@@ -117,7 +117,7 @@
 
 table {
   border-collapse: separate;
-  /* border-right: 1px solid #edf0f2; */
+  border-right: 1px solid #edf0f2;
 }
 
 th {
@@ -134,7 +134,7 @@ th {
 td {
   border-bottom: 1px solid #edf0f2;
   border-left: 1px solid #edf0f2;
-  padding: 5px 14px;
+  padding: 5px 1rem;
 }
 
 .p-datatable .p-datatable-header {
@@ -154,7 +154,6 @@ td {
   -webkit-appearance: none;
   -moz-appearance: none;
   background: #fff url("../assets/images/seta.svg") no-repeat right 6px center;
-  padding-right: 2rem;
 }
 
 .react-tooltip {
@@ -183,8 +182,8 @@ th {
 }
 
 .p-checkbox .p-checkbox-box {
-  width: 18px;
-  height: 18px;
+  width: 1rem;
+  height: 1rem;
   border: 1px solid #094394 !important;
   border-radius: 4px !important;
   background-color: #fff;
@@ -196,8 +195,13 @@ th {
 }
 
 .p-checkbox {
-  width: 18px;
-  height: 18px;
+  width: 1rem;
+  height: 1rem;
+}
+
+.p-column-header-content .p-checkbox {
+  position: relative;
+  left: -2px;
 }
 
 .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight
@@ -232,6 +236,7 @@ th {
 .p-dropdown-item-label {
   padding: 6px 1rem;
   font-weight: 500;
+  font-family: "Roboto", sans-serif;
 }
 
 .p-dropdown-panel .p-dropdown-items .p-dropdown-item {
@@ -539,10 +544,16 @@ th:has(.p-column-filter-menu-button.p-column-filter-menu-button-active)
     position: relative;
     top: 4px !important;
   }
+}
 
+@media (max-width: 567px) {
   .disablePagination,
   .paginatorLeft {
-    display: flex;
+    display: grid;
     gap: 1rem;
   }
+
+  .custom-select {
+    min-width: 100%;
+  }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@charlesgomes/leafcode-shared-lib-react",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "Lib de componentes react",
   "main": "dist/index.cjs",
   "module": "dist/index.mjs",
@@ -56,4 +56,4 @@
     "tailwind-merge": "^3.3.1",
     "primereact": "^10.9.7"
   }
-}
+}