rez-table-listing-mui 1.3.7 → 1.3.8

package/package.json

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

package/src/listing/components/filter/components/forms/components/Filter-criteria.tsx

@@ -1,8 +1,9 @@
 import { Box, Button, styled, Paper } from "@mui/material";
-import { useRef } from "react";
+import { useMemo, useRef } from "react";
 import { AddIcon } from "../../../../../../assets/svg";
 import {
   FilterColumnsDataProps,
+  FilterComponentOptions,
   FilterDataMainFilterEntityWiseCriteriaProps,
 } from "../../../../../types/filter";
 import { CraftTableOptionsProps } from "../../../../../types/table-options";
@@ -16,15 +17,15 @@ const FilterCriteria = ({
   columnsData,
   tableStates,
   onChangeFunction,
+  filterComponentOptions,
 }: {
   columnsData: FilterColumnsDataProps;
   tableStates: CraftTableOptionsProps;
-  searchTerm: string;
-  setSearchTerm: React.Dispatch<React.SetStateAction<string>>;
   onChangeFunction: ({
     updatedFilters,
     filterMaster,
   }: onFilterChangeFunctionProps) => void;
+  filterComponentOptions?: FilterComponentOptions;
 }) => {
   const FilterButton = styled(Button)(({ theme }) => ({
     borderRadius: 20,
@@ -100,12 +101,20 @@ const FilterCriteria = ({
     setShowFilterOption((prev) => !prev);
   };
 
+  // Disable button if only one filter is allowed
+  const isSingleFilter =
+    filterComponentOptions?.tabOptions?.isSingleFilter || false;
+  const disableButton = useMemo(() => {
+    return isSingleFilter && filters?.length > 0;
+  }, [filters?.length, isSingleFilter]);
+
   return (
     <Box>
       <FilterButton
         fullWidth
         startIcon={<AddIcon />}
         onClick={toggleFilterOptions}
+        disabled={disableButton}
         sx={{
           bgcolor: "#eae4fe",
           borderRadius: "6px",

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

@@ -42,8 +42,6 @@ const FilterForm = ({
   dropdownData,
   searchTerm = "",
   setSearchTerm,
-  criteriaSearchTerm = "",
-  setCriteriaSearchTerm,
   handleRemoveFilter,
   editMode = false,
   tableStates,
@@ -56,8 +54,6 @@ const FilterForm = ({
   dropdownData: FilterDropdownDataProps;
   searchTerm?: string;
   setSearchTerm: React.Dispatch<React.SetStateAction<string>>;
-  criteriaSearchTerm?: string;
-  setCriteriaSearchTerm: React.Dispatch<React.SetStateAction<string>>;
   handleRemoveFilter: (filter_attribute: string) => void;
   editMode?: boolean;
   tableStates: CraftTableOptionsProps;
@@ -76,6 +72,8 @@ const FilterForm = ({
     filterComponentOptions?.tabOptions?.mainFilter?.showSaveButton;
   const showClearAllButton =
     filterComponentOptions?.tabOptions?.mainFilter?.showClearAllButton;
+  const customButtons =
+    filterComponentOptions?.tabOptions?.mainFilter?.customButtons;
 
   const filterName = filterMaster?.saved_filters?.selectedName || "";
 
@@ -283,9 +281,8 @@ const FilterForm = ({
           <FilterCriteria
             columnsData={columnsData}
             tableStates={tableStates}
-            searchTerm={criteriaSearchTerm}
-            setSearchTerm={setCriteriaSearchTerm}
             onChangeFunction={onChangeFunction}
+            filterComponentOptions={filterComponentOptions}
           />
 
           {!editMode && (
@@ -497,6 +494,19 @@ const FilterForm = ({
               Save Filter
             </Button>
           )}
+
+          {/* Custom buttons from props */}
+          {customButtons?.map((btn, idx) => (
+            <Button
+              key={idx}
+              fullWidth
+              variant={btn?.variant ?? "outlined"}
+              sx={btn?.sx}
+              {...btn}
+            >
+              {btn?.label}
+            </Button>
+          ))}
         </Box>
       )}
     </form>

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

@@ -16,7 +16,6 @@ const MainFilter = ({
   filterComponentOptions,
 }: FilterFormComponentProps) => {
   const [searchTerm, setSearchTerm] = useState<string>("");
-  const [criteriaSearchTerm, setCriteriaSearchTerm] = useState<string>("");
 
   const { setFilters, setFilterMaster, filterMaster } = tableStates;
 
@@ -60,8 +59,6 @@ const MainFilter = ({
         columnsData={columnsData}
         searchTerm={searchTerm}
         setSearchTerm={setSearchTerm}
-        criteriaSearchTerm={criteriaSearchTerm}
-        setCriteriaSearchTerm={setCriteriaSearchTerm}
         handleRemoveFilter={handleRemoveFilter}
         tableStates={tableStates}
         setSavedFilterModalOpen={setSavedFilterModalOpen}

package/src/listing/types/filter.ts

@@ -1,3 +1,4 @@
+import { ButtonProps } from "@mui/material";
 import { onFilterChangeFunctionProps } from "./common";
 import { CraftTableOptionsProps } from "./table-options";
 
@@ -65,6 +66,12 @@ export interface FilterDropdownDataProps {
 export interface FilterComponentOptionsMainFilterOptions {
   showSaveButton?: boolean;
   showClearAllButton?: boolean;
+  customButtons?: Array<
+    {
+      label: string;
+      onClick: () => void;
+    } & Partial<ButtonProps>
+  >;
 }
 
 // Button config type
@@ -88,28 +95,29 @@ type RecordFilterComponentProps = {
   delete: ModalConfig;
 };
 
+interface FilterComponentTabOptions {
+  mainFilter?: FilterComponentOptionsMainFilterOptions;
+  isSingleFilter?: boolean;
+}
+
 export type FilterComponentOptions =
   | {
+      showTabs?: true; // when true → additional fields allowed
       showMainHeader?: boolean;
       mainHeaderTitle?: string;
-      showTabs?: true; // when true → additional fields allowed
       showMainFilter?: boolean;
       showSavedFilter?: boolean;
       showAttributesFilter?: boolean;
       isRuleEngine?: boolean;
-      tabOptions?: {
-        mainFilter?: FilterComponentOptionsMainFilterOptions;
-      };
+      tabOptions?: FilterComponentTabOptions;
       recordFilterComponentProps?: RecordFilterComponentProps;
     }
   | {
+      showTabs?: false; // explicitly false or omitted
       showMainHeader?: boolean;
       mainHeaderTitle?: string;
-      showTabs?: false; // explicitly false or omitted
       isRuleEngine?: boolean;
-      tabOptions?: {
-        mainFilter?: FilterComponentOptionsMainFilterOptions;
-      };
+      tabOptions?: FilterComponentTabOptions;
       recordFilterComponentProps?: RecordFilterComponentProps;
     };