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

package/dist/index.es.js

@@ -6,7 +6,7 @@ import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { useState, useEffect, Fragment as Fragment$1, createContext, useContext, useCallback, useRef, useMemo, forwardRef, isValidElement, useLayoutEffect } from 'react';
 import clsx from 'clsx';
 import { isPlatformSupported, loadTFLite, createRenderer } from '@stream-io/video-filters-web';
-import { useFloating, offset, shift, flip, size, autoUpdate, FloatingOverlay, FloatingPortal, useListItem, useListNavigation, useTypeahead, useClick, useDismiss, useRole, useInteractions, FloatingFocusManager, FloatingList, useHover } from '@floating-ui/react';
+import { useFloating, offset, shift, flip, size, autoUpdate, FloatingOverlay, FloatingPortal, arrow, FloatingArrow, useListItem, useListNavigation, useTypeahead, useClick, useDismiss, useRole, useInteractions, FloatingFocusManager, FloatingList, useHover } from '@floating-ui/react';
 import { Chart, CategoryScale, LinearScale, LineElement, PointElement } from 'chart.js';
 import { Line } from 'react-chartjs-2';
 
@@ -216,8 +216,8 @@ const RenderPipeline = (props) => {
     return null;
 };
 
-const useFloatingUIPreset = ({ placement, strategy, offset: offsetInPx = 10, }) => {
-    const { refs, x, y, update, elements: { domReference, floating }, } = useFloating({
+const useFloatingUIPreset = ({ middleware = [], placement, strategy, offset: offsetInPx = 10, }) => {
+    const { refs, x, y, update, elements: { domReference, floating }, context, } = useFloating({
         placement,
         strategy,
         middleware: [
@@ -232,6 +232,7 @@ const useFloatingUIPreset = ({ placement, strategy, offset: offsetInPx = 10, })
                     });
                 },
             }),
+            ...middleware,
         ],
     });
     // handle window resizing
@@ -241,7 +242,7 @@ const useFloatingUIPreset = ({ placement, strategy, offset: offsetInPx = 10, })
         const cleanup = autoUpdate(domReference, floating, update);
         return () => cleanup();
     }, [domReference, floating, update]);
-    return { refs, x, y, domReference, floating, strategy };
+    return { refs, x, y, domReference, floating, strategy, context };
 };
 
 /**
@@ -716,21 +717,22 @@ const LoadingIndicator = ({ className, type = 'spinner', text, tooltip, }) => {
 };
 
 const Tooltip = ({ children, referenceElement, tooltipClassName, tooltipPlacement = 'top', visible = false, }) => {
-    const { refs, x, y, strategy } = useFloatingUIPreset({
+    const arrowRef = useRef(null);
+    const { refs, x, y, strategy, context } = useFloatingUIPreset({
         placement: tooltipPlacement,
         strategy: 'absolute',
+        middleware: [arrow({ element: arrowRef })],
     });
     useEffect(() => {
         refs.setReference(referenceElement);
     }, [referenceElement, refs]);
     if (!visible)
         return null;
-    return (jsx("div", { className: clsx('str-video__tooltip', tooltipClassName), ref: refs.setFloating, style: {
+    return (jsxs("div", { className: clsx('str-video__tooltip', tooltipClassName), ref: refs.setFloating, style: {
             position: strategy,
             top: y ?? 0,
             left: x ?? 0,
-            overflowY: 'auto',
-        }, children: children }));
+        }, children: [jsx(FloatingArrow, { ref: arrowRef, context: context, fill: "var(--str-video__tooltip--background-color)" }), children] }));
 };
 
 const useEnterLeaveHandlers = ({ onMouseEnter, onMouseLeave, } = {}) => {
@@ -1165,9 +1167,9 @@ const EndCallMenu = (props) => {
     const { t } = useI18n();
     return (jsxs("div", { className: "str-video__end-call__confirmation", children: [jsxs("button", { className: "str-video__button str-video__end-call__leave", type: "button", "data-testid": "leave-call-button", onClick: onLeave, children: [jsx(Icon, { className: "str-video__button__icon str-video__end-call__leave-icon", icon: "logout" }), t('Leave call')] }), jsx(Restricted, { requiredGrants: [OwnCapability.END_CALL], children: jsxs("button", { className: "str-video__button str-video__end-call__end", type: "button", "data-testid": "end-call-for-all-button", onClick: onEnd, children: [jsx(Icon, { className: "str-video__button__icon str-video__end-call__end-icon", icon: "call-end" }), t('End call for all')] }) })] }));
 };
-const CancelCallToggleMenuButton = forwardRef(function CancelCallToggleMenuButton(props, ref) {
+const CancelCallToggleMenuButton = forwardRef(function CancelCallToggleMenuButton({ menuShown }, ref) {
     const { t } = useI18n();
-    return (jsx(WithTooltip, { title: t('Leave call'), children: jsx(IconButton, { icon: "call-end", variant: "danger", "data-testid": "leave-call-button", ref: ref }) }));
+    return (jsx(WithTooltip, { title: t('Leave call'), tooltipDisabled: menuShown, children: jsx(IconButton, { icon: menuShown ? 'close' : 'call-end', variant: menuShown ? 'active' : 'danger', "data-testid": "leave-call-button", ref: ref }) }));
 });
 const CancelCallConfirmButton = ({ onClick, onLeave, }) => {
     const call = useCall();
@@ -2567,7 +2569,7 @@ const VerticalScrollButtons = ({ scrollWrapper, }) => {
     return (jsxs(Fragment, { children: [scrollPosition && scrollPosition !== 'top' && (jsx(IconButton, { onClick: scrollTopClickHandler, icon: "caret-up", className: "str-video__speaker-layout__participants-bar--button-top" })), scrollPosition && scrollPosition !== 'bottom' && (jsx(IconButton, { onClick: scrollBottomClickHandler, icon: "caret-down", className: "str-video__speaker-layout__participants-bar--button-bottom" }))] }));
 };
 
-const [major, minor, patch] = ("1.0.8" ).split('.');
+const [major, minor, patch] = ("1.0.10" ).split('.');
 setSdkInfo({
     type: SfuModels.SdkType.REACT,
     major,