rez-table-listing-mui 1.3.16 → 1.3.17

package/package.json

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

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/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,