@stream-io/video-react-sdk 1.0.8 → 1.0.10

package/dist/src/hooks/useFloatingUIPreset.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
-import type { UseFloatingData } from '@floating-ui/react';
+import type { UseFloatingOptions } from '@floating-ui/react';
 import { offset } from '@floating-ui/react';
-export declare const useFloatingUIPreset: ({ placement, strategy, offset: offsetInPx, }: Pick<UseFloatingData, 'placement' | 'strategy'> & {
+export declare const useFloatingUIPreset: ({ middleware, placement, strategy, offset: offsetInPx, }: Pick<UseFloatingOptions, 'placement' | 'strategy' | 'middleware'> & {
     offset?: number;
 }) => {
     refs: {
@@ -14,5 +14,23 @@ export declare const useFloatingUIPreset: ({ placement, strategy, offset: offset
     y: number;
     domReference: Element | null;
     floating: HTMLElement | null;
-    strategy: import("@floating-ui/utils").Strategy;
+    strategy: import("@floating-ui/utils").Strategy | undefined;
+    context: {
+        x: number;
+        y: number;
+        placement: import("@floating-ui/utils").Placement;
+        strategy: import("@floating-ui/utils").Strategy;
+        middlewareData: import("@floating-ui/core").MiddlewareData;
+        isPositioned: boolean;
+        update: () => void;
+        floatingStyles: import("react").CSSProperties;
+        open: boolean;
+        onOpenChange: (open: boolean, event?: Event | undefined, reason?: import("@floating-ui/react").OpenChangeReason | undefined) => void;
+        events: import("@floating-ui/react").FloatingEvents;
+        dataRef: import("react").MutableRefObject<import("@floating-ui/react").ContextData>;
+        nodeId: string | undefined;
+        floatingId: string;
+        refs: import("@floating-ui/react").ExtendedRefs<import("@floating-ui/react").ReferenceType>;
+        elements: import("@floating-ui/react").ExtendedElements<import("@floating-ui/react").ReferenceType>;
+    };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stream-io/video-react-sdk",
-  "version": "1.0.8",
+  "version": "1.0.10",
   "packageManager": "yarn@3.2.4",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.es.js",
@@ -29,9 +29,9 @@
   ],
   "dependencies": {
     "@floating-ui/react": "^0.26.5",
-    "@stream-io/video-client": "1.0.6",
+    "@stream-io/video-client": "1.0.7",
     "@stream-io/video-filters-web": "0.1.0",
-    "@stream-io/video-react-bindings": "0.4.32",
+    "@stream-io/video-react-bindings": "0.4.33",
     "chart.js": "^4.4.1",
     "clsx": "^2.0.0",
     "react-chartjs-2": "^5.2.0"
@@ -45,7 +45,7 @@
     "@rollup/plugin-replace": "^5.0.5",
     "@rollup/plugin-typescript": "^11.1.6",
     "@stream-io/audio-filters-web": "^0.1.0",
-    "@stream-io/video-styling": "^1.0.3",
+    "@stream-io/video-styling": "^1.0.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "rimraf": "^5.0.5",

package/src/components/CallControls/CancelCallButton.tsx

@@ -49,13 +49,13 @@ const EndCallMenu = (props: {
 const CancelCallToggleMenuButton = forwardRef<
   HTMLButtonElement,
   ToggleMenuButtonProps
->(function CancelCallToggleMenuButton(props, ref) {
+>(function CancelCallToggleMenuButton({ menuShown }, ref) {
   const { t } = useI18n();
   return (
-    <WithTooltip title={t('Leave call')}>
+    <WithTooltip title={t('Leave call')} tooltipDisabled={menuShown}>
       <IconButton
-        icon="call-end"
-        variant="danger"
+        icon={menuShown ? 'close' : 'call-end'}
+        variant={menuShown ? 'active' : 'danger'}
         data-testid="leave-call-button"
         ref={ref}
       />

package/src/components/Tooltip/Tooltip.tsx

@@ -1,7 +1,7 @@
-import { PropsWithChildren, useEffect } from 'react';
+import { PropsWithChildren, useEffect, useRef } from 'react';
 import clsx from 'clsx';
 import { useFloatingUIPreset } from '../../hooks';
-import { Placement } from '@floating-ui/react';
+import { FloatingArrow, Placement, arrow } from '@floating-ui/react';
 
 export type TooltipProps<T extends HTMLElement> = PropsWithChildren<{
   /** Reference element to which the tooltip should attach to */
@@ -23,9 +23,11 @@ export const Tooltip = <T extends HTMLElement>({
   tooltipPlacement = 'top',
   visible = false,
 }: TooltipProps<T>) => {
-  const { refs, x, y, strategy } = useFloatingUIPreset({
+  const arrowRef = useRef<SVGSVGElement>(null);
+  const { refs, x, y, strategy, context } = useFloatingUIPreset({
     placement: tooltipPlacement,
     strategy: 'absolute',
+    middleware: [arrow({ element: arrowRef })],
   });
 
   useEffect(() => {
@@ -42,9 +44,13 @@ export const Tooltip = <T extends HTMLElement>({
         position: strategy,
         top: y ?? 0,
         left: x ?? 0,
-        overflowY: 'auto',
       }}
     >
+      <FloatingArrow
+        ref={arrowRef}
+        context={context}
+        fill="var(--str-video__tooltip--background-color)"
+      />
       {children}
     </div>
   );

package/src/hooks/useFloatingUIPreset.ts

@@ -1,5 +1,5 @@
 import { useEffect } from 'react';
-import type { UseFloatingData } from '@floating-ui/react';
+import type { UseFloatingOptions } from '@floating-ui/react';
 import {
   autoUpdate,
   flip,
@@ -10,16 +10,20 @@ import {
 } from '@floating-ui/react';
 
 export const useFloatingUIPreset = ({
+  middleware = [],
   placement,
   strategy,
   offset: offsetInPx = 10,
-}: Pick<UseFloatingData, 'placement' | 'strategy'> & { offset?: number }) => {
+}: Pick<UseFloatingOptions, 'placement' | 'strategy' | 'middleware'> & {
+  offset?: number;
+}) => {
   const {
     refs,
     x,
     y,
     update,
     elements: { domReference, floating },
+    context,
   } = useFloating({
     placement,
     strategy,
@@ -35,6 +39,7 @@ export const useFloatingUIPreset = ({
           });
         },
       }),
+      ...middleware,
     ],
   });
 
@@ -47,5 +52,5 @@ export const useFloatingUIPreset = ({
     return () => cleanup();
   }, [domReference, floating, update]);
 
-  return { refs, x, y, domReference, floating, strategy };
+  return { refs, x, y, domReference, floating, strategy, context };
 };