@charlesgomes/leafcode-shared-lib-react 1.0.56 → 1.0.57

package/dist/index.css

@@ -525,3 +525,25 @@ th {
 .p-datatable.p-datatable-gridlines .p-datatable-scrollable-table > .p-datatable-thead {
   top: 0;
 }
+.input-search {
+  padding-right: 2rem;
+  height: 2.25rem;
+  padding-left: 14px;
+}
+.close-search {
+  position: absolute;
+  top: 50%;
+  right: 10px;
+  transform: translateY(-50%);
+  cursor: pointer;
+  color: #bf1717;
+  width: 1.25rem;
+  height: 1.25rem;
+  padding: 3px;
+  transition: all 0.3s ease-in-out;
+  &:hover {
+    background-color: #bf1717;
+    color: #fff;
+    border-radius: 5rem;
+  }
+}

package/dist/index.js

@@ -181,10 +181,10 @@ function ModalBase({
 }
 
 // src/components/DataTableAdvancedFilter/DataTableAdvancedFilter.tsx
-var import_react8 = require("react");
+var import_react9 = require("react");
 
 // src/components/DataTableAdvancedFilter/DataTableAdvancedFilterWrapper.tsx
-var import_react6 = require("react");
+var import_react7 = require("react");
 var import_react_query = require("@tanstack/react-query");
 
 // src/primereact-compat.ts
@@ -196,29 +196,38 @@ var import_calendar = require("primereact/calendar");
 var import_api = require("primereact/api");
 
 // src/components/DataTableAdvancedFilter/TableHeader.tsx
+var import_react3 = require("@phosphor-icons/react");
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var TableHeader = ({
   globalFilterValue,
   onGlobalFilterChange,
   isLanguagePtBr
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-    import_inputtext.InputText,
-    {
-      value: globalFilterValue,
-      onChange: onGlobalFilterChange,
-      placeholder: isLanguagePtBr ? "Pesquisar..." : "Search...",
-      className: "custom-input"
-    }
-  );
+  const limparCampo = () => {
+    onGlobalFilterChange({
+      target: { value: "" }
+    });
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { position: "relative" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      import_inputtext.InputText,
+      {
+        value: globalFilterValue,
+        onChange: onGlobalFilterChange,
+        placeholder: isLanguagePtBr ? "Pesquisar..." : "Search...",
+        className: "custom-input input-search"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react3.X, { size: 16, className: "close-search", onClick: limparCampo })
+  ] });
 };
 var TableHeader_default = TableHeader;
 
 // src/components/DataTableAdvancedFilter/DataTableAdvancedFilterWrapper.tsx
-var import_react7 = require("@phosphor-icons/react");
+var import_react8 = require("@phosphor-icons/react");
 
 // src/components/DataTableAdvancedFilter/TableActions.tsx
-var import_react3 = require("@phosphor-icons/react");
+var import_react4 = require("@phosphor-icons/react");
 
 // src/utils/utils.ts
 var import_clsx = require("clsx");
@@ -283,7 +292,7 @@ function TableActions({
             enableButtonsNotMultiplesSelecteds && "disable-button-table-actions"
           ),
           disabled: enableButtonsNotMultiplesSelecteds,
-          children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react3.Plus, { size: 18 })
+          children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react4.Plus, { size: 18 })
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
@@ -306,7 +315,7 @@ function TableActions({
         ),
         disabled: disableButtonsNotMultiplesSelecteds,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react3.PencilSimple, { size: 18 }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react4.PencilSimple, { size: 18 }),
           /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
             TooltipCustom,
             {
@@ -329,7 +338,7 @@ function TableActions({
         ),
         disabled: !enableButtonsNotMultiplesSelecteds,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react3.Trash, { size: 18 }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react4.Trash, { size: 18 }),
           /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
             TooltipCustom,
             {
@@ -361,7 +370,7 @@ function TableActions({
 }
 
 // src/components/DataTableAdvancedFilter/ActionsColumn.tsx
-var import_react4 = require("@phosphor-icons/react");
+var import_react5 = require("@phosphor-icons/react");
 var import_jsx_runtime7 = require("react/jsx-runtime");
 function ActionsColumn({
   row,
@@ -382,7 +391,7 @@ function ActionsColumn({
           onEdit && onEdit([row]);
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react4.PencilSimple, { size: 17, weight: "regular" }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react5.PencilSimple, { size: 17, weight: "regular" }),
           /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
             TooltipCustom,
             {
@@ -403,7 +412,7 @@ function ActionsColumn({
           onDelete && onDelete([row]);
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react4.Trash, { size: 17, weight: "regular" }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react5.Trash, { size: 17, weight: "regular" }),
           /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
             TooltipCustom,
             {
@@ -502,10 +511,10 @@ function DynamicColumns({
 }
 
 // src/hooks/use-debounce.ts
-var import_react5 = require("react");
+var import_react6 = require("react");
 var useDebounce = (value, delay) => {
-  const [debouncedValue, setDebouncedValue] = (0, import_react5.useState)(value);
-  (0, import_react5.useEffect)(() => {
+  const [debouncedValue, setDebouncedValue] = (0, import_react6.useState)(value);
+  (0, import_react6.useEffect)(() => {
     const timer = setTimeout(() => {
       setDebouncedValue(value);
     }, delay || 500);
@@ -537,8 +546,8 @@ function DataTableAdvancedFilterWrapper({
   state,
   onStateChange
 }) {
-  const [isClient, setIsClient] = (0, import_react6.useState)(false);
-  (0, import_react6.useEffect)(() => {
+  const [isClient, setIsClient] = (0, import_react7.useState)(false);
+  (0, import_react7.useEffect)(() => {
     setIsClient(true);
   }, []);
   const initialState = state ?? {
@@ -548,26 +557,26 @@ function DataTableAdvancedFilterWrapper({
     sortOrder: sortOrderInitial,
     filter: ""
   };
-  const [page, setPage] = (0, import_react6.useState)(initialState.page);
-  const [rows, setRows] = (0, import_react6.useState)(initialState.rows);
-  const [first, setFirst] = (0, import_react6.useState)((initialState.page - 1) * initialState.rows);
-  const [sortField, setSortField] = (0, import_react6.useState)(initialState.sortField);
-  const [sortOrder, setSortOrder] = (0, import_react6.useState)(initialState.sortOrder ?? 1);
-  const [searchText, setSearchText] = (0, import_react6.useState)(initialState.filter ?? "");
-  const [filters, setFilters] = (0, import_react6.useState)({
+  const [page, setPage] = (0, import_react7.useState)(initialState.page);
+  const [rows, setRows] = (0, import_react7.useState)(initialState.rows);
+  const [first, setFirst] = (0, import_react7.useState)((initialState.page - 1) * initialState.rows);
+  const [sortField, setSortField] = (0, import_react7.useState)(initialState.sortField);
+  const [sortOrder, setSortOrder] = (0, import_react7.useState)(initialState.sortOrder ?? 1);
+  const [searchText, setSearchText] = (0, import_react7.useState)(initialState.filter ?? "");
+  const [filters, setFilters] = (0, import_react7.useState)({
     ...initFilters,
     global: { value: initialState.filter, matchMode: "contains" }
   });
-  const [selectedRowsData, setSelectedRowsData] = (0, import_react6.useState)([]);
+  const [selectedRowsData, setSelectedRowsData] = (0, import_react7.useState)([]);
   const debouncedSearch = useDebounce(searchText, 500);
-  const debouncedFilters = (0, import_react6.useMemo)(() => {
+  const debouncedFilters = (0, import_react7.useMemo)(() => {
     const f = { ...filters };
     if (!f.global) f.global = { value: "", matchMode: "contains" };
     f.global.value = debouncedSearch;
     return f;
   }, [filters, debouncedSearch]);
   const filtersKey = JSON.stringify(debouncedFilters);
-  const globalFilterFields = (0, import_react6.useMemo)(() => {
+  const globalFilterFields = (0, import_react7.useMemo)(() => {
     return columns?.filter(
       (col) => col.filterGlobal === true && (col.field !== "acoes" || col.field !== "actions")
     ).map((col) => col.field) ?? [];
@@ -583,7 +592,7 @@ function DataTableAdvancedFilterWrapper({
       globalFilterFields
     )
   });
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     if (!state) return;
     setPage(state.page);
     setRows(state.rows);
@@ -639,7 +648,7 @@ function DataTableAdvancedFilterWrapper({
       filter: searchText
     });
   };
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     emitStateChange({
       page: 1,
       rows,
@@ -648,7 +657,7 @@ function DataTableAdvancedFilterWrapper({
       filter: debouncedSearch
     });
   }, [debouncedSearch]);
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     if (customers?.items && selectedRowsData.length > 0) {
       const currentIds = new Set(customers.items.map((item) => item.id));
       const filteredSelection = selectedRowsData.filter(
@@ -659,7 +668,7 @@ function DataTableAdvancedFilterWrapper({
       }
     }
   }, [customers?.items, selectedRowsData]);
-  const TableHeaderAndTableActions = (0, import_react6.useMemo)(
+  const TableHeaderAndTableActions = (0, import_react7.useMemo)(
     () => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
       globalFilterFields.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
         TableHeader_default,
@@ -739,7 +748,7 @@ function DataTableAdvancedFilterWrapper({
               onClick: options.onClick,
               disabled: options.disabled,
               className: `PrevPage ${options.disabled ? "PrevPageDisabled" : "PrevPageEnabled"}`,
-              children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react7.CaretLeft, { size: 18, color: "#fff" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react8.CaretLeft, { size: 18, color: "#fff" })
             }
           ),
           CurrentPageReport: (options) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "pageReport", children: [
@@ -762,7 +771,7 @@ function DataTableAdvancedFilterWrapper({
               onClick: options.onClick,
               disabled: options.disabled,
               className: `NextPage ${options.disabled ? "NextPageDisabled" : "NextPageEnabled"}`,
-              children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react7.CaretRight, { size: 18, color: "#fff" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react8.CaretRight, { size: 18, color: "#fff" })
             }
           )
         },
@@ -988,14 +997,14 @@ function DataTableAdvancedFilter({
   state,
   onStateChange
 }) {
-  const [isClient, setIsClient] = (0, import_react8.useState)(false);
-  (0, import_react8.useEffect)(() => {
+  const [isClient, setIsClient] = (0, import_react9.useState)(false);
+  (0, import_react9.useEffect)(() => {
     (0, import_api2.addLocale)("pt", localePtBr);
   }, []);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     (0, import_api2.locale)(isLanguagePtBr ? "pt" : "en");
   }, [isLanguagePtBr]);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     setIsClient(true);
   }, []);
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_jsx_runtime10.Fragment, { children: isClient && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(

package/dist/index.mjs

@@ -141,21 +141,30 @@ import { Calendar } from "primereact/calendar";
 import { FilterMatchMode } from "primereact/api";
 
 // src/components/DataTableAdvancedFilter/TableHeader.tsx
-import { jsx as jsx4 } from "react/jsx-runtime";
+import { X as X2 } from "@phosphor-icons/react";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 var TableHeader = ({
   globalFilterValue,
   onGlobalFilterChange,
   isLanguagePtBr
 }) => {
-  return /* @__PURE__ */ jsx4(
-    InputText,
-    {
-      value: globalFilterValue,
-      onChange: onGlobalFilterChange,
-      placeholder: isLanguagePtBr ? "Pesquisar..." : "Search...",
-      className: "custom-input"
-    }
-  );
+  const limparCampo = () => {
+    onGlobalFilterChange({
+      target: { value: "" }
+    });
+  };
+  return /* @__PURE__ */ jsxs3("div", { style: { position: "relative" }, children: [
+    /* @__PURE__ */ jsx4(
+      InputText,
+      {
+        value: globalFilterValue,
+        onChange: onGlobalFilterChange,
+        placeholder: isLanguagePtBr ? "Pesquisar..." : "Search...",
+        className: "custom-input input-search"
+      }
+    ),
+    /* @__PURE__ */ jsx4(X2, { size: 16, className: "close-search", onClick: limparCampo })
+  ] });
 };
 var TableHeader_default = TableHeader;
 
@@ -203,7 +212,7 @@ function TooltipCustom({ label, id }) {
 }
 
 // src/components/DataTableAdvancedFilter/TableActions.tsx
-import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 function TableActions({
   onNew,
   onEdit,
@@ -215,8 +224,8 @@ function TableActions({
   const disableButtonsNotMultiplesSelecteds = selectedRows?.length !== 1 ? true : false;
   const enableButtonsNotMultiplesSelecteds = selectedRows?.length > 0 ? true : false;
   const resolvedCustomActions = typeof customActions === "function" ? customActions(selectedRows) : customActions;
-  return /* @__PURE__ */ jsxs3("div", { className: "box-icones-table-actions", children: [
-    onNew && /* @__PURE__ */ jsxs3(Fragment2, { children: [
+  return /* @__PURE__ */ jsxs4("div", { className: "box-icones-table-actions", children: [
+    onNew && /* @__PURE__ */ jsxs4(Fragment2, { children: [
       /* @__PURE__ */ jsx6(
         "button",
         {
@@ -239,7 +248,7 @@ function TableActions({
         }
       )
     ] }),
-    onEdit && /* @__PURE__ */ jsx6(Fragment2, { children: /* @__PURE__ */ jsxs3(
+    onEdit && /* @__PURE__ */ jsx6(Fragment2, { children: /* @__PURE__ */ jsxs4(
       "button",
       {
         id: "edit",
@@ -262,7 +271,7 @@ function TableActions({
         ]
       }
     ) }),
-    onDelete && /* @__PURE__ */ jsx6(Fragment2, { children: /* @__PURE__ */ jsxs3(
+    onDelete && /* @__PURE__ */ jsx6(Fragment2, { children: /* @__PURE__ */ jsxs4(
       "button",
       {
         id: "delete",
@@ -287,7 +296,7 @@ function TableActions({
     ) }),
     resolvedCustomActions?.map((action) => {
       const id = `action-table${phraseToId(action.label)}`;
-      return /* @__PURE__ */ jsxs3(
+      return /* @__PURE__ */ jsxs4(
         "button",
         {
           id,
@@ -307,7 +316,7 @@ function TableActions({
 
 // src/components/DataTableAdvancedFilter/ActionsColumn.tsx
 import { PencilSimple as PencilSimple2, Trash as Trash2 } from "@phosphor-icons/react";
-import { Fragment as Fragment3, jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
 function ActionsColumn({
   row,
   onEdit,
@@ -316,8 +325,8 @@ function ActionsColumn({
   isLanguagePtBr
 }) {
   const resolvedCustomActions = typeof customActionsColums === "function" ? customActionsColums(row) : customActionsColums;
-  return /* @__PURE__ */ jsxs4("div", { className: "box-icones-actions-column", children: [
-    onEdit && /* @__PURE__ */ jsx7(Fragment3, { children: /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs5("div", { className: "box-icones-actions-column", children: [
+    onEdit && /* @__PURE__ */ jsx7(Fragment3, { children: /* @__PURE__ */ jsxs5(
       "button",
       {
         id: "edit-column",
@@ -338,7 +347,7 @@ function ActionsColumn({
         ]
       }
     ) }),
-    onDelete && /* @__PURE__ */ jsx7(Fragment3, { children: /* @__PURE__ */ jsxs4(
+    onDelete && /* @__PURE__ */ jsx7(Fragment3, { children: /* @__PURE__ */ jsxs5(
       "button",
       {
         id: "delete-column",
@@ -361,7 +370,7 @@ function ActionsColumn({
     ) }),
     resolvedCustomActions?.map((action) => {
       const id = `action-colunm-${phraseToId(action.label)}`;
-      return /* @__PURE__ */ jsxs4(
+      return /* @__PURE__ */ jsxs5(
         "button",
         {
           id,
@@ -462,7 +471,7 @@ var useDebounce = (value, delay) => {
 };
 
 // src/components/DataTableAdvancedFilter/DataTableAdvancedFilterWrapper.tsx
-import { Fragment as Fragment4, jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
 function DataTableAdvancedFilterWrapper({
   queryKey,
   mutationFn,
@@ -605,7 +614,7 @@ function DataTableAdvancedFilterWrapper({
     }
   }, [customers?.items, selectedRowsData]);
   const TableHeaderAndTableActions = useMemo(
-    () => /* @__PURE__ */ jsxs5(Fragment4, { children: [
+    () => /* @__PURE__ */ jsxs6(Fragment4, { children: [
       globalFilterFields.length > 0 && /* @__PURE__ */ jsx9(
         TableHeader_default,
         {
@@ -637,9 +646,9 @@ function DataTableAdvancedFilterWrapper({
       customActions
     ]
   );
-  return /* @__PURE__ */ jsx9(Fragment4, { children: isClient && /* @__PURE__ */ jsxs5("div", { children: [
+  return /* @__PURE__ */ jsx9(Fragment4, { children: isClient && /* @__PURE__ */ jsxs6("div", { children: [
     disablePagination && /* @__PURE__ */ jsx9("div", { className: "disablePagination", children: TableHeaderAndTableActions }),
-    /* @__PURE__ */ jsxs5(
+    /* @__PURE__ */ jsxs6(
       DataTable,
       {
         value: customers?.items ?? [],
@@ -687,7 +696,7 @@ function DataTableAdvancedFilterWrapper({
               children: /* @__PURE__ */ jsx9(CaretLeft, { size: 18, color: "#fff" })
             }
           ),
-          CurrentPageReport: (options) => /* @__PURE__ */ jsxs5("span", { className: "pageReport", children: [
+          CurrentPageReport: (options) => /* @__PURE__ */ jsxs6("span", { className: "pageReport", children: [
             isLanguagePtBr ? "Mostrando" : "Showing",
             " ",
             options.first,
@@ -977,7 +986,7 @@ function DataTableAdvancedFilter({
 import Select from "react-select";
 import { Dropdown } from "primereact/dropdown";
 import moment2 from "moment";
-import { jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
 var DateFilterTemplate = (options, mask) => {
   const parsedValue = options.value && typeof options.value === "string" ? /* @__PURE__ */ new Date(options.value + "T00:00:00") : options.value;
   return /* @__PURE__ */ jsx11(
@@ -1117,7 +1126,7 @@ var CustomFilterElement = (options, isLanguagePtBr = true, items) => {
   const currentMatchMode = rawFilter.matchMode ?? "contains";
   const currentValue = typeof rawFilter.text === "string" ? rawFilter.text : "";
   const isSpecial = currentMatchMode === customMatchModes.empty || currentMatchMode === customMatchModes.notEmpty;
-  return /* @__PURE__ */ jsxs6(
+  return /* @__PURE__ */ jsxs7(
     "div",
     {
       className: "filter-wrapper",

package/dist/styles/table.css

@@ -639,3 +639,28 @@ th {
   > .p-datatable-thead {
   top: 0;
 }
+
+.input-search {
+  padding-right: 2rem;
+  height: 2.25rem;
+  padding-left: 14px;
+}
+
+.close-search {
+  position: absolute;
+  top: 50%;
+  right: 10px;
+  transform: translateY(-50%);
+  cursor: pointer;
+  color: #bf1717;
+  width: 1.25rem;
+  height: 1.25rem;
+  padding: 3px;
+  transition: all 0.3s ease-in-out;
+
+  &:hover {
+    background-color: #bf1717;
+    color: #fff;
+    border-radius: 5rem;
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@charlesgomes/leafcode-shared-lib-react",
-  "version": "1.0.56",
+  "version": "1.0.57",
   "description": "Lib de componentes react",
   "main": "dist/index.cjs",
   "module": "dist/index.mjs",