@charlesgomes/leafcode-shared-lib-react 1.0.66 → 1.0.68

package/dist/index.d.mts

@@ -190,8 +190,17 @@ interface IItemProps {
   label: string;
 }
 
-declare const DateFilterTemplate: (options: any, mask?: (value: any) => string | number) => react_jsx_runtime.JSX.Element;
-declare const DateTimeFilterTemplate: (options: any, mask?: (date: Date) => string) => react_jsx_runtime.JSX.Element;
+type FilterMatchModeSelectProps = {
+    options: any;
+    items: {
+        label: string;
+        value: string;
+    }[];
+    placeholder?: string;
+};
+declare const FilterMatchModeSelect: ({ options, items, placeholder, }: FilterMatchModeSelectProps) => react_jsx_runtime.JSX.Element;
+declare const DateFilterTemplate: (options: any, isLanguagePtBr?: boolean, isNullable?: boolean, items?: any[], mask?: (value: Date) => string) => react_jsx_runtime.JSX.Element;
+declare const DateTimeFilterTemplate: (options: any, isLanguagePtBr?: boolean, isNullable?: boolean, mask?: (date: Date) => string) => react_jsx_runtime.JSX.Element;
 declare const ValueFilterTemplate: (options: any, mask?: (value: any) => string | number) => react_jsx_runtime.JSX.Element;
 declare const SelectFilterTemplate: (options: any, isLanguagePtBr?: boolean, items?: IItemProps[]) => react_jsx_runtime.JSX.Element;
 declare const CustomFilterElement: (options: any, isLanguagePtBr?: boolean, items?: any[]) => react_jsx_runtime.JSX.Element;
