From 877f9dd04ba4598a45d644ca6e80d90ea5220f69 Mon Sep 17 00:00:00 2001
From: pinocchio-life-like <icbr19fl@gmail.com>
Date: Sun, 29 Dec 2024 01:29:40 +0300
Subject: [PATCH] ui directory

---
 packages/ui/src/FullScreen/FullScreen.tsx     |  2 +-
 .../ui/src/FullScreen/useWebFullScreen.ts     | 24 +++++++++----------
 .../ItemPickerOverlay/ItemPickerOverlay.tsx   |  2 +-
 packages/ui/src/RContextMenu/index.tsx        | 13 ++++++----
 packages/ui/src/RDropdown/DropdownBase.tsx    | 10 +++++++-
 packages/ui/src/ZDropdown/index.tsx           | 10 +++++++-
 6 files changed, 41 insertions(+), 20 deletions(-)

diff --git a/packages/ui/src/FullScreen/FullScreen.tsx b/packages/ui/src/FullScreen/FullScreen.tsx
index 027d43663..7d1e3baef 100644
--- a/packages/ui/src/FullScreen/FullScreen.tsx
+++ b/packages/ui/src/FullScreen/FullScreen.tsx
@@ -32,7 +32,7 @@ export const FullScreen: FC<FullScreenProps> = ({
 
   return (
     <View
-      ref={Platform.OS === 'web' ? webFullScreen.elementRef : null}
+      ref={Platform.OS === 'web' ? (webFullScreen.elementRef as any) : null}
       style={isFullScreen ? styles.fullScreen : defaultStyles}
     >
       {children}
diff --git a/packages/ui/src/FullScreen/useWebFullScreen.ts b/packages/ui/src/FullScreen/useWebFullScreen.ts
index 4d3f6e4f6..e509035f2 100644
--- a/packages/ui/src/FullScreen/useWebFullScreen.ts
+++ b/packages/ui/src/FullScreen/useWebFullScreen.ts
@@ -7,24 +7,24 @@ export const useWebFullScreen = () => {
     const element = elementRef.current;
     if (element && element.requestFullscreen) {
       element.requestFullscreen();
-    } else if (element && element.webkitRequestFullscreen) {
-      element.webkitRequestFullscreen();
-    } else if (element && element.mozRequestFullScreen) {
-      element.mozRequestFullScreen();
-    } else if (element && element.msRequestFullscreen) {
-      element.msRequestFullscreen();
+    } else if (element && (element as any).webkitRequestFullscreen) {
+      (element as any).webkitRequestFullscreen();
+    } else if (element && (element as any).mozRequestFullScreen) {
+      (element as any).mozRequestFullScreen();
+    } else if (element && (element as any).msRequestFullscreen) {
+      (element as any).msRequestFullscreen();
     }
   };
 
   const exitFullScreen = () => {
     if (document.fullscreenElement) {
       document.exitFullscreen();
-    } else if (document.webkitExitFullscreen) {
-      document.webkitExitFullscreen();
-    } else if (document.mozCancelFullScreen) {
-      document.mozCancelFullScreen();
-    } else if (document.msExitFullscreen) {
-      document.msExitFullscreen();
+    } else if ((document as any).webkitExitFullscreen) {
+      (document as any).webkitExitFullscreen();
+    } else if ((document as any).mozCancelFullScreen) {
+      (document as any).mozCancelFullScreen();
+    } else if ((document as any).msExitFullscreen) {
+      (document as any).msExitFullscreen();
     }
   };
 
diff --git a/packages/ui/src/ItemPickerOverlay/ItemPickerOverlay.tsx b/packages/ui/src/ItemPickerOverlay/ItemPickerOverlay.tsx
index d04878899..ccaa30592 100644
--- a/packages/ui/src/ItemPickerOverlay/ItemPickerOverlay.tsx
+++ b/packages/ui/src/ItemPickerOverlay/ItemPickerOverlay.tsx
@@ -57,7 +57,7 @@ export const ItemPickerOverlay: FC<ItemPickerOverlayProps> = ({
       >
         <Form defaultValues={{ search: searchTerm }}>
           <FormInput
-            onChange={(e) => onSearchChange(e.target.value)}
+            onChange={(e) => onSearchChange((e.target as any).value)}
             autoFocus
             style={{ marginBottom: 16 }}
             name="search"
diff --git a/packages/ui/src/RContextMenu/index.tsx b/packages/ui/src/RContextMenu/index.tsx
index 6ab9314a3..a7aa17d1e 100644
--- a/packages/ui/src/RContextMenu/index.tsx
+++ b/packages/ui/src/RContextMenu/index.tsx
@@ -6,9 +6,9 @@ import RText from '../RText';
 type ContentProps = ComponentProps<(typeof ZeegoContextMenu)['Content']>;
 type ItemProps = ComponentProps<(typeof ZeegoContextMenu)['Item']>;
 
-interface MenuItems{
-  label: string,
-  onSelect: () => void,
+interface MenuItems {
+  label: string;
+  onSelect: () => void;
 }
 
 const ContextMenu = {
@@ -57,7 +57,12 @@ const RContextMenu = ({ menuItems = [], menuName }) => {
       <ContextMenu.Trigger>
         <RButton>{menuName}</RButton>
       </ContextMenu.Trigger>
-      <ContextMenu.Content>
+      <ContextMenu.Content
+        alignOffset={0}
+        loop
+        avoidCollisions
+        collisionPadding={5}
+      >
         {menuItems.map(({ label, onSelect = () => {} }) => (
           <ContextMenu.Item key={label} onSelect={onSelect}>
             <ContextMenu.ItemTitle>{label}</ContextMenu.ItemTitle>
diff --git a/packages/ui/src/RDropdown/DropdownBase.tsx b/packages/ui/src/RDropdown/DropdownBase.tsx
index 1d96e6afc..331abf7c1 100644
--- a/packages/ui/src/RDropdown/DropdownBase.tsx
+++ b/packages/ui/src/RDropdown/DropdownBase.tsx
@@ -64,7 +64,15 @@ const ExampleDropdown = () => {
       <DropdownMenu.Trigger>
         <RButton>Open Dropdown</RButton>
       </DropdownMenu.Trigger>
-      <DropdownMenu.Content>
+      <DropdownMenu.Content
+        side="bottom"
+        align="start"
+        sideOffset={5}
+        alignOffset={0}
+        loop
+        avoidCollisions
+        collisionPadding={5}
+      >
         <DropdownMenu.Item key="1">Item 1</DropdownMenu.Item>
         <DropdownMenu.Item key="2">Item 2</DropdownMenu.Item>
         <DropdownMenu.Item key="3">Item 3</DropdownMenu.Item>
diff --git a/packages/ui/src/ZDropdown/index.tsx b/packages/ui/src/ZDropdown/index.tsx
index 7b800a0c1..550270fe6 100644
--- a/packages/ui/src/ZDropdown/index.tsx
+++ b/packages/ui/src/ZDropdown/index.tsx
@@ -81,7 +81,15 @@ const RDropdownMenu = ({
           </Button>
         )}
       </DropdownMenu.Trigger>
-      <DropdownMenu.Content>
+      <DropdownMenu.Content
+        side="bottom"
+        align="start"
+        sideOffset={5}
+        alignOffset={0}
+        loop
+        avoidCollisions
+        collisionPadding={5}
+      >
         {menuItems.map(({ label, onSelect = () => {} }) => (
           <DropdownMenu.Item key={label} onSelect={onSelect}>
             <DropdownMenu.ItemTitle>{label}</DropdownMenu.ItemTitle>