rez-table-listing-mui 2.0.0 → 2.0.2

package/package.json

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

package/src/listing/components/pagination/default/index.tsx

@@ -4,7 +4,6 @@ import NavigateBeforeRounded from "@mui/icons-material/NavigateBeforeRounded";
 import NavigateNextRounded from "@mui/icons-material/NavigateNextRounded";
 import { MenuItem, Typography } from "@mui/material";
 import { CraftTablePaginationProps } from "../../../types/table";
-
 import {
   PaginationContainer,
   GoToPageContainer,
@@ -49,6 +48,7 @@ function DefaultPagination<T>({
             defaultValue={pageIndex}
             type="number"
             inputProps={{
+              name: "pagination-size",
               min: 1,
               max: pageCount,
             }}

package/src/listing/components/pagination/default/pagination.styles.ts

@@ -95,6 +95,7 @@ export const RowsPerPageSelect = styled(Select)(({ theme }) => ({
   fontSize: theme.typography.pxToRem(12),
 
   "& .MuiSelect-select": {
+    fontSize: theme.typography.pxToRem(12),
     padding: theme.spacing(0.5, 0.75),
   },
 }));
@@ -108,6 +109,7 @@ export const GoToPageInput = styled(InputBase)(({ theme }) => ({
   fontSize: theme.typography.pxToRem(12),
 
   "& .MuiInputBase-input": {
+    fontSize: theme.typography.pxToRem(12),
     padding: theme.spacing(0.25, 0.75),
   },
 }));

package/src/listing/components/search/index.tsx

@@ -58,11 +58,7 @@ export const TableSearch = ({
     <Box
       ref={searchContainerRef}
       className="search-container"
-      sx={{
-        display: "flex",
-        position: "relative",
-        top: "10px",
-      }}
+      sx={{ position: "relative" }}
     >
       <TextField
         type="text"
@@ -87,7 +83,7 @@ export const TableSearch = ({
                     }, 100);
                   }
                 }}
-                sx={{ color: "black", fontSize: "14px" }}
+                sx={{ color: "black", fontSize: 14 }}
                 edge="start"
               >
                 <SearchIcon />
@@ -103,12 +99,12 @@ export const TableSearch = ({
                     setLocalValue("");
                     handleChange({ target: { value: "" } } as any);
                   }}
-                  sx={{ color: "black", fontSize: "14px" }}
+                  sx={{ color: "black", fontSize: 14 }}
                   edge="end"
                 >
                   <CloseRoundedIcon
                     fontSize="small"
-                    sx={{ color: "black", fontSize: "14px" }}
+                    sx={{ color: "black", fontSize: 14 }}
                   />
                 </IconButton>
               </InputAdornment>

package/src/listing/components/table-body/table-body.styles.ts

@@ -28,7 +28,6 @@ export const TableBodyRow = styled("tr", {
   ...(hoverable && {
     transition: "background-color 0.2s ease, box-shadow 0.2s ease",
     "&:hover": {
-      backgroundColor: theme.palette.action.hover,
       boxShadow: `inset 0 2px 2px rgba(0,0,0,0.05),
                   inset 0 -2px 2px rgba(0,0,0,0.05)`,
     },

package/src/listing/components/table-head/table-head.styles.ts

@@ -97,9 +97,7 @@ export const TableHeadCell = styled("th", {
 }>(({ theme, compact, isDragging, isPinned, sticky }) => ({
   position: "relative",
   padding: compact ? theme.spacing(0.375, 0.675) : theme.spacing(0.75, 1),
-  borderWidth: "0.5px",
-  borderStyle: "solid",
-  borderColor: theme.palette.grey[500],
+  border: `0.5px solid ${theme.palette.grey[300]}`,
   cursor: "pointer",
   backgroundColor: theme.palette.common.white,
   userSelect: "none",

package/src/listing/components/tabs/index.tsx

@@ -6,14 +6,14 @@ import { TableTab, TableTabCount, TableTabsRoot } from "./tabs.styles";
 import { SettingsOutlined } from "@mui/icons-material";
 
 interface TabDataProps {
-  tab_name: string | null;
-  count?: string | number;
+  tab_value: string | null;
+  tab_value_count?: string | number;
 }
 
 interface TableTabsProps {
   loading?: boolean;
   tabsData?: TabDataProps[];
-  activeTab?: TabDataProps;
+  activeTab?: string;
   tableStates: CraftTableOptionsProps;
   onClick: (state: string) => void;
   settingsOptions?: settingsOptionsProps;
@@ -22,7 +22,7 @@ interface TableTabsProps {
 export function TableTabs({
   loading = false,
   tabsData = [],
-  activeTab = { tab_name: "All", count: 0 },
+  activeTab = "All",
   onClick,
   tableStates,
   settingsOptions,
@@ -39,22 +39,22 @@ export function TableTabs({
 
   const normalizedTabs = useMemo(() => {
     return tabsData
-      ?.filter((tab) => tab.tab_name !== null)
+      ?.filter((tab) => tab.tab_value !== null)
       ?.map((tab) => ({
         ...tab,
-        tab_name: tab.tab_name,
+        tab_value: tab.tab_value,
       }));
   }, [tabsData]);
 
   const defaultTab = useMemo(() => {
     return (
-      normalizedTabs.find((t) => t.tab_name === "All")?.tab_name ||
-      normalizedTabs[0]?.tab_name ||
+      normalizedTabs.find((t) => t.tab_value === "All")?.tab_value ||
+      normalizedTabs[0]?.tab_value ||
       ""
     );
   }, [normalizedTabs]);
 
-  const selectedTab = activeTab?.tab_name || defaultTab;
+  const selectedTab = activeTab || defaultTab;
 
   return (
     <Box display="flex" alignItems="center" justifyContent="flex-start">
@@ -73,21 +73,21 @@ export function TableTabs({
         scrollButtons="auto"
       >
         {normalizedTabs.map((tab) => {
-          const isSelected = activeTab?.tab_name === tab?.tab_name;
+          const isSelected = activeTab === tab?.tab_value;
 
           return (
             <TableTab
-              key={tab?.tab_name}
-              value={tab}
+              key={tab?.tab_value}
+              value={tab?.tab_value}
               label={
                 <Box display="flex" alignItems="center" gap={1}>
                   <Box sx={{ color: isSelected ? "#000" : "" }}>
-                    {tab?.tab_name}
+                    {tab?.tab_value}
                   </Box>
                   <TableTabCount selected={isSelected}>
-                    {tab?.count == 0
+                    {tab?.tab_value_count == 0
                       ? "0"
-                      : String(tab?.count).padStart(2, "0")}
+                      : String(tab?.tab_value_count).padStart(2, "0")}
                   </TableTabCount>
                 </Box>
               }

package/src/listing/components/topbar/index.scss

@@ -34,13 +34,11 @@
         }
       }
       .ts--button {
-        margin-right: 0.6rem;
-        margin-top: 1rem;
         cursor: pointer;
       }
 
       .change-layout {
-        margin-top: 0.99rem;
+        margin-top: 0.4rem;
         cursor: pointer;
       }
 
@@ -54,7 +52,7 @@
       }
 
       .hide-column {
-        margin-top: 0.9rem;
+        margin-top: 0.8rem;
         position: relative;
 
         .ts-dropdown {

package/src/listing/components/topbar/index.tsx

@@ -5,9 +5,8 @@ import {
   FilterationIcon,
   HideColumnIcon,
 } from "../../../assets/svg.tsx";
-import { Popover } from "@mui/material";
+import { Box, Popover } from "@mui/material";
 import LayoutSelector from "../table-change-layout.tsx";
-import useOutsideClick from "../../libs/hooks/useOutsideClick.tsx";
 import { Table } from "@tanstack/react-table";
 import { TopbarOptionsProps } from "../../types/table.ts";
 import "./index.scss";
@@ -48,7 +47,6 @@ function Topbar<T>({
   const [sortAnchorEl, setSortAnchorEl] = useState<HTMLElement | null>(null);
   const [groupBy, setGroupBy] = useState<string>("None");
 
-  const [showColumnHiding, setShowColumnHiding] = useState(false);
   const [layoutAnchorEl, setLayoutAnchorEl] = useState<null | HTMLElement>(
     null
   );
@@ -60,10 +58,6 @@ function Topbar<T>({
     table.getAllLeafColumns().map((col) => col.id)
   );
 
-  const { setShowTableFilter } = tableStates;
-
-  // search
-  const [showSearchInput, setShowSearchInput] = useState(false);
   const searchContainerRef = useRef<HTMLDivElement>(null);
 
   // sync column order with table instance
@@ -78,7 +72,6 @@ function Topbar<T>({
       setSortAnchorEl(null);
       setColumnAnchorEl(null);
       setViewMoreAnchorEl(null);
-      setShowColumnHiding(false);
     }
   }, [isFullscreen]);
 
@@ -96,22 +89,11 @@ function Topbar<T>({
 
   const { container: fullscreenContainer } = useFullscreenPopoverContainer();
 
-  const dropdownRef = useRef<HTMLDivElement>(null);
-  useOutsideClick({
-    ref: dropdownRef,
-    handler: () => setShowColumnHiding(false),
-  });
-
   const handleLayoutSelect = (layout: string) => {
     setSelectedLayout(layout);
     setLayoutAnchorEl(null);
   };
 
-  useOutsideClick({
-    ref: searchContainerRef,
-    handler: () => setShowSearchInput(false),
-  });
-
   useEffect(() => {
     const handleExternalLayoutTrigger = (e: Event) => {
       const target = (e as CustomEvent).detail?.target as HTMLElement;
@@ -128,7 +110,6 @@ function Topbar<T>({
     };
 
     const handleExternalSearchTrigger = () => {
-      setShowSearchInput(true);
       setTimeout(() => {
         searchContainerRef.current?.querySelector("input")?.focus();
       }, 100);
@@ -180,96 +161,107 @@ function Topbar<T>({
         {rightSideComponent}
         {paginationComponent}
 
-        {showSearch && (
-          <div
-            title="Search"
-            className="external-search-trigger"
-            onClick={() => {
-              const customEvent = new CustomEvent("triggerSearchInput");
-              window.dispatchEvent(customEvent);
+        <Box
+          sx={{
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            gap: 0.5,
+          }}
+        >
+          {showSearch && (
+            <Box
+              title="Search"
+              className="external-search-trigger"
+              onClick={() => {
+                const customEvent = new CustomEvent("triggerSearchInput");
+                window.dispatchEvent(customEvent);
+              }}
+              ref={searchContainerRef}
+            >
+              <TableSearch
+                value={searchValue ?? ""}
+                onChange={onSearchChange ?? (() => {})}
+              />
+            </Box>
+          )}
+
+          {showChangeLayoutToggle && (
+            <>
+              <div className="change-layout ts--button" title="Layout">
+                <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,
             }}
-            ref={searchContainerRef}
           >
-            <TableSearch
-              value={searchValue ?? ""}
-              onChange={onSearchChange ?? (() => {})}
+            <LayoutSelector
+              onSelect={handleLayoutSelect}
+              selectedLayout={selectedLayout}
             />
-          </div>
-        )}
-
-        {showChangeLayoutToggle && (
-          <>
-            <div className="change-layout ts--button" title="Layout">
+          </Popover>
+          {showColumnToggle && (
+            <>
               <div
-                onClick={(e) => {
-                  const customEvent = new CustomEvent("triggerLayoutPopover", {
-                    detail: { target: e.currentTarget },
-                  });
-                  window.dispatchEvent(customEvent);
-                }}
-                className="external-layout-trigger"
+                className="hide-column ts--button"
+                onClick={(e) => setColumnAnchorEl(e.currentTarget)}
+                title="Column"
               >
-                <ChangeLayoutIcon />
+                <HideColumnIcon />
               </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>
-        {showColumnToggle && (
-          <>
-            <div
-              className="hide-column ts--button"
-              onClick={(e) => setColumnAnchorEl(e.currentTarget)}
-              title="Column"
-            >
-              <HideColumnIcon />
-            </div>
-            <ColumnToggle
-              anchorEl={columnAnchorEl}
-              onClose={() => setColumnAnchorEl(null)}
-              table={table}
-              columnOrder={columnOrder}
-              setColumnOrder={setColumnOrder}
-            />
-          </>
-        )}
+              <ColumnToggle
+                anchorEl={columnAnchorEl}
+                onClose={() => setColumnAnchorEl(null)}
+                table={table}
+                columnOrder={columnOrder}
+                setColumnOrder={setColumnOrder}
+              />
+            </>
+          )}
 
-        {showSortingToggle && (
-          <>
-            <div
-              className="filter ts--button"
-              title="Sort"
-              onClick={(e) => setSortAnchorEl(e.currentTarget)}
-            >
-              <SortingIcon />
-            </div>
-            <SortPopover
-              anchorEl={sortAnchorEl}
-              onClose={() => setSortAnchorEl(null)}
-              columns={table.getAllLeafColumns().map((col) => ({
-                id: col.id,
-                label: (col.columnDef.meta as any)?.label || col.id,
-              }))}
-              onChange={(sortingRules) => table.setSorting(sortingRules)}
-            />
-          </>
-        )}
+          {showSortingToggle && (
+            <>
+              <div
+                className="filter ts--button"
+                title="Sort"
+                onClick={(e) => setSortAnchorEl(e.currentTarget)}
+              >
+                <SortingIcon />
+              </div>
+              <SortPopover
+                anchorEl={sortAnchorEl}
+                onClose={() => setSortAnchorEl(null)}
+                columns={table.getAllLeafColumns().map((col) => ({
+                  id: col.id,
+                  label: (col.columnDef.meta as any)?.label || col.id,
+                }))}
+                onChange={(sortingRules) => table.setSorting(sortingRules)}
+              />
+            </>
+          )}
 
-        {/* {showFilterToggle && (
+          {/* {showFilterToggle && (
           <div
             className="filter ts--button"
             title="Filter"
@@ -298,51 +290,52 @@ function Topbar<T>({
           </div>
         )} */}
 
-        {showFilterToggle && (
-          <div
-            className="filter ts--button"
-            title="Filter"
-            onClick={onFilterButtonClick}
-            style={{
-              position: "relative",
-              display: "flex",
-              justifyContent: "center",
-              alignItems: "center",
-              backgroundColor:
-                tableStates.showTableFilter || tableStates.filters.length > 0
-                  ? "#eae4fe"
-                  : "transparent",
-              height: "25px",
-              width: "25px",
-              borderRadius: "6px",
-              cursor: "pointer",
-            }}
-          >
-            <FilterationIcon
-              color={
-                tableStates.showTableFilter || tableStates.filters.length > 0
-                  ? "#7A5AF8"
-                  : "#1C1B1F"
-              }
-            />
-
-            {tableStates.filters.length > 0 && !tableStates.showTableFilter && (
-              <span
-                style={{
-                  position: "absolute",
-                  top: "1px",
-                  right: "1px",
-                  width: "6px",
-                  height: "6px",
-                  borderRadius: "50%",
-                  backgroundColor: "#F63D68",
-                }}
+          {showFilterToggle && (
+            <div
+              className="filter ts--button"
+              title="Filter"
+              onClick={onFilterButtonClick}
+              style={{
+                position: "relative",
+                display: "flex",
+                justifyContent: "center",
+                alignItems: "center",
+                backgroundColor:
+                  tableStates.showTableFilter || tableStates.filters.length > 0
+                    ? "#eae4fe"
+                    : "transparent",
+                height: "25px",
+                width: "25px",
+                borderRadius: "6px",
+                cursor: "pointer",
+              }}
+            >
+              <FilterationIcon
+                color={
+                  tableStates.showTableFilter || tableStates.filters.length > 0
+                    ? "#7A5AF8"
+                    : "#1C1B1F"
+                }
               />
-            )}
-          </div>
-        )}
 
-        {/* {viewMoreToggle && (
+              {tableStates.filters.length > 0 &&
+                !tableStates.showTableFilter && (
+                  <span
+                    style={{
+                      position: "absolute",
+                      top: "1px",
+                      right: "1px",
+                      width: "6px",
+                      height: "6px",
+                      borderRadius: "50%",
+                      backgroundColor: "#F63D68",
+                    }}
+                  />
+                )}
+            </div>
+          )}
+
+          {/* {viewMoreToggle && (
           <div className="view-more ts--button" title="View More">
             <ViewMore
               compactMode={isCompactTable}
@@ -357,7 +350,7 @@ function Topbar<T>({
             />
           </div>
         )} */}
-        {/* {viewMoreToggle && (
+          {/* {viewMoreToggle && (
           <div
             className="view-more ts--button view-more-trigger"
             title="View More"
@@ -375,36 +368,37 @@ function Topbar<T>({
             />
           </div>
         )} */}
-        <Popover
-          open={isViewMoreOpen}
-          anchorEl={viewMoreAnchorEl}
-          onClose={() => setViewMoreAnchorEl(null)}
-          anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
-          transformOrigin={{ vertical: "top", horizontal: "left" }}
-          container={fullscreenContainer}
-          // 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}
+          <Popover
+            open={isViewMoreOpen}
+            anchorEl={viewMoreAnchorEl}
             onClose={() => setViewMoreAnchorEl(null)}
-          />
-        </Popover>
+            anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
+            transformOrigin={{ vertical: "top", horizontal: "left" }}
+            container={fullscreenContainer}
+            // 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>
+        </Box>
       </div>
     </div>
   );

package/src/view/ListingView.tsx

@@ -518,13 +518,13 @@ function ListingView() {
         ),
         searchValue: searchTerm,
         onSearchChange: (val) => setSearchTerm(val),
-        showFilterToggle: false,
+        showFilterToggle: true,
         onFilterButtonClick: () =>
           tableStates.setShowTableFilter(!tableStates.showTableFilter),
-        showColumnToggle: false,
-        showSearch: false,
-        showChangeLayoutToggle: false,
-        showSortingToggle: false,
+        // showColumnToggle: false,
+        // showSearch: false,
+        // showChangeLayoutToggle: false,
+        // showSortingToggle: false,
         // viewMoreToggle: true,
         // showCompactTableToggle: false,
       }}