@@ -331,4 +340,4 @@ declare const LeafcodeThemeProvider: ({ children, theme, }: LeafcodeThemeProvide
 
 declare const defaultTheme: LeafcodeTheme;
 
-export { Button, type ColumnCustom, CustomFilterElement, DataTableAdvancedFilter, DateFilterTemplate, DateTimeFilterTemplate, type IDataTableProps, type IItemProps, Input, InputAutoComplete, InputSelect, LeafcodeThemeProvider, ModalBase, SelectFilterTemplate, TextArea, ValueFilterTemplate, buildDynamicCampoFilters, buildSortingWithFilters, customMatchModes, defaultTheme, getDefaultFilterMatchOptionsDate, getDefaultFilterMatchOptionsEnum, getDefaultFilterMatchOptionsString, getDefaultFilterMatchOptionsStringArray, getNullable, getUrlParams, mapPrimeToBackendFilters };
+export { Button, type ColumnCustom, CustomFilterElement, DataTableAdvancedFilter, DateFilterTemplate, DateTimeFilterTemplate, FilterMatchModeSelect, type IDataTableProps, type IItemProps, Input, InputAutoComplete, InputSelect, LeafcodeThemeProvider, ModalBase, SelectFilterTemplate, TextArea, ValueFilterTemplate, buildDynamicCampoFilters, buildSortingWithFilters, customMatchModes, defaultTheme, getDefaultFilterMatchOptionsDate, getDefaultFilterMatchOptionsEnum, getDefaultFilterMatchOptionsString, getDefaultFilterMatchOptionsStringArray, getNullable, getUrlParams, mapPrimeToBackendFilters };

package/dist/index.d.ts

@@ -190,8 +190,17 @@ interface IItemProps {
   label: string;
 }
 
-declare const DateFilterTemplate: (options: any, mask?: (value: any) => string | number) => react_jsx_runtime.JSX.Element;
-declare const DateTimeFilterTemplate: (options: any, mask?: (date: Date) => string) => react_jsx_runtime.JSX.Element;
+type FilterMatchModeSelectProps = {
+    options: any;
+    items: {
+        label: string;
+        value: string;
+    }[];
+    placeholder?: string;
+};
+declare const FilterMatchModeSelect: ({ options, items, placeholder, }: FilterMatchModeSelectProps) => react_jsx_runtime.JSX.Element;
+declare const DateFilterTemplate: (options: any, isLanguagePtBr?: boolean, isNullable?: boolean, items?: any[], mask?: (value: Date) => string) => react_jsx_runtime.JSX.Element;
+declare const DateTimeFilterTemplate: (options: any, isLanguagePtBr?: boolean, isNullable?: boolean, mask?: (date: Date) => string) => react_jsx_runtime.JSX.Element;
 declare const ValueFilterTemplate: (options: any, mask?: (value: any) => string | number) => react_jsx_runtime.JSX.Element;
 declare const SelectFilterTemplate: (options: any, isLanguagePtBr?: boolean, items?: IItemProps[]) => react_jsx_runtime.JSX.Element;
 declare const CustomFilterElement: (options: any, isLanguagePtBr?: boolean, items?: any[]) => react_jsx_runtime.JSX.Element;
@@ -331,4 +340,4 @@ declare const LeafcodeThemeProvider: ({ children, theme, }: LeafcodeThemeProvide
 
 declare const defaultTheme: LeafcodeTheme;
 
-export { Button, type ColumnCustom, CustomFilterElement, DataTableAdvancedFilter, DateFilterTemplate, DateTimeFilterTemplate, type IDataTableProps, type IItemProps, Input, InputAutoComplete, InputSelect, LeafcodeThemeProvider, ModalBase, SelectFilterTemplate, TextArea, ValueFilterTemplate, buildDynamicCampoFilters, buildSortingWithFilters, customMatchModes, defaultTheme, getDefaultFilterMatchOptionsDate, getDefaultFilterMatchOptionsEnum, getDefaultFilterMatchOptionsString, getDefaultFilterMatchOptionsStringArray, getNullable, getUrlParams, mapPrimeToBackendFilters };
+export { Button, type ColumnCustom, CustomFilterElement, DataTableAdvancedFilter, DateFilterTemplate, DateTimeFilterTemplate, FilterMatchModeSelect, type IDataTableProps, type IItemProps, Input, InputAutoComplete, InputSelect, LeafcodeThemeProvider, ModalBase, SelectFilterTemplate, TextArea, ValueFilterTemplate, buildDynamicCampoFilters, buildSortingWithFilters, customMatchModes, defaultTheme, getDefaultFilterMatchOptionsDate, getDefaultFilterMatchOptionsEnum, getDefaultFilterMatchOptionsString, getDefaultFilterMatchOptionsStringArray, getNullable, getUrlParams, mapPrimeToBackendFilters };

package/dist/index.js

@@ -36,6 +36,7 @@ __export(index_exports, {
   DateFilterTemplate: () => DateFilterTemplate,
   DateTimeFilterTemplate: () => DateTimeFilterTemplate,
   FilterMatchMode: () => import_api5.FilterMatchMode,
+  FilterMatchModeSelect: () => FilterMatchModeSelect,
   FilterOperator: () => import_api5.FilterOperator,
   Input: () => Input,
   InputAutoComplete: () => InputAutoComplete,
@@ -1730,55 +1731,126 @@ var import_react_select2 = __toESM(require("react-select"));
 var import_dropdown = require("primereact/dropdown");
 var import_moment2 = __toESM(require("moment"));
 var import_jsx_runtime18 = require("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;
+var FilterMatchModeSelect = ({
+  options,
+  items,
+  placeholder = "Tipo de filtro"
+}) => {
+  const rawFilter = options.value ?? {};
+  const currentMatchMode = rawFilter.matchMode ?? items[0]?.value;
+  const isSpecial = (mode) => mode === customMatchModes.empty || mode === customMatchModes.notEmpty;
   return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-    import_calendar.Calendar,
+    import_dropdown.Dropdown,
     {
-      value: parsedValue,
+      value: currentMatchMode,
+      options: items,
+      optionLabel: "label",
+      optionValue: "value",
+      placeholder,
+      style: { width: "100%" },
       onChange: (e) => {
-        if (!e.value) {
-          options.filterCallback(null, options.index);
+        const newMatchMode = e.value;
+        if (isSpecial(newMatchMode)) {
+          options.filterCallback({
+            text: null,
+            matchMode: newMatchMode
+          });
           return;
         }
-        const date = e.value;
-        const valueToFilter = mask ? mask(date) : `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(
-          2,
-          "0"
-        )}-${String(date.getDate()).padStart(2, "0")}`;
-        options.filterCallback(valueToFilter, options.index);
-      },
-      dateFormat: "dd/mm/yy",
-      placeholder: "dd/mm/yyyy",
-      mask: "99/99/9999",
-      inputClassName: "p-column-filter"
+        options.filterCallback({
+          text: null,
+          matchMode: newMatchMode
+        });
+      }
     }
   );
 };
-var DateTimeFilterTemplate = (options, mask) => {
-  const value = typeof options.value === "string" ? (0, import_moment2.default)(options.value).toDate() : options.value ?? null;
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-    import_calendar.Calendar,
-    {
-      value,
-      showTime: true,
-      showSeconds: true,
-      hourFormat: "24",
-      dateFormat: "dd/mm/yy",
-      placeholder: "dd/mm/yyyy 00:00:00",
-      readOnlyInput: true,
-      inputClassName: "p-column-filter",
-      onChange: (e) => {
-        const selectedDate = e.value;
-        if (!selectedDate) {
-          options.filterCallback(null, options.index);
-          return;
+var DateFilterTemplate = (options, isLanguagePtBr = true, isNullable = true, items, mask) => {
+  const resolvedItems = items ?? getDefaultFilterMatchOptionsDate(isLanguagePtBr, isNullable);
+  const rawFilter = options.value ?? {};
+  const currentMatchMode = rawFilter.matchMode;
+  const isSpecial = currentMatchMode === customMatchModes.empty || currentMatchMode === customMatchModes.notEmpty;
+  const parsedValue = options.value?.text && typeof options.value.text === "string" ? /* @__PURE__ */ new Date(options.value.text + "T00:00:00") : null;
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      FilterMatchModeSelect,
+      {
+        options,
+        items: resolvedItems
+      }
+    ),
+    !isSpecial && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      import_calendar.Calendar,
+      {
+        value: parsedValue,
+        onChange: (e) => {
+          if (!e.value) {
+            options.filterCallback({
+              text: null,
+              matchMode: currentMatchMode
+            });
+            return;
+          }
+          const date = e.value;
+          const valueToFilter = mask ? mask(date) : `${date.getFullYear()}-${String(
+            date.getMonth() + 1
+          ).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")}`;
+          options.filterCallback({
+            text: valueToFilter,
+            matchMode: currentMatchMode
+          });
+        },
+        dateFormat: "dd/mm/yy",
+        placeholder: "dd/mm/yyyy",
+        mask: "99/99/9999",
+        inputClassName: "p-column-filter"
+      }
+    )
+  ] });
+};
+var DateTimeFilterTemplate = (options, isLanguagePtBr = true, isNullable = true, mask) => {
+  const items = getDefaultFilterMatchOptionsDate(isLanguagePtBr, isNullable);
+  const rawFilter = options.value ?? {};
+  const currentMatchMode = rawFilter.matchMode;
+  const isSpecial = currentMatchMode === customMatchModes.empty || currentMatchMode === customMatchModes.notEmpty;
+  const value = typeof rawFilter.text === "string" ? (0, import_moment2.default)(rawFilter.text).toDate() : null;
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      FilterMatchModeSelect,
+      {
+        options,
+        items
+      }
+    ),
+    !isSpecial && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      import_calendar.Calendar,
+      {
+        value,
+        showTime: true,
+        showSeconds: true,
+        hourFormat: "24",
+        dateFormat: "dd/mm/yy",
+        placeholder: "dd/mm/yyyy 00:00:00",
+        readOnlyInput: true,
+        inputClassName: "p-column-filter",
+        onChange: (e) => {
+          const selectedDate = e.value;
+          if (!selectedDate) {
+            options.filterCallback({
+              text: null,
+              matchMode: currentMatchMode
+            });
+            return;
+          }
+          const formatted = mask ? mask(selectedDate) : (0, import_moment2.default)(selectedDate).utc().format("YYYY-MM-DDTHH:mm:ss.SSS[Z]");
+          options.filterCallback({
+            text: formatted,
+            matchMode: currentMatchMode
+          });
         }
-        const formatted = mask ? mask(selectedDate) : (0, import_moment2.default)(selectedDate).utc().format("YYYY-MM-DDTHH:mm:ss.SSS[Z]");
-        options.filterCallback(formatted, options.index);
       }
-    }
-  );
+    )
+  ] });
 };
 var ValueFilterTemplate = (options, mask) => {
   const parsedValue = options.value !== null && options.value !== void 0 ? centsToReal(options.value) : null;
@@ -1815,7 +1887,7 @@ var SelectFilterTemplate = (options, isLanguagePtBr = true, items = []) => {
       options: selectOptions,
       value: currentValue,
       onChange: (selected) => options.filterCallback(selected?.value),
-      placeholder: "Todos",
+      placeholder: "Selecione...",
       isClearable: false,
       isSearchable: false,
       className: "custom-select-filtro",
@@ -1868,69 +1940,30 @@ 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__ */ (0, import_jsx_runtime18.jsxs)(
-    "div",
-    {
-      className: "filter-wrapper",
-      style: {
-        display: "flex",
-        flexDirection: "column",
-        gap: "8px",
-        minWidth: "200px"
-      },
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-          import_dropdown.Dropdown,
-          {
-            value: currentMatchMode,
-            options: resolvedItems,
-            optionLabel: "label",
-            optionValue: "value",
-            placeholder: "Tipo de filtro",
-            style: { width: "100%" },
-            onChange: (e) => {
-              const newMatchMode = e.value;
-              const isNewSpecial = newMatchMode === customMatchModes.empty || newMatchMode === customMatchModes.notEmpty;
-              if (isNewSpecial) {
-                options.filterCallback({
-                  text: null,
-                  matchMode: newMatchMode
-                });
-                return;
-              }
-              options.filterCallback({
-                text: null,
-                matchMode: newMatchMode
-              });
-            }
-          }
-        ),
-        !isSpecial && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-          import_inputtext.InputText,
-          {
-            value: currentValue,
-            placeholder: isLanguagePtBr ? "Pesquisar" : "Search",
-            style: { width: "100%" },
-            className: "p-column-filter",
-            onChange: (e) => {
-              const value = e.target.value;
-              if (value.trim()) {
-                options.filterCallback({
-                  text: value,
-                  matchMode: currentMatchMode
-                });
-              } else {
-                options.filterCallback({
-                  text: null,
-                  matchMode: currentMatchMode
-                });
-              }
-            }
-          }
-        )
-      ]
-    }
-  );
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "filter-wrapper", style: { display: "flex", flexDirection: "column", gap: 8 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      FilterMatchModeSelect,
+      {
+        options,
+        items: resolvedItems
+      }
+    ),
+    !isSpecial && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      import_inputtext.InputText,
+      {
+        value: currentValue,
+        placeholder: isLanguagePtBr ? "Pesquisar" : "Search",
+        className: "p-column-filter",
+        onChange: (e) => {
+          const value = e.target.value;
+          options.filterCallback({
+            text: value.trim() ? value : null,
+            matchMode: currentMatchMode
+          });
+        }
+      }
+    )
+  ] });
 };
 
 // src/components/DataTableAdvancedFilter/filterModes.ts
