playbook_ui 14.16.0.pre.alpha.PBNTR881advancedtablefullscreen6929 → 14.16.0.pre.alpha.PBNTR881advancedtablefullscreen6934

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 5a8fbad59b6bcf213da8999442155913c3562e141c07d59a2b726122fb3b7644
-  data.tar.gz: cb01f14fa0d0b7bbfa98f7c8ebacea874e45e1dc307008bf523ae3a3b29976a4
+  metadata.gz: 7e6ae8dabe0a1aa24faea68ee263457d677481e8fb49058ef3bf98cb34d13509
+  data.tar.gz: aea28cf93c519443b913371efb9f7e36399b55ead106a9914698077d78df686f
 SHA512:
-  metadata.gz: d6c879326332cde7cb15cc39915c01b998ba6ed799d088baa3222d7d66d0e87d63c85924203473cd35527e97a16139b62e1029be7b6b3f3e0b4c4399e97ac6d6
-  data.tar.gz: c9a5f2bdfa46a82adce264fbcf347562a8387d0c88a74174e502ec1f02826f3ca4f57ce0f3f78828b627bb2e8cbd5b7b926217ef65e41745790feb8e571bb1be
+  metadata.gz: da72830c3590d1df9419ecb3d6310ef1513b16186c5bb12fcd42fdb6bca29b293c10f422ca18e618587f384bd618fe3b1487e7b90f8b7d8eaf1960f880a380ab
+  data.tar.gz: d75d70f4ae579220897598329343fa90978182a202efa1c29e46ccf51cdafc9b70a7b08624a89c5cda1b5a729519b5a58b9e2ca340136b87188079d0dea54f22

data/app/pb_kits/playbook/pb_advanced_table/Utilities/types.ts

@@ -3,15 +3,4 @@ import { ExpandedState } from "@tanstack/react-table"
 export type ExpandedStateObject = Extract<
   ExpandedState,
   Record<string, boolean>
->
-
-declare global {
-  interface Document {
-    webkitExitFullscreen?: () => Promise<void>
-    msExitFullscreen?: () => Promise<void>
-    webkitRequestFullscreen?: () => Promise<void>
-    msRequestFullscreen?: () => Promise<void>
-    webkitFullscreenElement?: Element | null
-    msFullscreenElement?: Element | null
-  }
-}
+>

data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss

@@ -232,10 +232,14 @@
   }
   
   // Fullscreen
+  &.advanced-table-allow-fullscreen {
+    transition: all 0.3s ease;
+  }
+  
   &.advanced-table-fullscreen {
     background-color: $border_light;
     box-sizing: border-box;
-    height: 100%;
+    height: 100vh;
     left: 0;
     overflow: auto;
     position: fixed;

data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx

@@ -162,73 +162,15 @@ const AdvancedTable = (props: AdvancedTableProps) => {
   // Fullscreen
   const [isFullscreen, setIsFullscreen] = useState(false)
 
-  const enterFullscreen = useCallback(async () => {
-    const element = tableWrapperRef.current
-    if (!element) return
-
-    try {
-      if (element.requestFullscreen) {
-        await element.requestFullscreen()
-      } else if ((element as any).webkitRequestFullscreen) {
-        await (element as any).webkitRequestFullscreen()
-      } else if ((element as any).msRequestFullscreen) {
-        await (element as any).msRequestFullscreen()
-      }
-    } catch (error) {
-      console.error('Error attempting to enable fullscreen:', error)
-    }
-  }, [])
-
-  const exitFullscreen = useCallback(async () => {
-    try {
-      if (document.exitFullscreen) {
-        await document.exitFullscreen()
-      } else if ((document as any).webkitExitFullscreen) {
-        await (document as any).webkitExitFullscreen()
-      } else if ((document as any).msExitFullscreen) {
-        await (document as any).msExitFullscreen()
-      }
-    } catch (error) {
-      console.error('Error exiting fullscreen:', error)
-    }
-  }, [])
-
   const toggleFullscreen = useCallback(() => {
-    if (isFullscreen) {
-      exitFullscreen()
-    } else {
-      enterFullscreen()
-    }
-  }, [isFullscreen, enterFullscreen, exitFullscreen])
-
-  const handleFullscreenChange = useCallback(() => {
-    const isCurrentlyFullscreen = !!(
-      document.fullscreenElement ||
-      (document as any).webkitFullscreenElement ||
-      (document as any).msFullscreenElement
-    )
-    setIsFullscreen(isCurrentlyFullscreen)
+    setIsFullscreen(prevState => !prevState)
   }, [])
 
   useEffect(() => {
-    if (!allowFullScreen) return
-
-    document.addEventListener('fullscreenchange', handleFullscreenChange)
-    document.addEventListener('webkitfullscreenchange', handleFullscreenChange)
-    document.addEventListener('msfullscreenchange', handleFullscreenChange)
-
-    return () => {
-      document.removeEventListener('fullscreenchange', handleFullscreenChange)
-      document.removeEventListener('webkitfullscreenchange', handleFullscreenChange)
-      document.removeEventListener('msfullscreenchange', handleFullscreenChange)
-    }
-  }, [allowFullScreen, handleFullscreenChange])
-
-  useEffect(() => {
-    if (fullScreenControl && allowFullScreen) {
-      fullScreenControl({ 
-        toggleFullscreen, 
-        isFullscreen 
+    if (allowFullScreen && fullScreenControl) {
+      fullScreenControl({
+        toggleFullscreen,
+        isFullscreen
       })
     }
   }, [allowFullScreen, fullScreenControl, toggleFullscreen, isFullscreen])
@@ -264,6 +206,20 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     )
   }
 
+  useEffect(() => {
+    if (!allowFullScreen) return
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape' && isFullscreen) {
+        event.preventDefault()
+        toggleFullscreen()
+      }
+    }
+    document.addEventListener('keydown', handleKeyDown)
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown)
+    }
+  }, [allowFullScreen, toggleFullscreen, isFullscreen])
 
   // Build CSS classes and props
   const ariaProps = buildAriaProps(aria);