Fix locale string typo for captions dropdown. Fix usePropsFor return type for RaisedHandButton

change-beta/@azure-communication-react-a67a4239-b169-42a1-a80e-e4283bad5628.json

@@ -0,0 +1,9 @@
+{
+  "type": "minor",
+  "area": "fix",
+  "workstream": "Captions and Raised hands",
+  "comment": "Fix string typo for captions dropdown info. Fix usePropsFor return type for RaiseHandButton.",
+  "packageName": "@azure/communication-react",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@azure-communication-react-a67a4239-b169-42a1-a80e-e4283bad5628.json

@@ -0,0 +1,9 @@
+{
+  "type": "minor",
+  "area": "fix",
+  "workstream": "Captions and Raised hands",
+  "comment": "Fix string typo for captions dropdown info. Fix usePropsFor return type for RaiseHandButton.",
+  "packageName": "@azure/communication-react",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/calling-component-bindings/src/hooks/usePropsFor.ts

@@ -18,7 +18,7 @@ import { Dialpad } from '@internal/react-components';
 
 import { HoldButton } from '@internal/react-components';
 import { RaiseHandButton } from '@internal/react-components';
-import { raiseHandButtonSelector } from '../callControlSelectors';
+import { RaiseHandButtonSelector, raiseHandButtonSelector } from '../callControlSelectors';
 import {
   CameraButtonSelector,
   cameraButtonSelector,
@@ -123,8 +123,10 @@ export type GetSelector<Component extends (props: any) => JSX.Element | undefine
                           : AreEqual<Component, typeof IncomingCallStack> extends true
                             ? IncomingCallStackSelector
                             : AreEqual<Component, typeof ReactionButton> extends true
-                              ? EmptySelector
-                              : undefined;
+                              ? RaiseHandButtonSelector
+                              : AreEqual<Component, typeof RaiseHandButton> extends true
+                                ? EmptySelector
+                                : undefined;
 
 /**
  * Get the selector for a specified component.

packages/communication-react/review/beta/communication-react.api.md

@@ -3287,7 +3287,7 @@ export interface FluentThemeProviderProps {
 export const fromFlatCommunicationIdentifier: (id: string) => CommunicationIdentifier;
 
 // @public
-export type GetCallingSelector<Component extends (props: any) => JSX.Element | undefined> = AreEqual<Component, typeof VideoGallery> extends true ? VideoGallerySelector : AreEqual<Component, typeof DevicesButton> extends true ? DevicesButtonSelector : AreEqual<Component, typeof MicrophoneButton> extends true ? MicrophoneButtonSelector : AreEqual<Component, typeof CameraButton> extends true ? CameraButtonSelector : AreEqual<Component, typeof ScreenShareButton> extends true ? ScreenShareButtonSelector : AreEqual<Component, typeof ParticipantList> extends true ? ParticipantListSelector : AreEqual<Component, typeof ParticipantsButton> extends true ? ParticipantsButtonSelector : AreEqual<Component, typeof EndCallButton> extends true ? EmptySelector : AreEqual<Component, typeof ErrorBar> extends true ? CallErrorBarSelector : AreEqual<Component, typeof Dialpad> extends true ? EmptySelector : AreEqual<Component, typeof HoldButton> extends true ? HoldButtonSelector : AreEqual<Component, typeof NotificationStack> extends true ? NotificationStackSelector : AreEqual<Component, typeof IncomingCallStack> extends true ? IncomingCallStackSelector : AreEqual<Component, typeof ReactionButton> extends true ? EmptySelector : undefined;
+export type GetCallingSelector<Component extends (props: any) => JSX.Element | undefined> = AreEqual<Component, typeof VideoGallery> extends true ? VideoGallerySelector : AreEqual<Component, typeof DevicesButton> extends true ? DevicesButtonSelector : AreEqual<Component, typeof MicrophoneButton> extends true ? MicrophoneButtonSelector : AreEqual<Component, typeof CameraButton> extends true ? CameraButtonSelector : AreEqual<Component, typeof ScreenShareButton> extends true ? ScreenShareButtonSelector : AreEqual<Component, typeof ParticipantList> extends true ? ParticipantListSelector : AreEqual<Component, typeof ParticipantsButton> extends true ? ParticipantsButtonSelector : AreEqual<Component, typeof EndCallButton> extends true ? EmptySelector : AreEqual<Component, typeof ErrorBar> extends true ? CallErrorBarSelector : AreEqual<Component, typeof Dialpad> extends true ? EmptySelector : AreEqual<Component, typeof HoldButton> extends true ? HoldButtonSelector : AreEqual<Component, typeof NotificationStack> extends true ? NotificationStackSelector : AreEqual<Component, typeof IncomingCallStack> extends true ? IncomingCallStackSelector : AreEqual<Component, typeof ReactionButton> extends true ? RaiseHandButtonSelector : AreEqual<Component, typeof RaiseHandButton> extends true ? EmptySelector : undefined;
 
 // @public
 export const getCallingSelector: <Component extends (props: any) => JSX.Element | undefined>(component: Component) => GetCallingSelector<Component>;

packages/communication-react/review/stable/communication-react.api.md

@@ -2846,7 +2846,7 @@ export interface FluentThemeProviderProps {
 export const fromFlatCommunicationIdentifier: (id: string) => CommunicationIdentifier;
 
 // @public
-export type GetCallingSelector<Component extends (props: any) => JSX.Element | undefined> = AreEqual<Component, typeof VideoGallery> extends true ? VideoGallerySelector : AreEqual<Component, typeof DevicesButton> extends true ? DevicesButtonSelector : AreEqual<Component, typeof MicrophoneButton> extends true ? MicrophoneButtonSelector : AreEqual<Component, typeof CameraButton> extends true ? CameraButtonSelector : AreEqual<Component, typeof ScreenShareButton> extends true ? ScreenShareButtonSelector : AreEqual<Component, typeof ParticipantList> extends true ? ParticipantListSelector : AreEqual<Component, typeof ParticipantsButton> extends true ? ParticipantsButtonSelector : AreEqual<Component, typeof EndCallButton> extends true ? EmptySelector : AreEqual<Component, typeof ErrorBar> extends true ? CallErrorBarSelector : AreEqual<Component, typeof Dialpad> extends true ? EmptySelector : AreEqual<Component, typeof HoldButton> extends true ? HoldButtonSelector : AreEqual<Component, typeof NotificationStack> extends true ? NotificationStackSelector : AreEqual<Component, typeof IncomingCallStack> extends true ? IncomingCallStackSelector : AreEqual<Component, typeof ReactionButton> extends true ? EmptySelector : undefined;
+export type GetCallingSelector<Component extends (props: any) => JSX.Element | undefined> = AreEqual<Component, typeof VideoGallery> extends true ? VideoGallerySelector : AreEqual<Component, typeof DevicesButton> extends true ? DevicesButtonSelector : AreEqual<Component, typeof MicrophoneButton> extends true ? MicrophoneButtonSelector : AreEqual<Component, typeof CameraButton> extends true ? CameraButtonSelector : AreEqual<Component, typeof ScreenShareButton> extends true ? ScreenShareButtonSelector : AreEqual<Component, typeof ParticipantList> extends true ? ParticipantListSelector : AreEqual<Component, typeof ParticipantsButton> extends true ? ParticipantsButtonSelector : AreEqual<Component, typeof EndCallButton> extends true ? EmptySelector : AreEqual<Component, typeof ErrorBar> extends true ? CallErrorBarSelector : AreEqual<Component, typeof Dialpad> extends true ? EmptySelector : AreEqual<Component, typeof HoldButton> extends true ? HoldButtonSelector : AreEqual<Component, typeof NotificationStack> extends true ? NotificationStackSelector : AreEqual<Component, typeof IncomingCallStack> extends true ? IncomingCallStackSelector : AreEqual<Component, typeof ReactionButton> extends true ? RaiseHandButtonSelector : AreEqual<Component, typeof RaiseHandButton> extends true ? EmptySelector : undefined;
 
 // @public
 export const getCallingSelector: <Component extends (props: any) => JSX.Element | undefined>(component: Component) => GetCallingSelector<Component>;

packages/react-composites/src/composites/CallComposite/components/CallControls.tsx

@@ -24,7 +24,7 @@ import { useAdapter } from '../adapter/CallAdapterProvider';
 import { isDisabled } from '../utils';
 import { callControlsContainerStyles } from '../styles/CallPage.styles';
 import { RaiseHand } from './buttons/RaiseHand';
-import { RaiseHandButton, RaiseHandButtonProps } from '@internal/react-components';
+import { RaiseHandButton } from '@internal/react-components';
 import { _generateDefaultDeviceMenuProps } from '@internal/react-components';
 import {
   CUSTOM_BUTTON_OPTIONS,
@@ -150,7 +150,7 @@ export const CallControls = (props: CallControlsProps & ContainerRectProps): JSX
 
   const holdButtonProps = usePropsFor(HoldButton);
 
-  const raiseHandButtonProps = usePropsFor(RaiseHandButton) as RaiseHandButtonProps;
+  const raiseHandButtonProps = usePropsFor(RaiseHandButton);
 
   const capabilitiesSelector = useSelector(capabilitySelector);
   const callState = useSelector(callStatusSelector);

packages/react-composites/src/composites/CallComposite/components/buttons/RaiseHand.tsx

@@ -1,7 +1,7 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-import { ControlBarButtonStyles, RaiseHandButton, RaiseHandButtonProps } from '@internal/react-components';
+import { ControlBarButtonStyles, RaiseHandButton } from '@internal/react-components';
 import React, { useMemo } from 'react';
 import { CallControlDisplayType } from '../../../common/types/CommonCallControlOptions';
 import { usePropsFor } from '../../hooks/usePropsFor';
@@ -18,7 +18,7 @@ export const RaiseHand = (props: {
   styles?: ControlBarButtonStyles;
   disabled?: boolean;
 }): JSX.Element => {
-  const raiseHandButtonProps = usePropsFor(RaiseHandButton) as RaiseHandButtonProps;
+  const raiseHandButtonProps = usePropsFor(RaiseHandButton);
   const callStatus = useSelector(getCallStatus);
   const styles = useMemo(() => concatButtonBaseStyles(props.styles ?? {}), [props.styles]);
 

packages/react-composites/src/composites/localization/locales/en-US/strings.json

@@ -118,7 +118,7 @@
     "captionsSettingsSpokenLanguageDropdownLabel": "Spoken language",
     "captionsSettingsCaptionLanguageDropdownLabel": "Captions language",
     "captionsSettingsSpokenLanguageDropdownInfoText": "Language that everyone on this call is speaking.",
-    "captionsSettingsCaptionLanguageDropdownInfoText": "Captions will appear in this langugage.",
+    "captionsSettingsCaptionLanguageDropdownInfoText": "Captions will appear in this language.",
     "captionsSettingsConfirmButtonLabel": "Confirm",
     "captionsSettingsCancelButtonLabel": "Cancel",
     "captionsSettingsModalAriaLabel": "Captions Setting Modal",