@@ -2359,6 +2392,7 @@ var import_api5 = require("primereact/api");
   DateFilterTemplate,
   DateTimeFilterTemplate,
   FilterMatchMode,
+  FilterMatchModeSelect,
   FilterOperator,
   Input,
   InputAutoComplete,

package/dist/index.mjs

@@ -1681,55 +1681,126 @@ import Select2 from "react-select";
 import { Dropdown } from "primereact/dropdown";
 import moment2 from "moment";
 import { jsx as jsx18, jsxs as jsxs12 } 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;
+var FilterMatchModeSelect = ({
+  options,
+  items,
+  placeholder = "Tipo de filtro"
+}) => {
+  const rawFilter = options.value ?? {};
+  const currentMatchMode = rawFilter.matchMode ?? items[0]?.value;
+  const isSpecial = (mode) => mode === customMatchModes.empty || mode === customMatchModes.notEmpty;
   return /* @__PURE__ */ jsx18(
-    Calendar,
+    Dropdown,
     {
-      value: parsedValue,
+      value: currentMatchMode,
+      options: items,
+      optionLabel: "label",
+      optionValue: "value",
+      placeholder,
+      style: { width: "100%" },
       onChange: (e) => {
-        if (!e.value) {
-          options.filterCallback(null, options.index);
+        const newMatchMode = e.value;
+        if (isSpecial(newMatchMode)) {
+          options.filterCallback({
+            text: null,
+            matchMode: newMatchMode
+          });
           return;
         }
-        const date = e.value;
-        const valueToFilter = mask ? mask(date) : `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(
-          2,
-          "0"
-        )}-${String(date.getDate()).padStart(2, "0")}`;
-        options.filterCallback(valueToFilter, options.index);
-      },
-      dateFormat: "dd/mm/yy",
-      placeholder: "dd/mm/yyyy",
-      mask: "99/99/9999",
-      inputClassName: "p-column-filter"
+        options.filterCallback({
+          text: null,
+          matchMode: newMatchMode
+        });
+      }
     }
   );
 };
