feat: replace ngx-popperjs with ngx-float-ui

Author: szuperaz

package-lock.json

@@ -117,15 +117,15 @@
     "@angular/platform-browser-dynamic": "~15.0.0",
     "@angular/router": "~15.0.0",
     "@ctrl/ngx-emoji-mart": "^8.2.0",
+    "@floating-ui/dom": "^1.6.3",
     "@ngx-translate/core": "^14.0.0",
-    "@popperjs/core": "^2.11.5",
-    "@stream-io/stream-chat-css": "4.11.0",
+    "@stream-io/stream-chat-css": "4.12.0",
     "@stream-io/transliterate": "^1.5.2",
     "angular-mentions": "1.4.0",
     "dayjs": "^1.11.10",
     "dotenv": "^16.4.5",
     "emoji-regex": "^10.3.0",
-    "ngx-popperjs": "^15.2.4",
+    "ngx-float-ui": "^15.0.0",
     "pretty-bytes": "^6.1.1",
     "rxjs": "~7.4.0",
     "stream-chat": "^8.25.1",

package.json

@@ -16,7 +16,6 @@ import {
 import { ReactionResponse, UserResponse } from 'stream-chat';
 import { ChannelService } from '../channel.service';
 import { MessageReactionType, DefaultStreamChatGenerics } from '../types';
-import { NgxPopperjsTriggers, NgxPopperjsPlacements } from 'ngx-popperjs';
 import { MessageReactionsService } from '../message-reactions.service';
 import { CustomTemplatesService } from '../custom-templates.service';
 import { ThemeService } from '../theme.service';
@@ -66,8 +65,6 @@ export class MessageReactionsComponent
     | ElementRef<HTMLElement>
     | undefined;
   currentTooltipTarget: HTMLElement | undefined;
-  popperTriggerHover = NgxPopperjsTriggers.hover;
-  popperPlacementAuto = NgxPopperjsPlacements.AUTO;
   selectedReactionType: string | undefined;
   isLoading = true;
   reactions: ReactionResponse[] = [];

projects/stream-chat-angular/src/lib/message-reactions/message-reactions.component.ts

@@ -47,16 +47,15 @@
               str-chat__message-simple__actions__action
               str-chat__message-simple__actions__action--options
             "
-            [popper]="popperContent"
-            [popperTrigger]="popperTriggerClick"
-            [popperPlacement]="popperPlacementAuto"
-            [popperHideOnScroll]="false"
-            [popperHideOnClickOutside]="true"
-            [popperHideOnMouseLeave]="false"
-            [popperDisableAnimation]="true"
-            (popperOnHidden)="isActionBoxOpen = false"
+            [floatUi]="floatingContent"
+            looseTrigger="click"
+            [hideOnScroll]="false"
+            [hideOnClickOutside]="true"
+            [hideOnMouseLeave]="false"
+            [disableAnimation]="true"
+            (onHidden)="isActionBoxOpen = false"
           >
-            <popper-content #popperContent>
+            <float-ui-content #floatingContent>
               <ng-template
                 #defaultMessageActionsBox
                 let-isOpen="isOpen"
@@ -72,7 +71,7 @@
                   [enabledActions]="enabledActions"
                   [customActions]="customActions"
                   [message]="messageInput"
-                  (click)="messageActionsBoxClicked(popperContent)"
+                  (click)="messageActionsBoxClicked(floatingContent)"
                 ></stream-message-actions-box>
               </ng-template>
               <ng-container
@@ -83,7 +82,7 @@
                 "
               >
               </ng-container>
-            </popper-content>
+            </float-ui-content>
             <div
               *ngIf="visibleMessageActionsCount > 0"
               class="str-chat__message-actions-box-button"
@@ -540,18 +539,17 @@
         "
         data-testid="delivered-indicator"
         tabindex="0"
-        [popper]="popperContent"
-        [popperTrigger]="popperTriggerHover"
-        [popperPlacement]="popperPlacementAuto"
-        [popperHideOnScroll]="false"
-        [popperHideOnClickOutside]="false"
+        [floatUi]="floatingContent"
+        looseTrigger="click"
+        [hideOnScroll]="false"
+        [hideOnClickOutside]="false"
         (hover)="$event.stopPropagation()"
       >
-        <popper-content #popperContent>
+        <float-ui-content #floatingContent>
           <div class="str-chat__tooltip str-chat__tooltip-angular">
             {{ "streamChat.Delivered" | translate }}
           </div>
-        </popper-content>
+        </float-ui-content>
         <stream-icon-placeholder
           data-testid="delivered-icon"
           icon="delivered-icon"
@@ -576,18 +574,17 @@
         "
         data-testid="sending-indicator"
         tabindex="0"
-        [popper]="popperContent"
-        [popperTrigger]="popperTriggerHover"
-        [popperPlacement]="popperPlacementAuto"
-        [popperHideOnScroll]="false"
-        [popperHideOnClickOutside]="false"
+        [floatUi]="floatingContent"
+        looseTrigger="'hover'"
+        [hideOnScroll]="false"
+        [hideOnClickOutside]="false"
         (hover)="$event.stopPropagation()"
       >
-        <popper-content #popperContent>
+        <float-ui-content #floatingContent>
           <div class="str-chat__tooltip str-chat__tooltip-angular">
             {{ "streamChat.Sending..." | translate }}
           </div>
-        </popper-content>
+        </float-ui-content>
         <stream-loading-indicator-placeholder
           data-testid="loading-indicator"
         ></stream-loading-indicator-placeholder>
@@ -611,21 +608,20 @@
         "
         data-testid="read-indicator"
         tabindex="0"
-        [popper]="popperContent"
-        [popperTrigger]="popperTriggerHover"
-        [popperPlacement]="popperPlacementAuto"
-        [popperHideOnScroll]="false"
-        [popperHideOnClickOutside]="false"
+        [floatUi]="floatingContent"
+        looseTrigger="'hover'"
+        [hideOnScroll]="false"
+        [hideOnClickOutside]="false"
         (hover)="$event.stopPropagation()"
       >
-        <popper-content #popperContent>
+        <float-ui-content #floatingContent>
           <div
             class="str-chat__tooltip str-chat__tooltip-angular"
             data-testid="read-by-tooltip"
           >
             {{ readByText }}
           </div>
-        </popper-content>
+        </float-ui-content>
         <stream-icon-placeholder icon="read-icon"></stream-icon-placeholder>
       </span>
     </ng-template>

projects/stream-chat-angular/src/lib/message/message.component.html

@@ -34,14 +34,10 @@ import { Subscription } from 'rxjs';
 import { CustomTemplatesService } from '../custom-templates.service';
 import { listUsers } from '../list-users';
 import { ThemeService } from '../theme.service';
-import {
-  NgxPopperjsTriggers,
-  NgxPopperjsPlacements,
-  NgxPopperjsContentComponent,
-} from 'ngx-popperjs';
 import { DateParserService } from '../date-parser.service';
 import { MessageService } from '../message.service';
 import { MessageActionsService } from '../message-actions.service';
+import { NgxFloatUiContentComponent } from 'ngx-float-ui';
 
 type MessagePart = {
   content: string;
@@ -95,9 +91,6 @@ export class MessageComponent
   visibleMessageActionsCount = 0;
   messageTextParts: MessagePart[] | undefined = [];
   messageText?: string;
-  popperTriggerClick = NgxPopperjsTriggers.click;
-  popperTriggerHover = NgxPopperjsTriggers.hover;
-  popperPlacementAuto = NgxPopperjsPlacements.AUTO;
   shouldDisplayTranslationNotice = false;
   displayedMessageTextContent: 'original' | 'translation' = 'original';
   imageAttachmentModalState: 'opened' | 'closed' = 'closed';
@@ -276,8 +269,8 @@ export class MessageComponent
     }
   }
 
-  messageActionsBoxClicked(popperContent: NgxPopperjsContentComponent) {
-    popperContent.hide();
+  messageActionsBoxClicked(floatingContent: NgxFloatUiContentComponent) {
+    floatingContent.hide();
   }
 
   getAttachmentListContext(): AttachmentListContext {