rez-table-listing-mui 1.2.8 → 1.2.10

package/package.json

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

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,6 +172,7 @@ const AttributesFilter = ({
         </Select>
       </FormControl>
 
+      {/* Search and Single Radio Options */}
       <Box>
         {selectedAttribute && (
           <CustomSearch value={searchTerm} onChange={setSearchTerm} />
@@ -199,7 +187,6 @@ const AttributesFilter = ({
               {selectedAttributeOptions
                 ?.filter((option) => {
                   if (!searchTerm) return true;
-
                   return option.label
                     .toLowerCase()
                     .includes(searchTerm.toLowerCase());
@@ -213,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/topbar/index.tsx

@@ -107,6 +107,62 @@ function Topbar<T>({
     handler: () => setShowSearchInput(false),
   });
 
+  useEffect(() => {
+    const handleExternalLayoutTrigger = (e: Event) => {
+      const target = (e as CustomEvent).detail?.target as HTMLElement;
+      setLayoutAnchorEl(target);
+    };
+
+    const handleExternalFilterTrigger = () => {
+      onFilterButtonClick?.();
+    };
+
+    const handleExternalViewMoreTrigger = (e: Event) => {
+      const target = (e as CustomEvent).detail?.target as HTMLElement;
+      if (target) setViewMoreAnchorEl(target);
+    };
+
+    const handleExternalSearchTrigger = () => {
+      setShowSearchInput(true);
+      setTimeout(() => {
+        searchContainerRef.current?.querySelector("input")?.focus();
+      }, 100);
+    };
+
+    window.addEventListener(
+      "triggerLayoutPopover",
+      handleExternalLayoutTrigger
+    );
+    window.addEventListener("triggerFilterButton", handleExternalFilterTrigger);
+    window.addEventListener("triggerViewMore", handleExternalViewMoreTrigger);
+    window.addEventListener("triggerSearchInput", handleExternalSearchTrigger); // ✅
+
+    return () => {
+      window.removeEventListener(
+        "triggerLayoutPopover",
+        handleExternalLayoutTrigger
+      );
+      window.removeEventListener(
+        "triggerFilterButton",
+        handleExternalFilterTrigger
+      );
+      window.removeEventListener(
+        "triggerViewMore",
+        handleExternalViewMoreTrigger
+      );
+      window.removeEventListener(
+        "triggerSearchInput",
+        handleExternalSearchTrigger
+      ); // ✅
+    };
+  }, [onFilterButtonClick]);
+
+  const [viewMoreAnchorEl, setViewMoreAnchorEl] = useState<HTMLElement | null>(
+    null
+  );
+
+  const isViewMoreOpen = Boolean(viewMoreAnchorEl);
+
   return (
     <div className="ts-topbar">
       <div className="tabs-section">
@@ -131,28 +187,38 @@ function Topbar<T>({
         {showChangeLayoutToggle && (
           <>
             <div className="change-layout ts--button" title="Layout">
-              <div onClick={handleLayoutIconClick}>
+              {/* <div onClick={handleLayoutIconClick}>
+                <ChangeLayoutIcon />
+              </div> */}
+              <div
+                onClick={(e) => {
+                  const customEvent = new CustomEvent("triggerLayoutPopover", {
+                    detail: { target: e.currentTarget },
+                  });
+                  window.dispatchEvent(customEvent);
+                }}
+                className="external-layout-trigger"
+              >
                 <ChangeLayoutIcon />
               </div>
             </div>
-            <Popover
-              open={Boolean(layoutAnchorEl)}
-              anchorEl={layoutAnchorEl}
-              onClose={() => setLayoutAnchorEl(null)}
-              anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
-              container={fullscreenContainer}
-              sx={{
-                mt: 2.2,
-              }}
-            >
-              <LayoutSelector
-                onSelect={handleLayoutSelect}
-                selectedLayout={selectedLayout}
-              />
-            </Popover>
           </>
         )}
-
+        <Popover
+          open={Boolean(layoutAnchorEl)}
+          anchorEl={layoutAnchorEl}
+          onClose={() => setLayoutAnchorEl(null)}
+          anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
+          container={fullscreenContainer}
+          sx={{
+            mt: 2.2,
+          }}
+        >
+          <LayoutSelector
+            onSelect={handleLayoutSelect}
+            selectedLayout={selectedLayout}
+          />
+        </Popover>
         {showColumnToggle && (
           <>
             <div
@@ -199,13 +265,11 @@ function Topbar<T>({
             title="Filter"
             onClick={onFilterButtonClick && onFilterButtonClick}
           >
-            <FilterationIcon
-              color={tableStates.filters.length ? "#1C1B1F" : "#888"}
-            />
+            <FilterationIcon color="#1C1B1F" />
           </div>
         )}
 
-        {viewMoreToggle && (
+        {/* {viewMoreToggle && (
           <div className="view-more ts--button" title="View More">
             <ViewMore
               compactMode={isCompactTable}
@@ -219,7 +283,54 @@ function Topbar<T>({
               tableStates={tableStates}
             />
           </div>
-        )}
+        )} */}
+        {/* {viewMoreToggle && (
+          <div
+            className="view-more ts--button view-more-trigger"
+            title="View More"
+          >
+            <ViewMore
+              compactMode={isCompactTable}
+              onCompactToggle={(value: string) =>
+                setIsCompactTable(value === "Compact")
+              }
+              isFullscreen={isFullscreen}
+              onFullscreenToggle={fullscreenToggle}
+              groupBy={groupBy}
+              onGroupByChange={(value: string) => setGroupBy(value)}
+              tableStates={tableStates}
+            />
+          </div>
+        )} */}
+        <Popover
+          open={isViewMoreOpen}
+          anchorEl={viewMoreAnchorEl}
+          onClose={() => setViewMoreAnchorEl(null)}
+          anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
+          transformOrigin={{ vertical: "top", horizontal: "left" }}
+          // PaperProps={{
+          //   sx: {
+          //     mt: 2,
+          //     padding: 0,
+          //     width: 380,
+          //     borderRadius: 1,
+          //     boxShadow: 4,
+          //   },
+          // }}
+        >
+          <ViewMore
+            compactMode={isCompactTable}
+            onCompactToggle={(value: string) =>
+              setIsCompactTable(value === "Compact")
+            }
+            isFullscreen={isFullscreen}
+            onFullscreenToggle={fullscreenToggle}
+            groupBy={groupBy}
+            onGroupByChange={(value: string) => setGroupBy(value)}
+            tableStates={tableStates}
+            onClose={() => setViewMoreAnchorEl(null)}
+          />
+        </Popover>
       </div>
     </div>
   );