rez-table-listing-mui 1.0.41 → 1.0.43

package/package.json

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

package/src/components/filter/components/attributes-filter.tsx

@@ -112,6 +112,7 @@ const AttributesFilter = ({
         flexDirection: "column",
         gap: "1.25rem",
       }}
+      className="attributes-filter-component-wrapper"
     >
       <FormControl fullWidth size="small">
         <Select

package/src/components/filter/components/forms/index.tsx

@@ -223,7 +223,10 @@ const FilterForm = ({
           </Box>
         )}
 
-        <Box sx={filterFormStyles.formFlexContainer}>
+        <Box
+          className="filter-criteria-form"
+          sx={filterFormStyles.formFlexContainer}
+        >
           <FilterCriteria
             columnsData={columnsData}
             tableStates={tableStates}
@@ -236,99 +239,103 @@ const FilterForm = ({
             <CustomSearch value={searchTerm} onChange={setSearchTerm} />
           )}
 
-          {selectedFilters
-            .filter(
-              (filter) =>
-                filter.name?.toLowerCase().includes(searchTerm.toLowerCase()) ||
-                filter.filter_value
-                  ?.toString()
-                  .toLowerCase()
-                  .includes(searchTerm.toLowerCase())
-            )
-            .map((filter) => {
-              const { dropdown_list = [] } = filter;
-              return (
-                <Box
-                  key={filter.filter_attribute}
-                  sx={filterFormStyles.formListItem}
-                >
-                  <Box sx={filterFormStyles.formListItemHeader}>
-                    <Typography sx={filterFormStyles.formListItemHeaderName}>
-                      {filter.name}
-                    </Typography>
-                    <FormDropdown
-                      filter={filter}
-                      control={control}
-                      dropdownList={dropdown_list}
-                      sx={filterFormStyles.formListItemHeaderDropdown}
-                      onValueChange={updateFiltersFromForm}
-                    />
-                    <IconButton
-                      sx={{ marginLeft: "auto" }}
-                      onClick={() => {
-                        unregister(`${filter.name}.value`);
-                        unregister(`${filter.name}.operator`);
-
-                        // ✅ Toggle dummy field to force form dirty
-                        const dummy = watch("dummyChange");
-                        setValue(
-                          "dummyChange",
-                          dummy === "changed" ? "reset" : "changed",
-                          {
-                            shouldDirty: true,
-                          }
-                        );
-
-                        handleRemoveFilter(filter.filter_attribute);
-                      }}
-                      size="small"
-                    >
-                      <CloseIcon />
-                    </IconButton>
-                  </Box>
-
-                  <Box>
-                    {filter.data_type === "text" ||
-                    filter.data_type === "number" ? (
-                      <FormTextfield
-                        filter={filter}
-                        control={control}
-                        onValueChange={updateFiltersFromForm}
-                      />
-                    ) : filter.data_type === "year" ? (
-                      <FormDatePicker
-                        filter={filter}
-                        control={control}
-                        views={["year"]}
-                        onValueChange={updateFiltersFromForm}
-                      />
-                    ) : filter.data_type === "date" ? (
-                      <FormDatePicker
+          <Box className="filter-form-inputs">
+            {selectedFilters
+              .filter(
+                (filter) =>
+                  filter.name
+                    ?.toLowerCase()
+                    .includes(searchTerm.toLowerCase()) ||
+                  filter.filter_value
+                    ?.toString()
+                    .toLowerCase()
+                    .includes(searchTerm.toLowerCase())
+              )
+              .map((filter) => {
+                const { dropdown_list = [] } = filter;
+                return (
+                  <Box
+                    key={filter.filter_attribute}
+                    sx={filterFormStyles.formListItem}
+                  >
+                    <Box sx={filterFormStyles.formListItemHeader}>
+                      <Typography sx={filterFormStyles.formListItemHeaderName}>
+                        {filter.name}
+                      </Typography>
+                      <FormDropdown
                         filter={filter}
                         control={control}
+                        dropdownList={dropdown_list}
+                        sx={filterFormStyles.formListItemHeaderDropdown}
                         onValueChange={updateFiltersFromForm}
                       />
-                    ) : filter.data_type === "select" ? (
-                      <FormSelect
-                        filter={filter}
-                        control={control}
-                        dropdownData={dropdownData}
-                        onValueChange={updateFiltersFromForm}
-                      />
-                    ) : filter.data_type === "multiselect" ? (
-                      <FormMultiSelect
-                        filter={filter}
-                        control={control}
-                        dropdownData={dropdownData}
-                        onValueChange={updateFiltersFromForm}
-                      />
-                    ) : (
-                      <FormControl fullWidth size="small" />
-                    )}
+                      <IconButton
+                        sx={{ marginLeft: "auto" }}
+                        onClick={() => {
+                          unregister(`${filter.name}.value`);
+                          unregister(`${filter.name}.operator`);
+
+                          // ✅ Toggle dummy field to force form dirty
+                          const dummy = watch("dummyChange");
+                          setValue(
+                            "dummyChange",
+                            dummy === "changed" ? "reset" : "changed",
+                            {
+                              shouldDirty: true,
+                            }
+                          );
+
+                          handleRemoveFilter(filter.filter_attribute);
+                        }}
+                        size="small"
+                      >
+                        <CloseIcon />
+                      </IconButton>
+                    </Box>
+
+                    <Box>
+                      {filter.data_type === "text" ||
+                      filter.data_type === "number" ? (
+                        <FormTextfield
+                          filter={filter}
+                          control={control}
+                          onValueChange={updateFiltersFromForm}
+                        />
+                      ) : filter.data_type === "year" ? (
+                        <FormDatePicker
+                          filter={filter}
+                          control={control}
+                          views={["year"]}
+                          onValueChange={updateFiltersFromForm}
+                        />
+                      ) : filter.data_type === "date" ? (
+                        <FormDatePicker
+                          filter={filter}
+                          control={control}
+                          onValueChange={updateFiltersFromForm}
+                        />
+                      ) : filter.data_type === "select" ? (
+                        <FormSelect
+                          filter={filter}
+                          control={control}
+                          dropdownData={dropdownData}
+                          onValueChange={updateFiltersFromForm}
+                        />
+                      ) : filter.data_type === "multiselect" ? (
+                        <FormMultiSelect
+                          filter={filter}
+                          control={control}
+                          dropdownData={dropdownData}
+                          onValueChange={updateFiltersFromForm}
+                        />
+                      ) : (
+                        <FormControl fullWidth size="small" />
+                      )}
+                    </Box>
                   </Box>
-                </Box>
-              );
-            })}
+                );
+              })}
+          </Box>
         </Box>
       </Box>
 

