@charlesgomes/leafcode-shared-lib-react 1.0.76 → 1.0.78

package/dist/index.mjs

@@ -673,23 +673,24 @@ LoadingSpinner.displayName = "LoadingSpinner";
 // src/components/Input/InputAutocomplete.tsx
 import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
 var PAGE_SIZE = 10;
-var InputBase3 = ({
-  name,
-  label,
-  error,
-  onChange,
-  onSelect,
-  value,
-  defaultValue,
-  inputAutocompleteActive,
-  queryKey,
-  mutationFn,
-  renderOption,
-  disabled,
-  placeholder,
-  isUppercaseLabel = true,
-  ...rest
-}, ref) => {
+function AutoCompleteInner(props, ref) {
+  const {
+    name,
+    label,
+    error,
+    value,
+    onChange,
+    onSelect,
+    renderOption,
+    getLabel = (item) => item?.label ?? item?.nome ?? String(item),
+    disabled,
+    placeholder,
+    isUppercaseLabel = true,
+    queryKey,
+    mutationFn,
+    service,
+    ...inputProps
+  } = props;
   const theme = useLeafcodeTheme();
   const styleVars = {
     "--label-line": theme.colors.light,
@@ -712,13 +713,31 @@ var InputBase3 = ({
   const [search, setSearch] = useState4("");
   const [isOpen, setIsOpen] = useState4(false);
   const listRef = useRef(null);
-  const { data, isLoading } = useQuery({
-    queryKey: [queryKey, pageNumber, search],
-    queryFn: () => mutationFn(pageNumber, PAGE_SIZE, search),
+  const fetcher = () => {
+    if (service) {
+      return service({
+        page: pageNumber,
+        size: PAGE_SIZE,
+        search,
+        ...props
+      });
+    }
+    return mutationFn(pageNumber, PAGE_SIZE, search);
+  };
+  const queryKeyInternal = [
+    "autocomplete",
+    queryKey ?? "service",
+    pageNumber,
+    search
+  ];
+  const query = useQuery({
+    queryKey: queryKeyInternal,
+    queryFn: fetcher,
     enabled: isOpen
   });
+  const { data, isLoading } = query;
   useEffect4(() => {
-    if (!data?.items) return;
+    if (!data) return;
     setItems(
       (prev) => pageNumber === 1 ? data.items : [...prev, ...data.items]
     );
@@ -727,7 +746,7 @@ var InputBase3 = ({
     const debounced = _.debounce(() => {
       setPageNumber(1);
       setSearch(value ?? "");
-    }, 600);
+    }, 500);
     debounced();
     return () => debounced.cancel();
   }, [value]);
@@ -739,35 +758,18 @@ var InputBase3 = ({
     }
   };
   const handleSelect = (item) => {
-    onChange?.(item.nome);
+    const label2 = getLabel(item);
+    onChange?.(label2);
     setIsOpen(false);
     onSelect(item);
   };
-  const renderDropdown = () => {
-    if (!isOpen) return null;
-    return /* @__PURE__ */ jsx10("div", { className: "dropdown-container", style: styleVars, children: /* @__PURE__ */ jsxs7("ul", { ref: listRef, onScroll: handleScroll, className: "dropdown-list", children: [
-      items.map((item) => /* @__PURE__ */ jsx10(
-        "li",
-        {
-          onClick: () => handleSelect(item),
-          className: "dropdown-item",
-          children: renderOption(item)
-        },
-        item.id
-      )),
-      isLoading && /* @__PURE__ */ jsx10("li", { className: "dropdown-loading", children: /* @__PURE__ */ jsx10(LoadingSpinner, { size: 20 }) }),
-      !isLoading && items.length === 0 && /* @__PURE__ */ jsx10("li", { className: "dropdown-empty", children: "N\xE3o encontrado" })
-    ] }) });
-  };
   return /* @__PURE__ */ jsxs7(
     "div",
     {
       className: "input-wrapper",
       style: styleVars,
       tabIndex: -1,
-      onBlur: (e) => {
-        e.relatedTarget === null && setIsOpen(false);
-      },
+      onBlur: (e) => e.relatedTarget === null && setIsOpen(false),
       children: [
         label && /* @__PURE__ */ jsx10(
           "label",
@@ -790,35 +792,46 @@ var InputBase3 = ({
               className: "input",
               value: value ?? "",
               onChange: (e) => {
-                const val = e.target.value;
-                onChange?.(val);
+                onChange?.(e.target.value);
                 setIsOpen(true);
               },
               onFocus: () => setIsOpen(true),
-              ...rest
+              ...inputProps
             }
           ),
           value && /* @__PURE__ */ jsx10(
             "button",
             {
               type: "button",
+              className: "dropdown-clear",
               onClick: () => {
                 setPageNumber(1);
                 onChange?.("");
                 onSelect(null);
               },
-              className: "dropdown-clear",
-              children: /* @__PURE__ */ jsx10(X3, { size: 16, className: "icone-clear" })
+              children: /* @__PURE__ */ jsx10(X3, { size: 16, color: "#bf1717" })
             }
           ),
-          renderDropdown()
+          isOpen && /* @__PURE__ */ jsx10("div", { className: "dropdown-container", children: /* @__PURE__ */ jsxs7("ul", { ref: listRef, onScroll: handleScroll, className: "dropdown-list", children: [
+            items.map((item, i) => /* @__PURE__ */ jsx10(
+              "li",
+              {
+                onClick: () => handleSelect(item),
+                className: "dropdown-item",
+                children: renderOption(item)
+              },
+              i
+            )),
+            isLoading && /* @__PURE__ */ jsx10("li", { className: "dropdown-loading", children: /* @__PURE__ */ jsx10(LoadingSpinner, { size: 20 }) }),
+            !isLoading && items.length === 0 && /* @__PURE__ */ jsx10("li", { className: "dropdown-empty", children: "N\xE3o encontrado" })
+          ] }) })
         ] }),
         !value && !isOpen && /* @__PURE__ */ jsx10(TooltipErrorInput, { error, name })
       ]
     }
   );
-};
-var InputAutoComplete = forwardRef4(InputBase3);
+}
+var InputAutoComplete = forwardRef4(AutoCompleteInner);
 
 // src/components/DataTableAdvancedFilter/DataTableAdvancedFilter.tsx
 import { useEffect as useEffect7, useState as useState7 } from "react";
@@ -1084,6 +1097,7 @@ function ActionsColumn({
 }
 
 // src/components/DataTableAdvancedFilter/DynamicColumns.tsx
+import { Button as Button2 } from "primereact/button";
 import { jsx as jsx15 } from "react/jsx-runtime";
 function DynamicColumns({
   columns,
@@ -1124,6 +1138,20 @@ function DynamicColumns({
           showFilterMatchModes: col.showFilterMatchModes,
           dataType: col.dataType,
           hidden: col.hidden,
+          filterApply: (options) => /* @__PURE__ */ jsx15(
+            Button2,
+            {
+              label: isLanguagePtBr ? "Aplicar" : "Apply",
+              size: "small",
+              onClick: () => {
+                const constraint = options.filterModel.constraints[0];
+                if (constraint.matchMode === "empty" || constraint.matchMode === "notEmpty") {
+                  constraint.value = true;
+                }
+                options.filterApplyCallback(constraint.value, 0);
+              }
+            }
+          ),
           filterElement: col.filterElement ? (options) => col.filterElement?.(options, col.mask) ?? void 0 : void 0,
           filterMatchModeOptions: col.filterMatchModeOptions,
           filterPlaceholder: !isActionsCol ? placeholder : void 0,
@@ -1341,6 +1369,7 @@ function DataTableAdvancedFilterWrapper({
       customActions
     ]
   );
+  const DEFAULT_MATCH_MODE = "contains";
   return /* @__PURE__ */ jsx16(Fragment6, { children: isClient && /* @__PURE__ */ jsxs11("div", { children: [
     disablePagination && /* @__PURE__ */ jsx16("div", { className: "disablePagination", children: TableHeaderAndTableActions }),
     /* @__PURE__ */ jsxs11(
@@ -1361,6 +1390,7 @@ function DataTableAdvancedFilterWrapper({
         dataKey: "id",
         size: "small",
         rowClassName: () => "box-row-table",
+        filterDisplay: "menu",
         filters,
         selection: selectedRowsData,
         onSelectionChange: (e) => setSelectedRowsData(e.value),
@@ -1679,129 +1709,62 @@ function DataTableAdvancedFilter({
 
 // src/components/DataTableAdvancedFilter/FilterTemplates.tsx
 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 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(
-    Dropdown,
+import { jsx as jsx18 } from "react/jsx-runtime";
+var DateFilterTemplate = (options, mask) => {
+  const matchMode = options.filterModel?.matchMode;
+  const isSpecial = matchMode === "empty" || matchMode === "notEmpty";
+  const parsedValue = typeof options.filterModel?.value === "string" ? /* @__PURE__ */ new Date(options.filterModel.value + "T00:00:00") : null;
+  return /* @__PURE__ */ jsx18("div", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: !isSpecial && /* @__PURE__ */ jsx18(
+    Calendar,
     {
-      value: currentMatchMode,
-      options: items,
-      optionLabel: "label",
-      optionValue: "value",
-      placeholder,
-      style: { width: "100%" },
+      value: parsedValue,
       onChange: (e) => {
-        const newMatchMode = e.value;
-        if (isSpecial(newMatchMode)) {
-          options.filterCallback({
-            text: null,
-            matchMode: newMatchMode
-          });
+        const date = e.value;
+        if (!date) {
+          options.filterCallback(null, options.index);
           return;
         }
-        options.filterCallback({
-          text: null,
-          matchMode: newMatchMode
-        });
-      }
+        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"
     }
-  );
-};
-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
-          });
+var DateTimeFilterTemplate = (options, mask) => {
+  const matchMode = options.filterModel?.matchMode;
+  const isSpecial = matchMode === "empty" || matchMode === "notEmpty";
+  const value = options.filterModel?.value ? moment2(options.filterModel.value).toDate() : null;
+  return /* @__PURE__ */ jsx18("div", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: !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(null, options.index);
+          return;
         }
+        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;
@@ -1827,115 +1790,53 @@ var ValueFilterTemplate = (options, mask) => {
     }
   );
 };
-var SelectFilterTemplate = (options, isLanguagePtBr = true, isNullable = true, items = []) => {
-  const matchModeItems = getDefaultFilterMatchOptionsEnum(isLanguagePtBr, isNullable);
+var SelectFilterTemplate = (options, isLanguagePtBr = true, items = []) => {
   const selectOptions = items.length > 0 ? items : [
     { label: isLanguagePtBr ? "Sim" : "Yes", value: true },
     { label: isLanguagePtBr ? "N\xE3o" : "No", value: false }
   ];
-  const rawFilter = options.value ?? {};
-  const currentMatchMode = rawFilter.matchMode;
-  const isSpecial = currentMatchMode === customMatchModes.empty || currentMatchMode === customMatchModes.notEmpty;
-  const currentValue = selectOptions.find((opt) => opt.value === rawFilter.text) || null;
-  return /* @__PURE__ */ jsxs12("div", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: [
-    /* @__PURE__ */ jsx18(
-      FilterMatchModeSelect,
-      {
-        options,
-        items: matchModeItems
-      }
-    ),
-    !isSpecial && /* @__PURE__ */ jsx18(
-      Select2,
-      {
-        options: selectOptions,
-        value: currentValue,
-        onChange: (selected) => {
-          if (!selected) {
-            options.filterCallback({
-              text: null,
-              matchMode: currentMatchMode
-            });
-            return;
-          }
-          options.filterCallback({
-            text: selected.value,
-            matchMode: currentMatchMode
-          });
-        },
-        placeholder: isLanguagePtBr ? "Selecione..." : "Select...",
-        isClearable: false,
-        isSearchable: false,
-        className: "custom-select-filtro",
-        classNamePrefix: "custom-select-filtro",
-        styles: {
-          control: (baseStyles, state) => ({
-            ...baseStyles,
-            "&:hover": {
-              borderColor: state.isFocused ? "#094394" : ""
-            },
-            borderRadius: "6px"
-          }),
-          menuList: (base) => ({
-            ...base,
-            "::-webkit-scrollbar": {
-              width: "6px"
-            },
-            "::-webkit-scrollbar-track": {
-              background: "#fff"
-            },
-            "::-webkit-scrollbar-thumb": {
-              background: "#888",
-              borderRadius: "2rem"
-            },
-            "::-webkit-scrollbar-thumb:hover": {
-              background: "#555"
-            }
-          }),
-          option: (provided, state) => ({
-            ...provided,
-            backgroundColor: state.isFocused ? "#094394" : "#ffffff",
-            color: state.isFocused ? "#ffffff" : "black",
-            "&:hover": {
-              backgroundColor: "#094394",
-              color: "#ffffff"
-            }
-          })
-        }
-      }
-    )
-  ] });
+  const matchMode = options.filterModel?.matchMode;
+  const isSpecial = matchMode === "empty" || matchMode === "notEmpty";
+  const currentValue = selectOptions.find(
+    (opt) => opt.value === options.filterModel?.value
+  ) || null;
+  return /* @__PURE__ */ jsx18("div", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: !isSpecial && /* @__PURE__ */ jsx18(
+    Select2,
+    {
+      options: selectOptions,
+      value: currentValue,
+      onChange: (selected) => {
+        options.filterCallback(
+          selected ? selected.value : null,
+          options.index
+          // 🔥 ESSENCIAL
+        );
+      },
+      placeholder: isLanguagePtBr ? "Selecione..." : "Select...",
+      isClearable: true,
+      isSearchable: false,
+      className: "custom-select-filtro",
+      classNamePrefix: "custom-select-filtro"
+    }
+  ) });
 };
-var CustomFilterElement = (options, isLanguagePtBr = true, isNullable = true, items) => {
-  const resolvedItems = items ?? getDefaultFilterMatchOptionsString(isLanguagePtBr, isNullable);
-  const rawFilter = options.value ?? {};
-  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: 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
-          });
-        }
-      }
-    )
-  ] });
+var CustomFilterElement = (options, isLanguagePtBr = true) => {
+  const matchMode = options.filterModel?.matchMode;
+  const isSpecial = matchMode === "empty" || matchMode === "notEmpty";
+  return !isSpecial && /* @__PURE__ */ jsx18(
+    InputText,
+    {
+      value: options.filterModel?.value ?? "",
+      placeholder: isLanguagePtBr ? "Pesquisar" : "Search",
+      onChange: (e) => {
+        options.filterCallback(
+          e.target.value || null,
+          options.index
+        );
+      },
+      className: "p-column-filter"
+    }
+  );
 };
 
 // src/components/DataTableAdvancedFilter/filterModes.ts
@@ -2363,7 +2264,6 @@ export {
   DateFilterTemplate,
   DateTimeFilterTemplate,
   FilterMatchMode5 as FilterMatchMode,
-  FilterMatchModeSelect,
   FilterOperator2 as FilterOperator,
   Input,
   InputAutoComplete,

package/dist/styles/input.css

@@ -156,6 +156,7 @@ input:-webkit-autofill:focus {
   font-size: var(--input-font-size, 13px);
   box-shadow: none !important;
   background-color: var(--input-bg, #ffffff) !important;
+  text-align: left;
 }
 
 .react-select__control--is-focused {
@@ -178,6 +179,7 @@ input:-webkit-autofill:focus {
   font-family: var(--input-font-family, "Roboto", sans-serif);
   font-weight: var(--input-font-weight, 400);
   font-size: var(--input-font-size, 13px) !important;
+  text-align: left;
 }
 
 .react-select__option--is-focused {

package/package.json

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