@stream-io/video-react-sdk 0.4.26 → 0.5.0

package/dist/src/components/Button/CompositeButton.d.ts

@@ -1,16 +1,14 @@
-import { ComponentType, PropsWithChildren } from 'react';
+import { ToggleMenuButtonProps } from '../Menu';
+import { ComponentProps, ComponentType, JSX, PropsWithChildren } from 'react';
 import { Placement } from '@floating-ui/react';
-export type IconButtonWithMenuProps = PropsWithChildren<{
+export type IconButtonWithMenuProps<E extends HTMLElement = HTMLButtonElement> = PropsWithChildren<{
     active?: boolean;
     Menu?: ComponentType | JSX.Element;
     caption?: string;
+    className?: string;
     menuPlacement?: Placement;
-}>;
-export declare const CompositeButton: import("react").ForwardRefExoticComponent<{
-    active?: boolean | undefined;
-    Menu?: JSX.Element | ComponentType | undefined;
-    caption?: string | undefined;
-    menuPlacement?: Placement | undefined;
-} & {
-    children?: import("react").ReactNode;
-} & import("react").RefAttributes<HTMLDivElement>>;
+    menuOffset?: number;
+    ToggleMenuButton?: ComponentType<ToggleMenuButtonProps<E>>;
+    variant?: 'primary' | 'secondary';
+}> & ComponentProps<'button'>;
+export declare const CompositeButton: import("react").ForwardRefExoticComponent<Omit<IconButtonWithMenuProps<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/src/components/Button/index.d.ts

@@ -1,4 +1,3 @@
 export * from './CompositeButton';
-export * from './CopyToClipboardButton';
 export * from './IconButton';
 export * from './TextButton';

package/dist/src/components/CallControls/CallStatsButton.d.ts

@@ -1 +1,4 @@
+export type CallStatsButtonProps = {
+    caption?: string;
+};
 export declare const CallStatsButton: () => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/CallControls/CancelCallButton.d.ts

@@ -4,4 +4,5 @@ export type CancelCallButtonProps = {
     onClick?: MouseEventHandler<HTMLButtonElement>;
     onLeave?: () => void;
 };
