rez-table-listing-mui 2.0.11 → 2.0.13

package/package.json

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

package/src/listing/components/filter/components/forms/components/Multi-Select.tsx

@@ -27,6 +27,10 @@ const FormMultiSelect = ({
 }) => {
   const options = dropdownData[filter.filter_attribute] || [];
 
+  // 🔑 single source of truth
+  const getOptionValue = (item: DropdownOption) =>
+    isFlatJson ? item.label : item.value;
+
   return (
     <Controller
       name={`${filter?.filter_attribute_name}.value`}
@@ -65,26 +69,30 @@ const FormMultiSelect = ({
                 const filtered = Array.isArray(selected)
                   ? selected.filter(Boolean)
                   : [];
+
                 return filtered
-                  .map(
-                    (val) =>
-                      options.find((item) => item.value === val)?.label || val
-                  )
+                  .map((val) => {
+                    const match = options.find(
+                      (item) => getOptionValue(item) === val
+                    );
+                    return match?.label || val;
+                  })
                   .join(", ");
               }}
             >
-              {options?.map((item, idx) => (
-                <MenuItem
-                  key={idx}
-                  value={isFlatJson ? item.label : item.value}
-                >
-                  <Checkbox
-                    checked={cleanedValue.includes(item.value)}
-                    sx={{ marginRight: 1 }}
-                  />
-                  {item.label}
-                </MenuItem>
-              ))}
+              {options.map((item, idx) => {
+                const optionValue = getOptionValue(item);
+
+                return (
+                  <MenuItem key={idx} value={optionValue}>
+                    <Checkbox
+                      checked={cleanedValue.includes(optionValue)}
+                      sx={{ marginRight: 1 }}
+                    />
+                    {item.label}
+                  </MenuItem>
+                );
+              })}
             </Select>
           </FormControl>
         );

package/src/listing/components/table-settings/components/quick-tab.tsx

@@ -38,6 +38,7 @@ const QuickTab = ({
   tabsApiDataLoading,
   activeTab,
   columnTabAttributes,
+  isFlatJson,
 }: SettingsQuickTabProps) => {
   const {
     settingsData,
@@ -65,6 +66,10 @@ const QuickTab = ({
   //   // tab?.tab_name?.label?.toLowerCase() == activeTab?.toLowerCase()
   // );
   // In case there is no quick tab state from API
+  const normalizeTabItem = (item: any) => ({
+    label: item.label,
+    value: isFlatJson ? item.label : item.value,
+  });
   useEffect(() => {
     const stateToArray =
       (quickTabStates && Object.entries(quickTabStates)) || [];
@@ -86,12 +91,14 @@ const QuickTab = ({
   useEffect(() => {
     if (currentQuickAttribute === settingsData?.quick_tab?.attribute) return;
 
+    const normalizedTabs = tabsApiData?.map(normalizeTabItem) || [];
+
     if (tabsApiData?.length) {
       setSettingsData((prev) => ({
         ...prev,
         quick_tab: {
           ...prev?.quick_tab,
-          hide_list: tabsApiData,
+          hide_list: normalizedTabs,
           show_list: [],
         },
       }));
@@ -178,10 +185,14 @@ const QuickTab = ({
   // Convert show_list/hide_list to FilterValue[] for rendering only
 
   const constructHideList = () => {
-    return tabsApiData?.filter(
-      (tab) => !showListValues?.find((i) => i.value === tab.value)
+    const normalizedTabs = tabsApiData?.map(normalizeTabItem) || [];
+
+    // remove items already in show_list (value-safe comparison)
+    return normalizedTabs?.filter(
+      (tab) => !showListValues?.some((i) => i?.value === tab?.value)
     );
   };
+
   const showListValues = quickTabStates?.show_list || [];
   const hideListValues = constructHideList() || [];
 

package/src/listing/components/table-settings/index.tsx

@@ -25,6 +25,7 @@ import { useFullscreenPopoverContainer } from "../../libs/hooks/useFullScreen";
 
 export function QuickFilterSettings({
   view = "listing",
+  isFlatJson,
   show,
   filterSettingStates,
   onClose,
@@ -146,6 +147,7 @@ export function QuickFilterSettings({
                       tabsApiDataLoading={tabsApiDataLoading}
                       activeTab={activeTab}
                       columnTabAttributes={columnTabAttributes}
+                      isFlatJson={isFlatJson}
                     />
                   )}
                 </CustomTabPanel>

package/src/listing/types/filter-settings.ts

@@ -3,6 +3,7 @@ import { craftTableFilterSettingsOptionsProps } from "./table-options";
 
 export interface QuickFilterModalProps {
   view?: string;
+  isFlatJson: boolean;
   show?: boolean;
   filterSettingStates: craftTableFilterSettingsOptionsProps;
   onClose?: () => void;
@@ -102,6 +103,7 @@ export interface SettingsQuickTabProps {
   activeTab?: string;
   columnTabAttributes?: any[];
   columnTabAttributesLoading?: boolean;
+  isFlatJson: boolean;
 }
 
 export interface SettingsDataProps {

package/src/view/ListingView.tsx

@@ -503,6 +503,7 @@ function ListingView() {
 
             <QuickFilterSettings
               view="listing"
+              isFlatJson={metaQuery.data?.is_flat_json || false}
               filterSettingStates={filterSettingStates}
               onClose={() => setShowListViewSettings(false)}
               columnsData={metaQuery.data || {}}