-var DateTimeFilterTemplate = (options, mask) => {
-  const value = typeof options.value === "string" ? moment2(options.value).toDate() : options.value ?? null;
-  return /* @__PURE__ */ jsx18(
-    Calendar,
-    {
-      value,
-      showTime: true,
-      showSeconds: true,
-      hourFormat: "24",
-      dateFormat: "dd/mm/yy",
-      placeholder: "dd/mm/yyyy 00:00:00",
-      readOnlyInput: true,
-      inputClassName: "p-column-filter",
-      onChange: (e) => {
-        const selectedDate = e.value;
-        if (!selectedDate) {
-          options.filterCallback(null, options.index);
-          return;
+var DateFilterTemplate = (options, isLanguagePtBr = true, isNullable = true, items, mask) => {
+  const resolvedItems = items ?? getDefaultFilterMatchOptionsDate(isLanguagePtBr, isNullable);
+  const rawFilter = options.value ?? {};
+  const currentMatchMode = rawFilter.matchMode;
+  const isSpecial = currentMatchMode === customMatchModes.empty || currentMatchMode === customMatchModes.notEmpty;
+  const parsedValue = options.value?.text && typeof options.value.text === "string" ? /* @__PURE__ */ new Date(options.value.text + "T00:00:00") : null;
+  return /* @__PURE__ */ jsxs12("div", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: [
+    /* @__PURE__ */ jsx18(
+      FilterMatchModeSelect,
+      {
+        options,
+        items: resolvedItems
+      }
+    ),
+    !isSpecial && /* @__PURE__ */ jsx18(
+      Calendar,
+      {
+        value: parsedValue,
+        onChange: (e) => {
+          if (!e.value) {
+            options.filterCallback({
+              text: null,
+              matchMode: currentMatchMode
+            });
+            return;
+          }
+          const date = e.value;
+          const valueToFilter = mask ? mask(date) : `${date.getFullYear()}-${String(
+            date.getMonth() + 1
+          ).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")}`;
+          options.filterCallback({
+            text: valueToFilter,
+            matchMode: currentMatchMode
+          });
+        },
+        dateFormat: "dd/mm/yy",
+        placeholder: "dd/mm/yyyy",
+        mask: "99/99/9999",
+        inputClassName: "p-column-filter"
+      }
+    )
+  ] });
+};
+var DateTimeFilterTemplate = (options, isLanguagePtBr = true, isNullable = true, mask) => {
+  const items = getDefaultFilterMatchOptionsDate(isLanguagePtBr, isNullable);
+  const rawFilter = options.value ?? {};
+  const currentMatchMode = rawFilter.matchMode;
+  const isSpecial = currentMatchMode === customMatchModes.empty || currentMatchMode === customMatchModes.notEmpty;
+  const value = typeof rawFilter.text === "string" ? moment2(rawFilter.text).toDate() : null;
+  return /* @__PURE__ */ jsxs12("div", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: [
+    /* @__PURE__ */ jsx18(
+      FilterMatchModeSelect,
+      {
+        options,
+        items
+      }
+    ),
+    !isSpecial && /* @__PURE__ */ jsx18(
+      Calendar,
+      {
+        value,
+        showTime: true,
+        showSeconds: true,
+        hourFormat: "24",
+        dateFormat: "dd/mm/yy",
+        placeholder: "dd/mm/yyyy 00:00:00",
+        readOnlyInput: true,
+        inputClassName: "p-column-filter",
+        onChange: (e) => {
+          const selectedDate = e.value;
+          if (!selectedDate) {
+            options.filterCallback({
+              text: null,
+              matchMode: currentMatchMode
+            });
+            return;
+          }
+          const formatted = mask ? mask(selectedDate) : moment2(selectedDate).utc().format("YYYY-MM-DDTHH:mm:ss.SSS[Z]");
+          options.filterCallback({
+            text: formatted,
+            matchMode: currentMatchMode
+          });
         }
-        const formatted = mask ? mask(selectedDate) : moment2(selectedDate).utc().format("YYYY-MM-DDTHH:mm:ss.SSS[Z]");
-        options.filterCallback(formatted, options.index);
       }
-    }
-  );
+    )
+  ] });
 };
 var ValueFilterTemplate = (options, mask) => {
   const parsedValue = options.value !== null && options.value !== void 0 ? centsToReal(options.value) : null;
@@ -1766,7 +1837,7 @@ var SelectFilterTemplate = (options, isLanguagePtBr = true, items = []) => {
       options: selectOptions,
       value: currentValue,
       onChange: (selected) => options.filterCallback(selected?.value),
-      placeholder: "Todos",
+      placeholder: "Selecione...",
       isClearable: false,
       isSearchable: false,
       className: "custom-select-filtro",
@@ -1819,69 +1890,30 @@ 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__ */ jsxs12(
-    "div",
-    {
-      className: "filter-wrapper",
-      style: {
-        display: "flex",
-        flexDirection: "column",
-        gap: "8px",
-        minWidth: "200px"
-      },
-      children: [
-        /* @__PURE__ */ jsx18(
-          Dropdown,
-          {
-            value: currentMatchMode,
-            options: resolvedItems,
-            optionLabel: "label",
-            optionValue: "value",
-            placeholder: "Tipo de filtro",
-            style: { width: "100%" },
-            onChange: (e) => {
-              const newMatchMode = e.value;
-              const isNewSpecial = newMatchMode === customMatchModes.empty || newMatchMode === customMatchModes.notEmpty;
-              if (isNewSpecial) {
-                options.filterCallback({
-                  text: null,
-                  matchMode: newMatchMode
-                });
-                return;
-              }
-              options.filterCallback({
-                text: null,
-                matchMode: newMatchMode
-              });
-            }
-          }
-        ),
-        !isSpecial && /* @__PURE__ */ jsx18(
-          InputText,
-          {
-            value: currentValue,
-            placeholder: isLanguagePtBr ? "Pesquisar" : "Search",
-            style: { width: "100%" },
-            className: "p-column-filter",
-            onChange: (e) => {
-              const value = e.target.value;
-              if (value.trim()) {
-                options.filterCallback({
-                  text: value,
-                  matchMode: currentMatchMode
-                });
-              } else {
-                options.filterCallback({
-                  text: null,
-                  matchMode: currentMatchMode
-                });
-              }
-            }
-          }
-        )
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsxs12("div", { className: "filter-wrapper", style: { display: "flex", flexDirection: "column", gap: 8 }, children: [
+    /* @__PURE__ */ jsx18(
+      FilterMatchModeSelect,
+      {
+        options,
+        items: resolvedItems
+      }
+    ),
+    !isSpecial && /* @__PURE__ */ jsx18(
+      InputText,
+      {
+        value: currentValue,
+        placeholder: isLanguagePtBr ? "Pesquisar" : "Search",
+        className: "p-column-filter",
+        onChange: (e) => {
+          const value = e.target.value;
+          options.filterCallback({
+            text: value.trim() ? value : null,
+            matchMode: currentMatchMode
+          });
+        }
+      }
+    )
+  ] });
 };
 
 // src/components/DataTableAdvancedFilter/filterModes.ts
@@ -2309,6 +2341,7 @@ export {
   DateFilterTemplate,
   DateTimeFilterTemplate,
   FilterMatchMode5 as FilterMatchMode,
+  FilterMatchModeSelect,
   FilterOperator2 as FilterOperator,
   Input,
   InputAutoComplete,

package/package.json

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