+export declare const CancelCallConfirmButton: ({ onClick, onLeave, }: CancelCallButtonProps) => import("react/jsx-runtime").JSX.Element;
 export declare const CancelCallButton: ({ disabled, onClick, onLeave, }: CancelCallButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/CallControls/ReactionsButton.d.ts

@@ -6,5 +6,6 @@ export interface ReactionsButtonProps {
 export declare const ReactionsButton: ({ reactions, }: ReactionsButtonProps) => import("react/jsx-runtime").JSX.Element;
 export interface DefaultReactionsMenuProps {
     reactions: StreamReaction[];
+    layout?: 'horizontal' | 'vertical';
 }
-export declare const DefaultReactionsMenu: ({ reactions, }: DefaultReactionsMenuProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DefaultReactionsMenu: ({ reactions, layout, }: DefaultReactionsMenuProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/CallControls/RecordCallButton.d.ts

@@ -1,4 +1,7 @@
 export type RecordCallButtonProps = {
     caption?: string;
 };
-export declare const RecordCallButton: ({ caption, }: RecordCallButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const RecordCallConfirmationButton: ({ caption, }: {
+    caption?: string | undefined;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const RecordCallButton: ({ caption }: RecordCallButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/CallControls/ToggleAudioButton.d.ts

@@ -1,11 +1,5 @@
-import { ComponentType } from 'react';
-export type ToggleAudioPreviewButtonProps = {
-    caption?: string;
-    Menu?: ComponentType;
-};
+import { IconButtonWithMenuProps } from '../Button';
+export type ToggleAudioPreviewButtonProps = Pick<IconButtonWithMenuProps, 'caption' | 'Menu' | 'menuPlacement'>;
 export declare const ToggleAudioPreviewButton: (props: ToggleAudioPreviewButtonProps) => import("react/jsx-runtime").JSX.Element;
-export type ToggleAudioPublishingButtonProps = {
-    caption?: string;
-    Menu?: ComponentType;
-};
+export type ToggleAudioPublishingButtonProps = Pick<IconButtonWithMenuProps, 'caption' | 'Menu' | 'menuPlacement'>;
 export declare const ToggleAudioPublishingButton: (props: ToggleAudioPublishingButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/CallControls/ToggleAudioOutputButton.d.ts

@@ -1,6 +1,3 @@
-import { ComponentType } from 'react';
-export type ToggleAudioOutputButtonProps = {
-    caption?: string;
-    Menu?: ComponentType;
-};
+import { IconButtonWithMenuProps } from '../Button';
+export type ToggleAudioOutputButtonProps = Pick<IconButtonWithMenuProps, 'caption' | 'Menu' | 'menuPlacement'>;
 export declare const ToggleAudioOutputButton: (props: ToggleAudioOutputButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/CallControls/ToggleVideoButton.d.ts

@@ -1,12 +1,6 @@
-import { ComponentType } from 'react';
-export type ToggleVideoPreviewButtonProps = {
-    caption?: string;
-    Menu?: ComponentType;
-};
+import { IconButtonWithMenuProps } from '../Button/';
+export type ToggleVideoPreviewButtonProps = Pick<IconButtonWithMenuProps, 'caption' | 'Menu' | 'menuPlacement'>;
 export declare const ToggleVideoPreviewButton: (props: ToggleVideoPreviewButtonProps) => import("react/jsx-runtime").JSX.Element;
-type ToggleVideoPublishingButtonProps = {
-    caption?: string;
-    Menu?: ComponentType;
-};
+type ToggleVideoPublishingButtonProps = Pick<IconButtonWithMenuProps, 'caption' | 'Menu' | 'menuPlacement'>;
 export declare const ToggleVideoPublishingButton: (props: ToggleVideoPublishingButtonProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/src/components/CallParticipantsList/CallParticipantListHeader.d.ts

@@ -1,5 +1,7 @@
 export type CallParticipantListHeaderProps = {
-    /** Click event listener function to be invoked in order to dismiss / hide the CallParticipantsList from the UI */
+    /**
+     * Click event listener function to be invoked to dismiss / hide the CallParticipantsList from the UI.
+     */
     onClose: () => void;
 };
 export declare const CallParticipantListHeader: ({ onClose, }: CallParticipantListHeaderProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/CallParticipantsList/CallParticipantListingItem.d.ts

@@ -9,9 +9,4 @@ type CallParticipantListingItemProps = {
     }>;
 };
 export declare const CallParticipantListingItem: ({ participant, DisplayName, }: CallParticipantListingItemProps) => import("react/jsx-runtime").JSX.Element;
-export declare const ParticipantActionsContextMenu: ({ participant, participantViewElement, videoElement, }: {
-    participant: StreamVideoParticipant;
-    participantViewElement?: HTMLDivElement | null | undefined;
-    videoElement?: HTMLVideoElement | null | undefined;
-}) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/src/components/CallStats/CallStats.d.ts

@@ -1,5 +1,28 @@
-export declare const CallStats: () => import("react/jsx-runtime").JSX.Element;
+import { ReactNode } from 'react';
+export declare enum Statuses {
+    GOOD = "Good",
+    OK = "Ok",
+    BAD = "Bad"
+}
+export type Status = Statuses.GOOD | Statuses.OK | Statuses.BAD;
+export declare const CallStats: (props: {
+    latencyLowBound?: number;
+    latencyHighBound?: number;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const StatCardExplanation: (props: {
+    description: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const StatsTag: ({ children, status, }: {
+    children: ReactNode;
+    status: Statuses.GOOD | Statuses.OK | Statuses.BAD;
+}) => import("react/jsx-runtime").JSX.Element;
 export declare const StatCard: (props: {
     label: string;
-    value: string;
+    value: string | ReactNode;
+    description?: string;
+    comparison?: {
+        value: number;
+        highBound: number;
+        lowBound: number;
+    };
 }) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/DeviceSettings/DeviceSelector.d.ts

@@ -1,6 +1,11 @@
+export type DeviceSelectorType = 'audioinput' | 'audiooutput' | 'videoinput';
 export declare const DeviceSelector: (props: {
     devices: MediaDeviceInfo[];
+    icon: string;
+    type: DeviceSelectorType;
     selectedDeviceId?: string | undefined;
-    title: string;
+    title?: string | undefined;
     onChange?: ((deviceId: string) => void) | undefined;
+    visualType?: "list" | "dropdown" | undefined;
+    placeholder?: string | undefined;
 }) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/DeviceSettings/DeviceSelectorAudio.d.ts

@@ -1,8 +1,10 @@
 export type DeviceSelectorAudioInputProps = {
     title?: string;
+    visualType?: 'list' | 'dropdown';
 };
-export declare const DeviceSelectorAudioInput: ({ title, }: DeviceSelectorAudioInputProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DeviceSelectorAudioInput: ({ title, visualType, }: DeviceSelectorAudioInputProps) => import("react/jsx-runtime").JSX.Element;
 export type DeviceSelectorAudioOutputProps = {
     title?: string;
+    visualType?: 'list' | 'dropdown';
 };
-export declare const DeviceSelectorAudioOutput: ({ title, }: DeviceSelectorAudioOutputProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const DeviceSelectorAudioOutput: ({ title, visualType, }: DeviceSelectorAudioOutputProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/src/components/DeviceSettings/DeviceSelectorVideo.d.ts

@@ -1,4 +1,5 @@
 export type DeviceSelectorVideoProps = {
     title?: string;
+    visualType?: 'list' | 'dropdown';
 };
-export declare const DeviceSelectorVideo: ({ title }: DeviceSelectorVideoProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DeviceSelectorVideo: ({ title, visualType, }: DeviceSelectorVideoProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/DeviceSettings/DeviceSettings.d.ts

@@ -1 +1,5 @@
-export declare const DeviceSettings: () => import("react/jsx-runtime").JSX.Element;
+import { MenuVisualType } from '../Menu';
+export type DeviceSettingsProps = {
+    visualType?: MenuVisualType;
+};
+export declare const DeviceSettings: ({ visualType, }: DeviceSettingsProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/DropdownSelect/DropdownSelect.d.ts

@@ -0,0 +1,14 @@
+import { ReactElement } from 'react';
+export type DropDownSelectOptionProps = {
+    label: string;
+    selected?: boolean;
+    icon: string;
+};
+export declare const DropDownSelectOption: (props: DropDownSelectOptionProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DropDownSelect: (props: {
+    icon?: string | undefined;
+    defaultSelectedLabel: string;
+    defaultSelectedIndex: number;
+    handleSelect: (index: number) => void;
+    children: ReactElement<DropDownSelectOptionProps> | ReactElement<DropDownSelectOptionProps>[];
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/DropdownSelect/index.d.ts

@@ -0,0 +1 @@
+export * from './DropdownSelect';

package/dist/src/components/Icon/Icon.d.ts

@@ -1,4 +1,5 @@
 export type IconProps = {
     icon: string;
+    className?: string;
 };
-export declare const Icon: ({ icon }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Icon: ({ className, icon }: IconProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/Menu/GenericMenu.d.ts

@@ -1,3 +1,5 @@
-import { ComponentProps, PropsWithChildren } from 'react';
-export declare const GenericMenu: ({ children }: PropsWithChildren) => import("react/jsx-runtime").JSX.Element;
+import { ComponentProps, MouseEvent, PropsWithChildren } from 'react';
+export declare const GenericMenu: ({ children, onItemClick, }: PropsWithChildren<{
+    onItemClick?: ((e: MouseEvent) => void) | undefined;
+}>) => import("react/jsx-runtime").JSX.Element;
 export declare const GenericMenuButtonItem: ({ children, ...rest }: Omit<ComponentProps<'button'>, 'ref'>) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/Menu/MenuToggle.d.ts

@@ -1,12 +1,25 @@
-import { ComponentType, PropsWithChildren, ForwardedRef } from 'react';
+import { ComponentType, ForwardedRef, PropsWithChildren } from 'react';
 import { Placement, Strategy } from '@floating-ui/react';
 export type ToggleMenuButtonProps<E extends HTMLElement = HTMLButtonElement> = {
     menuShown: boolean;
     ref: ForwardedRef<E>;
 };
+export declare enum MenuVisualType {
+    PORTAL = "portal",
+    MENU = "menu"
+}
 export type MenuToggleProps<E extends HTMLElement> = PropsWithChildren<{
     ToggleButton: ComponentType<ToggleMenuButtonProps<E>>;
     placement?: Placement;
     strategy?: Strategy;
+    offset?: number;
+    visualType?: MenuVisualType;
 }>;
-export declare const MenuToggle: <E extends HTMLElement>({ ToggleButton, placement, strategy, children, }: MenuToggleProps<E>) => import("react/jsx-runtime").JSX.Element;
+export type MenuContextValue = {
+    close?: () => void;
+};
+/**
+ * Access to the closes MenuContext.
+ */
+export declare const useMenuContext: () => MenuContextValue;
+export declare const MenuToggle: <E extends HTMLElement>({ ToggleButton, placement, strategy, offset, visualType, children, }: MenuToggleProps<E>) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/Notification/Notification.d.ts

@@ -7,5 +7,6 @@ export type NotificationProps = {
     resetIsVisible?: () => void;
     placement?: Placement;
     iconClassName?: string | null;
+    close?: () => void;
 };
 export declare const Notification: (props: PropsWithChildren<NotificationProps>) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/Notification/RecordingInProgressNotification.d.ts

@@ -0,0 +1,5 @@
+import { PropsWithChildren } from 'react';
+export type RecordingInProgressNotificationProps = {
+    text?: string;
+};
+export declare const RecordingInProgressNotification: ({ children, text, }: PropsWithChildren<RecordingInProgressNotificationProps>) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/Notification/SpeakingWhileMutedNotification.d.ts

@@ -1,8 +1,10 @@
 import { PropsWithChildren } from 'react';
+import { Placement } from '@floating-ui/react';
 export type SpeakingWhileMutedNotificationProps = {
     /**
      * Text message displayed by the notification.
      */
     text?: string;
+    placement?: Placement;
 };
-export declare const SpeakingWhileMutedNotification: ({ children, text, }: PropsWithChildren<SpeakingWhileMutedNotificationProps>) => import("react/jsx-runtime").JSX.Element;
+export declare const SpeakingWhileMutedNotification: ({ children, text, placement, }: PropsWithChildren<SpeakingWhileMutedNotificationProps>) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/Notification/index.d.ts

@@ -1,3 +1,4 @@
 export * from './Notification';
 export * from './PermissionNotification';
 export * from './SpeakingWhileMutedNotification';
+export * from './RecordingInProgressNotification';

package/dist/src/components/index.d.ts

@@ -3,9 +3,11 @@ export * from './Button';
 export * from './CallControls';
 export * from './CallParticipantsList';
 export * from './CallPreview';
+export * from './CallStats';
 export * from './CallRecordingList';
 export * from './CallStats';
 export * from './DeviceSettings';
+export * from './DropdownSelect';
 export * from './Icon';
 export * from './LoadingIndicator';
 export * from './Menu';

package/dist/src/core/components/ParticipantView/DefaultParticipantViewUI.d.ts

@@ -1,3 +1,4 @@
+import { ComponentType } from 'react';
 import { Placement } from '@floating-ui/react';
 export type DefaultParticipantViewUIProps = {
     /**
@@ -12,7 +13,12 @@ export type DefaultParticipantViewUIProps = {
      * Option to show/hide menu button component
      */
     showMenuButton?: boolean;
+    /**
+     * Custom component to render the context menu
+     */
+    ParticipantActionsContextMenu?: ComponentType;
 };
 export declare const DefaultScreenShareOverlay: () => import("react/jsx-runtime").JSX.Element;
-export declare const DefaultParticipantViewUI: ({ indicatorsVisible, menuPlacement, showMenuButton, }: DefaultParticipantViewUIProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DefaultParticipantViewUI: ({ indicatorsVisible, menuPlacement, showMenuButton, ParticipantActionsContextMenu, }: DefaultParticipantViewUIProps) => import("react/jsx-runtime").JSX.Element;
 export declare const ParticipantDetails: ({ indicatorsVisible, }: Pick<DefaultParticipantViewUIProps, 'indicatorsVisible'>) => import("react/jsx-runtime").JSX.Element;
+export declare const SpeechIndicator: () => import("react/jsx-runtime").JSX.Element;

package/dist/src/core/components/ParticipantView/ParticipantActionsContextMenu.d.ts

@@ -0,0 +1 @@
+export declare const ParticipantActionsContextMenu: () => import("react/jsx-runtime").JSX.Element;

package/dist/src/core/components/ParticipantView/ParticipantViewContext.d.ts

@@ -1,9 +1,9 @@
 /// <reference types="react" />
 import { ParticipantViewProps } from './ParticipantView';
 export type ParticipantViewContextValue = Required<Pick<ParticipantViewProps, 'participant' | 'trackType'>> & {
-    participantViewElement: HTMLDivElement | null;
-    videoElement: HTMLVideoElement | null;
-    videoPlaceholderElement: HTMLDivElement | null;
+    participantViewElement?: HTMLDivElement | null;
+    videoElement?: HTMLVideoElement | null;
+    videoPlaceholderElement?: HTMLDivElement | null;
 };
 export declare const ParticipantViewContext: import("react").Context<ParticipantViewContextValue | undefined>;
 export declare const useParticipantViewContext: () => ParticipantViewContextValue;

package/dist/src/core/components/ParticipantView/index.d.ts

@@ -1,3 +1,4 @@
+export * from './ParticipantActionsContextMenu';
 export * from './ParticipantView';
 export * from './ParticipantViewContext';
 export * from './DefaultParticipantViewUI';

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

@@ -1,6 +1,9 @@
 /// <reference types="react" />
 import type { UseFloatingData } from '@floating-ui/react';
-export declare const useFloatingUIPreset: ({ placement, strategy, }: Pick<UseFloatingData, 'placement' | 'strategy'>) => {
+import { offset } from '@floating-ui/react';
+export declare const useFloatingUIPreset: ({ placement, strategy, offset: offsetInPx, }: Pick<UseFloatingData, 'placement' | 'strategy'> & {
+    offset?: number;
+}) => {
     refs: {
         reference: import("react").MutableRefObject<import("@floating-ui/react-dom").ReferenceType | null>;
         floating: import("react").MutableRefObject<HTMLElement | null>;

package/dist/src/translations/index.d.ts

@@ -23,6 +23,7 @@ export declare const translations: {
         "Waiting for recording to start...": string;
         "Record call": string;
         Reactions: string;
+        Statistics: string;
         "You can now share your screen.": string;
         "Awaiting for an approval to share screen.": string;
         "You can no longer share your screen.": string;
@@ -36,6 +37,12 @@ export declare const translations: {
         Me: string;
         Unknown: string;
         "Toggle device menu": string;
+        "Call Recordings": string;
+        Refresh: string;
+        "Check your browser video permissions": string;
+        "Video publishing is disabled by the system": string;
+        "You have no permission to share your video": string;
+        "You have no permission to share your audio": string;
         "You are presenting your screen": string;
         "Stop Screen Sharing": string;
         Allow: string;
@@ -65,6 +72,8 @@ export declare const translations: {
         "Disable screen sharing": string;
         Enter: string;
         Leave: string;
+        "Leave call": string;
+        "End call for all": string;
         "{{ direction }} fullscreen": string;
         "{{ direction }} picture-in-picture": string;
         "Dominant Speaker": string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stream-io/video-react-sdk",
-  "version": "0.4.26",
+  "version": "0.5.0",
   "packageManager": "yarn@3.2.4",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.es.js",
@@ -28,13 +28,12 @@
     "CHANGELOG.md"
   ],
   "dependencies": {
-    "@floating-ui/react": "^0.26.1",
-    "@nivo/core": "^0.80.0",
-    "@nivo/line": "^0.80.0",
-    "@stream-io/video-client": "^0.5.11",
-    "@stream-io/video-react-bindings": "^0.3.22",
+    "@floating-ui/react": "^0.26.5",
+    "@stream-io/video-client": "^0.6.0",
+    "@stream-io/video-react-bindings": "^0.4.0",
+    "chart.js": "^4.4.1",
     "clsx": "^2.0.0",
-    "prop-types": "^15.8.1"
+    "react-chartjs-2": "^5.2.0"
   },
   "peerDependencies": {
     "react": "^18.0.0",
@@ -44,8 +43,7 @@
     "@rollup/plugin-json": "^6.0.1",
     "@rollup/plugin-replace": "^5.0.4",
     "@rollup/plugin-typescript": "^11.1.5",
-    "@stream-io/video-styling": "^0.1.14",
-    "@types/prop-types": "^15.7.8",
+    "@stream-io/video-styling": "^0.2.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "rimraf": "^5.0.5",

package/src/components/Button/CompositeButton.tsx

@@ -1,33 +1,85 @@
 import clsx from 'clsx';
 import { MenuToggle, ToggleMenuButtonProps } from '../Menu';
-import { ComponentType, forwardRef, PropsWithChildren } from 'react';
-import { useI18n } from '@stream-io/video-react-bindings';
+import {
+  ComponentProps,
+  ComponentType,
+  forwardRef,
+  JSX,
+  PropsWithChildren,
+} from 'react';
 import { Placement } from '@floating-ui/react';
 
 import { IconButton } from './IconButton';
 import { isComponentType } from '../../utilities';
 
-export type IconButtonWithMenuProps = PropsWithChildren<{
-  active?: boolean;
-  Menu?: ComponentType | JSX.Element;
-  caption?: string;
-  menuPlacement?: Placement;
-}>;
+export type IconButtonWithMenuProps<E extends HTMLElement = HTMLButtonElement> =
+  PropsWithChildren<{
+    active?: boolean;
+    Menu?: ComponentType | JSX.Element;
+    caption?: string;
+    className?: string;
+    menuPlacement?: Placement;
+    menuOffset?: number;
+    ToggleMenuButton?: ComponentType<ToggleMenuButtonProps<E>>;
+    variant?: 'primary' | 'secondary';
+  }> &
+    ComponentProps<'button'>;
 
 export const CompositeButton = forwardRef<
   HTMLDivElement,
   IconButtonWithMenuProps
->(({ caption, children, active, Menu, menuPlacement }, ref) => {
+>(function CompositeButton(
+  {
+    caption,
+    children,
+    className,
+    active,
+    Menu,
+    menuPlacement,
+    menuOffset,
+    title,
+    ToggleMenuButton = DefaultToggleMenuButton,
+    variant,
+    onClick,
+    ...restButtonProps
+  },
+  ref,
+) {
   return (
-    <div className="str-video__composite-button" ref={ref}>
+    <div
+      className={clsx('str-video__composite-button', className, {
+        'str-video__composite-button--caption': caption,
+        'str-video__composite-button--menu': Menu,
+      })}
+      title={title}
+      ref={ref}
+    >
       <div
         className={clsx('str-video__composite-button__button-group', {
           'str-video__composite-button__button-group--active': active,
+          'str-video__composite-button__button-group--active-primary':
+            active && variant === 'primary',
+          'str-video__composite-button__button-group--active-secondary':
+            active && variant === 'secondary',
         })}
       >
-        {children}
+        <button
+          type="button"
+          className="str-video__composite-button__button"
+          onClick={(e) => {
+            e.preventDefault();
+            onClick?.(e);
+          }}
+          {...restButtonProps}
+        >
+          {children}
+        </button>
         {Menu && (
-          <MenuToggle placement={menuPlacement} ToggleButton={ToggleMenuButton}>
+          <MenuToggle
+            offset={menuOffset}
+            placement={menuPlacement}
+            ToggleButton={ToggleMenuButton}
+          >
             {isComponentType(Menu) ? <Menu /> : Menu}
           </MenuToggle>
         )}
@@ -39,17 +91,17 @@ export const CompositeButton = forwardRef<
   );
 });
 
-const ToggleMenuButton = forwardRef<HTMLButtonElement, ToggleMenuButtonProps>(
-  ({ menuShown }, ref) => {
-    const { t } = useI18n();
-
-    return (
-      <IconButton
-        className={'str-video__menu-toggle-button'}
-        icon={menuShown ? 'caret-down' : 'caret-up'}
-        title={t('Toggle device menu')}
-        ref={ref}
-      />
-    );
-  },
-);
+const DefaultToggleMenuButton = forwardRef<
+  HTMLButtonElement,
+  ToggleMenuButtonProps
+>(function DefaultToggleMenuButton({ menuShown }, ref) {
+  return (
+    <IconButton
+      className={clsx('str-video__menu-toggle-button', {
+        'str-video__menu-toggle-button--active': menuShown,
+      })}
+      icon={menuShown ? 'caret-down' : 'caret-up'}
+      ref={ref}
+    />
+  );
+});

package/src/components/Button/IconButton.tsx

@@ -9,24 +9,25 @@ export type ButtonWithIconProps = {
 } & ComponentProps<'button'> &
   IconProps;
 
-export const IconButton = forwardRef(
-  (props: ButtonWithIconProps, ref: ForwardedRef<HTMLButtonElement>) => {
-    const { icon, enabled, variant, onClick, className, ...rest } = props;
-    return (
-      <button
-        className={clsx('str-video__call-controls__button', className, {
-          [`str-video__call-controls__button--variant-${variant}`]: variant,
-          'str-video__call-controls__button--enabled': enabled,
-        })}
-        onClick={(e) => {
-          e.preventDefault();
-          onClick?.(e);
-        }}
-        ref={ref}
-        {...rest}
-      >
-        <Icon icon={icon} />
-      </button>
-    );
-  },
-);
+export const IconButton = forwardRef(function IconButton(
+  props: ButtonWithIconProps,
+  ref: ForwardedRef<HTMLButtonElement>,
+) {
+  const { icon, enabled, variant, onClick, className, ...rest } = props;
+  return (
+    <button
+      className={clsx('str-video__call-controls__button', className, {
+        [`str-video__call-controls__button--variant-${variant}`]: variant,
+        'str-video__call-controls__button--enabled': enabled,
+      })}
+      onClick={(e) => {
+        e.preventDefault();
+        onClick?.(e);
+      }}
+      ref={ref}
+      {...rest}
+    >
+      <Icon icon={icon} />
+    </button>
+  );
+});

package/src/components/Button/index.ts

@@ -1,4 +1,3 @@
 export * from './CompositeButton';
-export * from './CopyToClipboardButton';
 export * from './IconButton';
 export * from './TextButton';

package/src/components/CallControls/AcceptCallButton.tsx

@@ -30,6 +30,7 @@ export const AcceptCallButton = ({
       disabled={disabled}
       icon="call-accept"
       variant="success"
+      data-testid="accept-call-button"
       onClick={handleClick}
     />
   );