rez-table-listing-mui 1.2.9 → 1.2.10

package/package.json

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

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
@@ -203,7 +269,7 @@ function Topbar<T>({
           </div>
         )}
 
-        {viewMoreToggle && (
+        {/* {viewMoreToggle && (
           <div className="view-more ts--button" title="View More">
             <ViewMore
               compactMode={isCompactTable}
@@ -217,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>
   );

package/src/components/viewmore/index.tsx

@@ -12,14 +12,201 @@ import { CloseIcon, ViewMoreIcon } from "../../assets/svg";
 import { useFullscreenPopoverContainer } from "../../libs/hooks/useFullScreen";
 import { CraftTableOptionsProps } from "../../types/table-options";
 
-interface ViewMorePopoverProps {
+// interface ViewMorePopoverProps {
+//   compactMode: boolean;
+//   onCompactToggle: (value: string) => void;
+//   isFullscreen: boolean;
+//   onFullscreenToggle: () => void;
+//   groupBy: string;
+//   onGroupByChange: (value: string) => void;
+//   tableStates: CraftTableOptionsProps;
+// }
+
+// const ViewMore = ({
+//   compactMode,
+//   onCompactToggle,
+//   isFullscreen,
+//   onFullscreenToggle,
+//   // groupBy,
+//   // onGroupByChange,
+//   tableStates,
+// }: ViewMorePopoverProps) => {
+//   const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+
+//   const open = Boolean(anchorEl);
+//   const { container: fullscreenContainer } = useFullscreenPopoverContainer();
+
+//   const handleClick = (event: React.MouseEvent<HTMLElement>) => {
+//     setAnchorEl(event.currentTarget);
+//   };
+
+//   const handleClose = () => {
+//     setAnchorEl(null);
+//   };
+
+//   const { wrapColumns, setWrapColumns } = tableStates;
+
+//   const onWrapCellToggle = () => {
+//     setWrapColumns((prev: Record<string, boolean>) => ({
+//       all_wrap: !prev["all_wrap"],
+//     }));
+//   };
+
+//   return (
+//     <>
+//       <div onClick={handleClick}>
+//         <ViewMoreIcon />
+//       </div>
+
+//       <Popover
+//         open={open}
+//         anchorEl={anchorEl}
+//         onClose={handleClose}
+//         container={fullscreenContainer}
+//         anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
+//         transformOrigin={{ vertical: "top", horizontal: "left" }}
+//         PaperProps={{
+//           sx: {
+//             mt: 2,
+//             padding: 3,
+//             width: 380,
+//             borderRadius: 1,
+//             boxShadow: 4,
+//           },
+//         }}
+//       >
+//         <Box
+//           display="flex"
+//           justifyContent="space-between"
+//           alignItems="center"
+//           px={2}
+//           py={2}
+//           sx={{
+//             backgroundColor: "#F9FAFB",
+//             // borderBottom: "1px solid #E0E0E0",
+//             // borderTopLeftRadius: 4,
+//             // borderTopRightRadius: 4,
+//             margin: "-24px -24px 24px -24px",
+//           }}
+//         >
+//           <Typography fontSize="18px" fontWeight={400} color="#0C2033">
+//             View
+//           </Typography>
+//           <IconButton size="small" onClick={handleClose}>
+//             <CloseIcon />
+//           </IconButton>
+//         </Box>
+
+//         {/* Wrap Cell */}
+//         <Box
+//           display="flex"
+//           justifyContent="space-between"
+//           alignItems="center"
+//           mb={2}
+//         >
+//           <Typography fontSize="14px" fontWeight={400} color="#000000DE">
+//             Wrap Cell
+//           </Typography>
+//           <MUISwitch
+//             checked={wrapColumns?.all_wrap || false}
+//             onChange={onWrapCellToggle}
+//           />
+//         </Box>
+
+//         {/* List View */}
+//         <Box
+//           display="flex"
+//           justifyContent="space-between"
+//           alignItems="center"
+//           mb={2}
+//         >
+//           <Typography fontSize="14px" fontWeight={400} color="#000000DE">
+//             List View
+//           </Typography>
+//           <Select
+//             size="small"
+//             value={compactMode ? "Compact" : "Comfy"}
+//             onChange={(e) => onCompactToggle(e.target.value)}
+//             sx={{
+//               minWidth: 120,
+//               fontWeight: 400,
+//               color: "#000",
+//               fontSize: "13px",
+//             }}
+//             MenuProps={{
+//               container: fullscreenContainer,
+//               disablePortal: false,
+//               PaperProps: {
+//                 style: {
+//                   zIndex: 1500,
+//                 },
+//               },
+//             }}
+//           >
+//             <MenuItem value="Comfy">Comfy</MenuItem>
+//             <MenuItem value="Compact">Compact</MenuItem>
+//           </Select>
+//         </Box>
+
+//         {/* Group By */}
+//         {/* <Box
+//           display="flex"
+//           justifyContent="space-between"
+//           alignItems="center"
+//           mb={2}
+//         >
+//           <Typography fontSize="14px" fontWeight={400} color="#000000DE">
+//             Group By
+//           </Typography>
+//           <Select
+//             size="small"
+//             value={groupBy}
+//             onChange={(e) => onGroupByChange(e.target.value)}
+//             sx={{
+//               minWidth: 120,
+//               fontWeight: 400,
+//               color: "#000",
+//               fontSize: "13px",
+//             }}
+//             MenuProps={{
+//               container: fullscreenContainer,
+//               disablePortal: false,
+//               PaperProps: {
+//                 style: {
+//                   zIndex: 1500,
+//                 },
+//               },
+//             }}
+//           >
+//             <MenuItem value="None">None</MenuItem>
+//             <MenuItem value="Status">Status</MenuItem>
+//             <MenuItem value="Owner">Owner</MenuItem>
+//           </Select>
+//         </Box> */}
+
+//         {/* Fullscreen */}
+//         <Box display="flex" justifyContent="space-between" alignItems="center">
+//           <Typography fontSize="14px" fontWeight={400} color="#000000DE">
+//             Fullscreen
+//           </Typography>
+//           <MUISwitch checked={isFullscreen} onChange={onFullscreenToggle} />
+//         </Box>
+//       </Popover>
+//     </>
+//   );
+// };
+
+// export default ViewMore;
+
+interface ViewMoreProps {
   compactMode: boolean;
   onCompactToggle: (value: string) => void;
   isFullscreen: boolean;
   onFullscreenToggle: () => void;
-  groupBy: string;
-  onGroupByChange: (value: string) => void;
+  groupBy?: string;
+  onGroupByChange?: (value: string) => void;
   tableStates: CraftTableOptionsProps;
+  onClose?: () => void;
 }
 
 const ViewMore = ({
@@ -30,20 +217,9 @@ const ViewMore = ({
   // groupBy,
   // onGroupByChange,
   tableStates,
-}: ViewMorePopoverProps) => {
-  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
-
-  const open = Boolean(anchorEl);
+  onClose,
+}: ViewMoreProps) => {
   const { container: fullscreenContainer } = useFullscreenPopoverContainer();
-
-  const handleClick = (event: React.MouseEvent<HTMLElement>) => {
-    setAnchorEl(event.currentTarget);
-  };
-
-  const handleClose = () => {
-    setAnchorEl(null);
-  };
-
   const { wrapColumns, setWrapColumns } = tableStates;
 
   const onWrapCellToggle = () => {
@@ -53,146 +229,81 @@ const ViewMore = ({
   };
 
   return (
-    <>
-      <div onClick={handleClick}>
-        <ViewMoreIcon />
-      </div>
-
-      <Popover
-        open={open}
-        anchorEl={anchorEl}
-        onClose={handleClose}
-        container={fullscreenContainer}
-        anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
-        transformOrigin={{ vertical: "top", horizontal: "left" }}
-        PaperProps={{
-          sx: {
-            mt: 2,
-            padding: 3,
-            width: 380,
-            borderRadius: 1,
-            boxShadow: 4,
-          },
-        }}
+    <Box sx={{ p: 3, width: 380 }}>
+      {/* Header */}
+      <Box
+        display="flex"
+        justifyContent="space-between"
+        alignItems="center"
+        mb={3}
+      >
+        <Typography fontSize="18px" fontWeight={400} color="#0C2033">
+          View
+        </Typography>
+        <IconButton size="small" onClick={onClose}>
+          <CloseIcon />
+        </IconButton>
+      </Box>
+
+      {/* Wrap Cell */}
+      <Box
+        display="flex"
+        justifyContent="space-between"
+        alignItems="center"
+        mb={2}
       >
-        <Box
-          display="flex"
-          justifyContent="space-between"
-          alignItems="center"
-          px={2}
-          py={2}
+        <Typography fontSize="14px" fontWeight={400} color="#000000DE">
+          Wrap Cell
+        </Typography>
+        <MUISwitch
+          checked={wrapColumns?.all_wrap || false}
+          onChange={onWrapCellToggle}
+        />
+      </Box>
+
+      {/* List View */}
+      <Box
+        display="flex"
+        justifyContent="space-between"
+        alignItems="center"
+        mb={2}
+      >
+        <Typography fontSize="14px" fontWeight={400} color="#000000DE">
+          List View
+        </Typography>
+        <Select
+          size="small"
+          value={compactMode ? "Compact" : "Comfy"}
+          onChange={(e) => onCompactToggle(e.target.value)}
           sx={{
-            backgroundColor: "#F9FAFB",
-            // borderBottom: "1px solid #E0E0E0",
-            // borderTopLeftRadius: 4,
-            // borderTopRightRadius: 4,
-            margin: "-24px -24px 24px -24px",
+            minWidth: 120,
+            fontWeight: 400,
+            color: "#000",
+            fontSize: "13px",
           }}
-        >
-          <Typography fontSize="18px" fontWeight={400} color="#0C2033">
-            View
-          </Typography>
-          <IconButton size="small" onClick={handleClose}>
-            <CloseIcon />
-          </IconButton>
-        </Box>
-
-        {/* Wrap Cell */}
-        <Box
-          display="flex"
-          justifyContent="space-between"
-          alignItems="center"
-          mb={2}
-        >
-          <Typography fontSize="14px" fontWeight={400} color="#000000DE">
-            Wrap Cell
-          </Typography>
-          <MUISwitch
-            checked={wrapColumns?.all_wrap || false}
-            onChange={onWrapCellToggle}
-          />
-        </Box>
-
-        {/* List View */}
-        <Box
-          display="flex"
-          justifyContent="space-between"
-          alignItems="center"
-          mb={2}
-        >
-          <Typography fontSize="14px" fontWeight={400} color="#000000DE">
-            List View
-          </Typography>
-          <Select
-            size="small"
-            value={compactMode ? "Compact" : "Comfy"}
-            onChange={(e) => onCompactToggle(e.target.value)}
-            sx={{
-              minWidth: 120,
-              fontWeight: 400,
-              color: "#000",
-              fontSize: "13px",
-            }}
-            MenuProps={{
-              container: fullscreenContainer,
-              disablePortal: false,
-              PaperProps: {
-                style: {
-                  zIndex: 1500,
-                },
+          MenuProps={{
+            container: fullscreenContainer,
+            disablePortal: false,
+            PaperProps: {
+              style: {
+                zIndex: 1500,
               },
-            }}
-          >
-            <MenuItem value="Comfy">Comfy</MenuItem>
-            <MenuItem value="Compact">Compact</MenuItem>
-          </Select>
-        </Box>
-
-        {/* Group By */}
-        {/* <Box
-          display="flex"
-          justifyContent="space-between"
-          alignItems="center"
-          mb={2}
+            },
+          }}
         >
-          <Typography fontSize="14px" fontWeight={400} color="#000000DE">
-            Group By
-          </Typography>
-          <Select
-            size="small"
-            value={groupBy}
-            onChange={(e) => onGroupByChange(e.target.value)}
-            sx={{
-              minWidth: 120,
-              fontWeight: 400,
-              color: "#000",
-              fontSize: "13px",
-            }}
-            MenuProps={{
-              container: fullscreenContainer,
-              disablePortal: false,
-              PaperProps: {
-                style: {
-                  zIndex: 1500,
-                },
-              },
-            }}
-          >
-            <MenuItem value="None">None</MenuItem>
-            <MenuItem value="Status">Status</MenuItem>
-            <MenuItem value="Owner">Owner</MenuItem>
-          </Select>
-        </Box> */}
-
-        {/* Fullscreen */}
-        <Box display="flex" justifyContent="space-between" alignItems="center">
-          <Typography fontSize="14px" fontWeight={400} color="#000000DE">
-            Fullscreen
-          </Typography>
-          <MUISwitch checked={isFullscreen} onChange={onFullscreenToggle} />
-        </Box>
-      </Popover>
-    </>
+          <MenuItem value="Comfy">Comfy</MenuItem>
+          <MenuItem value="Compact">Compact</MenuItem>
+        </Select>
+      </Box>
+
+      {/* Fullscreen */}
+      <Box display="flex" justifyContent="space-between" alignItems="center">
+        <Typography fontSize="14px" fontWeight={400} color="#000000DE">
+          Fullscreen
+        </Typography>
+        <MUISwitch checked={isFullscreen} onChange={onFullscreenToggle} />
+      </Box>
+    </Box>
   );
 };