rez-table-listing-mui 1.3.21 → 1.3.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rez-table-listing-mui",
-  "version": "1.3.21",
+  "version": "1.3.22",
   "type": "module",
   "description": "A rez table listing component built on TanStack Table",
   "main": "dist/index.js",

package/src/listing/components/filter/components/forms/components/Dropdown.tsx

@@ -1,16 +1,13 @@
 import { FormControl, MenuItem, Select, SxProps, Theme } from "@mui/material";
 import { Controller, UseFormSetValue } from "react-hook-form";
-import { FilterStateProps } from "../../../../../types/filter";
 import moment from "moment";
+import { FilterStateProps } from "../../../../../types/filter";
 
 interface FormDropdownProps {
   filter: FilterStateProps;
   control: any;
   setValue: UseFormSetValue<any>;
-  dropdownList: {
-    label?: string;
-    value?: string;
-  }[];
+  dropdownList: { label?: string; value?: string }[];
   isLoading?: boolean;
   sx?: SxProps<Theme>;
   onValueChange?: () => void;
@@ -27,72 +24,54 @@ const FormDropdown = ({
 }: FormDropdownProps) => {
   return (
     <Controller
-      name={`${filter?.filter_attribute_name}.operator`}
+      name={`${filter.filter_attribute_name}.operator`}
       control={control}
-      defaultValue={filter?.filter_operator || dropdownList?.[0]?.value || ""}
+      defaultValue={filter.filter_operator || dropdownList?.[0]?.value || ""}
       render={({ field }) => (
         <FormControl sx={sx} size="small">
           <Select
             {...field}
             variant="standard"
+            disableUnderline
+            disabled={isLoading}
             sx={{
               fontSize: "0.875rem",
               minWidth: 50,
-              border: "none",
               boxShadow: "none",
-              "& .MuiSelect-icon": {
-                top: "45%",
-                transform: "translateY(-50%)",
-                "& .MuiOutlinedInput-input": {
-                  padding: "12px 20px",
-                },
-              },
             }}
-            disabled={isLoading}
-            disableUnderline
             onChange={(e) => {
               const newOperator = e.target.value;
               const oldOperator = field.value;
 
-              // Update RHF field
               field.onChange(e);
 
-              // Handle date/year specific operator-based value reset logic
-              if (
-                (filter?.filter_attribute_data_type === "date" ||
-                  filter?.filter_attribute_data_type === "year") &&
-                newOperator !== oldOperator
-              ) {
+              const fieldName = `${filter.filter_attribute_name}.value`;
+              const type = filter.filter_attribute_data_type;
+
+              // RESET RULES (Unified)
+              if (type === "date" || type === "year") {
                 if (newOperator === "today") {
-                  setValue(
-                    `${filter?.filter_attribute_name}.value`,
-                    moment().format("YYYY-MM-DD"),
-                    {
-                      shouldDirty: true,
-                    }
-                  );
+                  setValue(fieldName, moment().format("YYYY-MM-DD"), {
+                    shouldDirty: true,
+                  });
                 } else if (newOperator === "between") {
-                  setValue(`${filter?.filter_attribute_name}.value`, ["", ""], {
+                  setValue(fieldName, ["", ""], {
                     shouldDirty: true,
                   });
                 } else if (
                   oldOperator === "between" ||
                   oldOperator === "today"
                 ) {
-                  setValue(`${filter?.filter_attribute_name}.value`, "", {
-                    shouldDirty: true,
-                  });
+                  setValue(fieldName, "", { shouldDirty: true });
                 }
               }
 
-              // ⭐ FIX: Ensure parent form re-evaluates AFTER RHF updates the operator
-              setTimeout(() => {
-                onValueChange?.();
-              }, 0);
+              // Delay to ensure RHF state updates
+              setTimeout(() => onValueChange?.(), 0);
             }}
           >
             {dropdownList?.map((item, idx) => (
-              <MenuItem key={idx} value={item.value}>
+              <MenuItem value={item.value} key={idx}>
                 {item.label}
               </MenuItem>
             ))}

package/src/listing/components/filter/components/forms/utils/filter-date-input-resolver.tsx

@@ -4,33 +4,14 @@ import FormTextfield from "../components/Textfield";
 import FormDatePicker from "../components/Date";
 import FormMultiSelect from "../components/Multi-Select";
 
-export type DateOperator =
-  | "equal"
-  | "before"
-  | "after"
-  | "between"
-  | "is"
-  | "today"
-  | "is_before"
-  | "is_after"
-  | "is_on_or_before"
-  | "is_on_or_after"
-  | "empty"
-  | "not_empty";
-
-export const DATE_ALLOWED_OPERATORS: DateOperator[] = [
-  "equal",
-  "before",
-  "after",
-  "between",
-  "is",
-  "today",
-  "is_before",
-  "is_after",
-  "is_on_or_before",
-  "is_on_or_after",
-  "empty",
-  "not_empty",
+// Operators that SHOULD use TextField when applied on date fields
+export const NON_DATE_OPERATORS = [
+  "is_day_before",
+  "is_day_after",
+  "is_month_before",
+  "is_month_after",
+  "is_before_bussiness_days",
+  "is_after_bussiness_days",
 ];
 
 export const resolveFilterInput = ({
@@ -46,20 +27,10 @@ export const resolveFilterInput = ({
   dropdownData: any;
   updateFiltersFromForm: () => void;
 }) => {
-  const isDateType = filter.filter_attribute_data_type === "date";
-
-  const showDatePicker =
-    isDateType && operator && DATE_ALLOWED_OPERATORS.includes(operator as any);
+  const dataType = filter?.filter_attribute_data_type;
 
-  const showTextInsteadOfDate =
-    isDateType &&
-    (!operator || !DATE_ALLOWED_OPERATORS.includes(operator as any));
-
-  // TEXT / NUMBER -> Always TextField
-  if (
-    filter?.filter_attribute_data_type === "text" ||
-    filter?.filter_attribute_data_type === "number"
-  ) {
+  // TEXT / NUMBER → always textfield
+  if (dataType === "text" || dataType === "number") {
     return (
       <FormTextfield
         filter={filter}
@@ -69,8 +40,8 @@ export const resolveFilterInput = ({
     );
   }
 
-  // YEAR
-  if (filter?.filter_attribute_data_type === "year") {
+  // YEAR → DatePicker (Year mode)
+  if (dataType === "year") {
     return (
       <FormDatePicker
         filter={filter}
@@ -81,20 +52,24 @@ export const resolveFilterInput = ({
     );
   }
 
-  // DATE LOGIC
-  if (showDatePicker) {
-    return (
-      <FormDatePicker
-        filter={filter}
-        control={control}
-        onValueChange={updateFiltersFromForm}
-      />
-    );
-  }
+  // DATE FIELD LOGIC
+  if (dataType === "date") {
+    const isNonDateOperator = operator && NON_DATE_OPERATORS.includes(operator);
+
+    if (isNonDateOperator) {
+      // Non-date operator → show TEXT FIELD
+      return (
+        <FormTextfield
+          filter={filter}
+          control={control}
+          onValueChange={updateFiltersFromForm}
+        />
+      );
+    }
 
-  if (showTextInsteadOfDate) {
+    // Default for all other operators → Date Picker
     return (
-      <FormTextfield
+      <FormDatePicker
         filter={filter}
         control={control}
         onValueChange={updateFiltersFromForm}
@@ -102,7 +77,7 @@ export const resolveFilterInput = ({
     );
   }
 
-  // MULTISELECT / SELECT / RADIO / CHECKBOX
+  // SELECT / MULTISELECT / RADIO / CHECKBOX
   if (
     filter?.filter_attribute_data_type !== undefined &&
     ["select", "multiselect", "radio", "checkbox"].includes(