package/src/components/filter/components/main-filter.tsx

@@ -44,7 +44,7 @@ const MainFilter = ({
   };
 
   return (
-    <Box sx={mainBoxStyles}>
+    <Box sx={mainBoxStyles} className="main-filter-component-wrapper">
       {/* Set selectedFilters state */}
 
       {/* Render selectedFilters state */}

package/src/components/filter/components/saved-filter.tsx

@@ -134,7 +134,7 @@ const SavedFilter = ({
   };
 
   return (
-    <Box sx={mainBoxStyles}>
+    <Box sx={mainBoxStyles} className="saved-filter-component-wrapper">
       {/* Render search input and list */}
       {!editMode && renderList()}
 

package/src/components/table-settings/components/sorting.tsx

@@ -41,6 +41,7 @@ const Sorting = ({
     setSortingTabState,
     saveButtonError,
     setSaveButtonError,
+    columnTabState,
   } = filterSettingStates;
 
   const [activeTab, setActiveTab] = useState<string | undefined>(
@@ -248,6 +249,24 @@ const Sorting = ({
     );
   }, [saveButtonError]);
 
+  const getCurrentLists = () => {
+    if (sortingTabState?.isDefault) {
+      return {
+        showList: columnTabState.show_list || [],
+        hideList: columnTabState.hide_list || [],
+      };
+    } else {
+      const currentTab = columnTabState?.tabs?.[activeTabIndex || 0];
+      return {
+        showList: currentTab?.show_list || [],
+        hideList: currentTab?.hide_list || [],
+      };
+    }
+  };
+
+  const { showList, hideList } = getCurrentLists();
+  console.log("showList", showList);
+
   return (
     <Box sx={{ display: "flex", flexDirection: "column", gap: "0.75rem" }}>
       <Typography>Select attribute(s) you want to sort by</Typography>
@@ -296,15 +315,15 @@ const Sorting = ({
                         size="small"
                         fullWidth
                       >
-                        {columnsData?.column_list?.map((column) => (
+                        {showList?.map((column, index) => (
                           <MenuItem
-                            key={column?.attribute_key}
-                            value={column?.attribute_key}
+                            key={index}
+                            value={column.value}
                             disabled={tabSortedList.some(
-                              (s) => s.column === column?.attribute_key
+                              (s) => s.column === column?.value
                             )}
                           >
-                            {column?.name}
+                            {column?.label}
                           </MenuItem>
                         ))}
                       </Select>