rez-table-listing-mui 1.3.15 → 1.3.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rez-table-listing-mui",
-  "version": "1.3.15",
+  "version": "1.3.17",
   "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

@@ -49,9 +49,16 @@ const FilterCriteria = ({
   } = tableStates;
 
   const filterButtonRef = useRef<HTMLButtonElement>(null);
-
   const filterButtonWidth = useElementWidth(filterButtonRef);
 
+  const isSingleEntity = filterComponentOptions?.tabOptions?.isSingleEntity;
+  // 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]);
+
   const handleAddFilter = (
     attribute: FilterDataMainFilterEntityWiseCriteriaProps
   ) => {
@@ -94,20 +101,16 @@ const FilterCriteria = ({
     onChangeFunction && onChangeFunction(newState);
 
     setShowFilterOption(false);
-    setSelectedFilterEntity(undefined);
+
+    if (!isSingleEntity) {
+      setSelectedFilterEntity(undefined);
+    }
   };
 
   const toggleFilterOptions = () => {
     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

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

@@ -67,7 +67,9 @@ const FilterCriteriaList = ({
         {shouldShowCloseButton && (
           <IconButton
             size="small"
-            onClick={() => setSelectedFilterEntity(undefined)}
+            onClick={() =>
+              !isSingleEntity && setSelectedFilterEntity(undefined)
+            }
           >
             <CloseIcon />
           </IconButton>

package/src/listing/components/index.scss

@@ -210,3 +210,28 @@
     }
   }
 }
+// Full screen styles fixes
+
+:fullscreen {
+  width: 100vw !important;
+  height: 100vh !important;
+  display: flex !important;
+  flex-direction: column !important;
+  background: var(--white);
+  overflow: hidden;
+}
+
+:-webkit-full-screen {
+  width: 100vw !important;
+  height: 100vh !important;
+  display: flex !important;
+  flex-direction: column !important;
+  background: var(--white);
+  overflow: hidden;
+}
+
+// .ts__table__wrapper.is-fullscreen {
+//   height: calc(100vh - 56px);
+//   max-height: none;
+//   overflow-y: auto;
+// }

package/src/listing/components/table-head-pin.tsx

@@ -7,7 +7,13 @@ function TableHeadPin<T>({ header }: TableHeaderProps<T>) {
       {/* <IconPinOutline /> */}
     </div>
   ) : (
-    <div className="ts--head--button" onClick={() => header.column.pin(false)}>
+    <div
+      className="ts--head--button"
+      onClick={(e) => {
+        e.stopPropagation();
+        header.column.pin(false);
+      }}
+    >
       <IconPinOffOutline />
     </div>
   );

package/src/listing/components/table-head-popover.tsx

@@ -15,6 +15,7 @@ import {
   IconPinOutline,
 } from "../../assets/svg";
 import { CraftTableOptionsProps } from "../types/table-options";
+import { useFullscreenPopoverContainer } from "../libs/hooks/useFullScreen";
 
 type Props<T> = {
   anchorEl: HTMLElement | null;
@@ -32,6 +33,7 @@ function TableHeadPopover<T>({
   const open = Boolean(anchorEl);
   const column = header.column;
   const isPinned = column.getIsPinned() === "left";
+  const { container: fullscreenContainer } = useFullscreenPopoverContainer();
 
   const { wrapColumns, setWrapColumns } = tableStates;
 
@@ -49,6 +51,7 @@ function TableHeadPopover<T>({
       anchorEl={anchorEl}
       onClose={onClose}
       anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
+      container={fullscreenContainer}
     >
       <List dense>
         <ListItemButton onClick={() => column.toggleSorting(false)}>

package/src/listing/components/table-settings/components/quick-tab.tsx

@@ -28,6 +28,7 @@ import {
 } from "../../../types/filter-settings";
 import { TabsStyles } from "../style";
 import InfoAlert from "../common/info-alert";
+import { useFullscreenPopoverContainer } from "../../../libs/hooks/useFullScreen";
 
 const QuickTab = ({
   filterSettingStates,
@@ -37,6 +38,7 @@ const QuickTab = ({
 }: SettingsQuickTabProps) => {
   const { settingsData, setSettingsData, saveButtonError, setSaveButtonError } =
     filterSettingStates;
+  const { container: fullscreenContainer } = useFullscreenPopoverContainer();
 
   const [searchTerm, setSearchTerm] = useState<string>("");
   const [currentQuickAttribute, setCurrentQuickAttribute] = useState<string>(
@@ -358,6 +360,7 @@ const QuickTab = ({
                         },
                       }))
                     }
+                    MenuProps={{ container: fullscreenContainer }}
                   >
                     {columnsData?.column_list
                       ?.filter((col) => col.datasource_list != null)
@@ -386,6 +389,7 @@ const QuickTab = ({
                         },
                       }))
                     }
+                    MenuProps={{ container: fullscreenContainer }}
                   >
                     {sortingOptions.map((option) => (
                       <MenuItem key={option?.value} value={option?.value}>

package/src/listing/components/table-settings/index.tsx

@@ -21,6 +21,7 @@ import { KANBAN_SETTINGS_TABS, SETTINGS_TABS } from "./constants";
 import Loader from "../common/loader/loader";
 import Lane from "./components/lane";
 import GroupBy from "./components/group-by";
+import { useFullscreenPopoverContainer } from "../../libs/hooks/useFullScreen";
 
 export function QuickFilterSettings({
   view = "listing",
@@ -34,6 +35,7 @@ export function QuickFilterSettings({
   onSaveSettingsData,
 }: QuickFilterModalProps) {
   const [tabValue, setTabValue] = useState(0);
+  const { container: fullscreenContainer } = useFullscreenPopoverContainer();
 
   const {
     showListViewSettings,
@@ -87,6 +89,7 @@ export function QuickFilterSettings({
       slots={{
         transition: DialogTransition,
       }}
+      container={fullscreenContainer}
     >
       <DialogTitle sx={dialogStyles.dialogTitle}>
         <Typography sx={{ fontSize: "1.125rem" }}>List View Setting</Typography>

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

@@ -71,6 +71,17 @@ function Topbar<T>({
     table.setColumnOrder(columnOrder);
   }, [columnOrder]);
 
+  useEffect(() => {
+    if (isFullscreen) {
+      // Close all popovers when fullscreen is enabled
+      setLayoutAnchorEl(null);
+      setSortAnchorEl(null);
+      setColumnAnchorEl(null);
+      setViewMoreAnchorEl(null);
+      setShowColumnHiding(false);
+    }
+  }, [isFullscreen]);
+
   const {
     leftSideComponent,
     rightSideComponent,
@@ -370,6 +381,7 @@ function Topbar<T>({
           onClose={() => setViewMoreAnchorEl(null)}
           anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
           transformOrigin={{ vertical: "top", horizontal: "left" }}
+          container={fullscreenContainer}
           // PaperProps={{
           //   sx: {
           //     mt: 2,