rez-table-listing-mui 1.2.7 → 1.2.9

package/package.json

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

package/rollup.config.js

@@ -15,12 +15,12 @@ export default [
       {
         file: packageJson.main,
         format: "cjs",
-        sourmap: true,
+        sourcemap: true,
       },
       {
         file: packageJson.module,
         format: "esm",
-        sourmap: true,
+        sourcemap: true,
       },
     ],
     plugins: [

package/src/components/common/confirm-modal/index.tsx

@@ -80,7 +80,11 @@ const ConfirmModal: React.FC<ConfirmModalProps> = ({
   return (
     <Dialog
       open={open}
-      onClose={handleClose}
+      onClose={(event, reason) => {
+        if (reason !== "backdropClick" && reason !== "escapeKeyDown") {
+          handleClose();
+        }
+      }}
       maxWidth={maxWidth}
       fullWidth={fullWidth}
       PaperProps={{

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

@@ -26,7 +26,7 @@ const AttributesFilter = ({
 
   const selectedAttribute = filterMaster?.attributes?.selected;
 
-  // Get the current filter value(s) to determine selected options
+  // Get the current filter value (single selection)
   const currentFilterValue = useMemo(() => {
     if (!selectedAttribute) return [];
 
@@ -61,7 +61,7 @@ const AttributesFilter = ({
     );
   };
 
-  const handleMultiRadioToggle = (value: string) => {
+  const handleSingleRadioSelect = (value: string) => {
     const selectedAttr = filterMaster?.attributes.selected;
     if (!selectedAttr) return;
 
@@ -70,27 +70,13 @@ const AttributesFilter = ({
     );
     if (!matchingColumn) return;
 
-    const existingFilter = filters.find(
-      (f) => f.filter_attribute === matchingColumn.attribute_key
-    );
-
-    const currentValues: string[] = Array.isArray(existingFilter?.filter_value)
-      ? existingFilter.filter_value
-      : [];
-
-    const isAlreadySelected = currentValues.includes(value);
-
-    const updatedValues = isAlreadySelected
-      ? currentValues.filter((v) => v !== value)
-      : [...currentValues, value];
-
     const defaultOperator =
       columnsData.operation_list[matchingColumn.data_type]?.[0]?.value || "in";
 
     const newFilter = {
       filter_attribute: matchingColumn.attribute_key,
       filter_operator: defaultOperator,
-      filter_value: updatedValues,
+      filter_value: [value], // single selection
     };
 
     setFilters((prevFilters) => {
@@ -113,7 +99,7 @@ const AttributesFilter = ({
         ...prev,
         attributes: {
           ...prev.attributes,
-          radio: updatedValues,
+          radio: [value],
         },
         activeFilterTabIndex: tabValue as number,
       };
@@ -137,6 +123,7 @@ const AttributesFilter = ({
       }}
       className="attributes-filter-component-wrapper"
     >
+      {/* Attribute Select Dropdown */}
       <FormControl fullWidth size="small">
         <Select
           value={selectedAttribute || ""}
@@ -185,18 +172,21 @@ const AttributesFilter = ({
         </Select>
       </FormControl>
 
+      {/* Search and Single Radio Options */}
       <Box>
         {selectedAttribute && (
           <CustomSearch value={searchTerm} onChange={setSearchTerm} />
         )}
 
         {dropdownData && (
-          <Box sx={{ mt: 2 }}>
+          <Box
+            className="attributes-filter-list"
+            sx={{ mt: 2, overflow: "auto", maxHeight: "calc(100dvh - 300px)" }}
+          >
             <FormControl>
               {selectedAttributeOptions
                 ?.filter((option) => {
                   if (!searchTerm) return true;
-
                   return option.label
                     .toLowerCase()
                     .includes(searchTerm.toLowerCase());
@@ -210,7 +200,7 @@ const AttributesFilter = ({
                       control={
                         <Radio
                           checked={isSelected}
-                          onClick={() => handleMultiRadioToggle(option.value)}
+                          onChange={() => handleSingleRadioSelect(option.value)}
                         />
                       }
                       label={option.label}

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

@@ -153,7 +153,11 @@ const FilterForm = ({
   }, []);
 
   return (
-    <form>
+    <form
+      onSubmit={(e) => {
+        e.preventDefault(); // 🔥 This prevents the page from reloading
+      }}
+    >
       <Box sx={editMode ? filterFormStyles.formEditModeStyle : {}}>
         {editMode && (
           <Box

package/src/components/search/index.tsx

@@ -11,7 +11,10 @@ interface TableSearchProps {
   onChange: (value: string) => void;
 }
 
-const TableSearch = ({ value, onChange }: TableSearchProps): JSX.Element => {
+export const TableSearch = ({
+  value,
+  onChange,
+}: TableSearchProps): JSX.Element => {
   const [showSearchInput, setShowSearchInput] = useState(false);
   const [localValue, setLocalValue] = useState(value);
   const searchContainerRef = useRef<HTMLDivElement>(null);
@@ -115,5 +118,3 @@ const TableSearch = ({ value, onChange }: TableSearchProps): JSX.Element => {
     </Box>
   );
 };
-
-export default TableSearch;

package/src/components/tabs/index.tsx

@@ -39,7 +39,7 @@ export function TableTabs({
   // Normalize tab_value to uppercase for display + logic
   const normalizedTabs = useMemo(() => {
     return tabsData
-      ?.filter((tab) => tab.tab_value)
+      ?.filter((tab) => tab.tab_value !== null)
       ?.map((tab) => ({
         ...tab,
         tab_value: tab.tab_value?.toUpperCase(),
@@ -73,7 +73,7 @@ export function TableTabs({
         value={selectedTab}
         onChange={(_, newValue) => handleTabClick(newValue)}
         variant="scrollable"
-        scrollButtons={false}
+        scrollButtons="auto"
         slotProps={{ indicator: { sx: { display: "none" } } }}
         sx={tableTabsStyles.tabs}
       >

package/src/components/topbar/index.tsx

@@ -16,7 +16,7 @@ import { useFullscreenPopoverContainer } from "../../libs/hooks/useFullScreen";
 import SortPopover from "../sorting-modal.tsx";
 import ColumnToggle from "../column-visibility-modal/index.tsx";
 import { CraftTableOptionsProps } from "../../types/table-options.ts";
-import TableSearch from "../search/index.tsx";
+import { TableSearch } from "../search/index.tsx";
 
 interface TopbarProps<T> {
   table: Table<T>;
@@ -199,9 +199,7 @@ function Topbar<T>({
             title="Filter"
             onClick={onFilterButtonClick && onFilterButtonClick}
           >
-            <FilterationIcon
-              color={tableStates.filters.length ? "#1C1B1F" : "#888"}
-            />
+            <FilterationIcon color="#1C1B1F" />
           </div>
         )}
 

package/src/index.ts

@@ -4,6 +4,7 @@ export { useCraftTableFilterSettings } from "./libs/hooks/useCraftTableFilterSet
 export { TableTabs as CraftTableTabs } from "./components/tabs";
 export { TableFilter as CraftTableFilter } from "./components/filter";
 export { QuickFilterSettings as CraftTableSettings } from "./components/table-settings";
+export { TableSearch as CraftTableSearch } from "./components/search";
 
 export * from "./types/table";
 export * from "./types/table-options";

package/src/libs/utils/common.ts

@@ -77,8 +77,8 @@ export function customDebounce<T extends (...args: any[]) => any>(
 }
 
 //ENTITY TYPE
-const ENVIRONMENT = "adm_dev";
-export const ENTITY_TYPE = "ROL";
+const ENVIRONMENT = "uat";
+export const ENTITY_TYPE = "NTM";
 
 const environments = {
   adm_dev: "http://localhost:4010/api",
@@ -86,7 +86,7 @@ const environments = {
   uat: "http://13.200.182.92:4010/api",
 };
 
-const getBaseUrl = () => environments[ENVIRONMENT]
+const getBaseUrl = () => environments[ENVIRONMENT];
 
 // uat http://13.200.182.92:4010/api
 // local http://localhost:4010/api