@azure/communication-react 1.3.3-alpha-202208180014.0 → 1.3.3-alpha-202208190016.0

package/dist/communication-react.d.ts

@@ -1276,7 +1276,9 @@ export declare type CallControlOptions = {
      * Show or Hide Camera Button during a call
      * @defaultValue true
      */
-    cameraButton?: boolean;
+    cameraButton?: boolean | /* @conditional-compile-remove(PSTN-calls) */ {
+        disabled: boolean;
+    };
     /**
      * Show or Hide EndCall button during a call.
      * @defaultValue true
@@ -1286,12 +1288,16 @@ export declare type CallControlOptions = {
      * Show or Hide Microphone button during a call.
      * @defaultValue true
      */
-    microphoneButton?: boolean;
+    microphoneButton?: boolean | /* @conditional-compile-remove(PSTN-calls) */ {
+        disabled: boolean;
+    };
     /**
      * Show or Hide Devices button during a call.
      * @defaultValue true
      */
-    devicesButton?: boolean;
+    devicesButton?: boolean | /* @conditional-compile-remove(PSTN-calls) */ {
+        disabled: boolean;
+    };
     /**
      * Show, Hide or Disable participants button during a call.
      * @defaultValue true
@@ -1317,6 +1323,9 @@ export declare type CallControlOptions = {
      * @beta
      */
     onFetchCustomButtonProps?: CustomCallControlButtonCallback[];
+    holdButton?: boolean | {
+        disabled: boolean;
+    };
 };
 
 /**
@@ -7042,7 +7051,13 @@ export declare const useChatThreadClient: () => ChatThreadClient;
 export declare const useDeviceManager: () => StatefulDeviceManager | undefined;
 
 /**
- * Primary hook to get all hooks necessary for a React Component from this library..
+ * Primary hook to get all hooks necessary for a React Component from this library.
+ *
+ * To call this hook, the component requires to be wrapped under these providers:
+ *
+ * 1. For chat components: {@link ChatClientProvider} and {@link ChatThreadClientProvider}.
+ *
+ * 2. For calling components: {@link CallClientProvider}, {@link CallAgentProvider} and {@link CallAgentProvider}.
  *
  * Most straightforward usage of a components looks like:
  *

package/dist/dist-cjs/communication-react/index.js

@@ -192,7 +192,7 @@ const fromFlatCommunicationIdentifier = (id) => {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-var telemetryVersion = '1.3.3-alpha-202208180014.0';
+var telemetryVersion = '1.3.3-alpha-202208190016.0';
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -14474,6 +14474,37 @@ const getCallCompositePage = (call, previousCall) => {
     // No call state - show starting page (configuration)
     return 'configuration';
 };
+/**
+ * Creates a new call control options object and sets the correct values for disabling
+ * the buttons provided in the `disabledControls` array.
+ * Returns a new object without changing the original object.
+ * @param callControlOptions options for the call control component that need to be modified.
+ * @param disabledControls An array of controls to disable.
+ * @returns a copy of callControlOptions with disabledControls disabled
+ * @private
+ */
+const disableCallControls = (callControlOptions, disabledControls) => {
+    var _a;
+    if (callControlOptions === false) {
+        return false;
+    }
+    // Ensure we clone the prop if it is an object to ensure we do not mutate the original prop.
+    let newOptions = (_a = (callControlOptions instanceof Object ? Object.assign({}, callControlOptions) : callControlOptions)) !== null && _a !== void 0 ? _a : {};
+    if (newOptions === true || newOptions === undefined) {
+        newOptions = disabledControls.reduce((acc, key) => {
+            acc[key] = { disabled: true };
+            return acc;
+        }, {});
+    }
+    else {
+        disabledControls.forEach((key) => {
+            if (newOptions[key] !== false) {
+                newOptions[key] = { disabled: true };
+            }
+        });
+    }
+    return newOptions;
+};
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
@@ -14677,7 +14708,7 @@ const concatButtonBaseStyles = (...styles) => {
 const Camera = (props) => {
     const cameraButtonProps = usePropsFor$1(CameraButton);
     const styles = React.useMemo(() => { var _a; return concatButtonBaseStyles((_a = props.styles) !== null && _a !== void 0 ? _a : {}); }, [props.styles]);
-    return (React__default['default'].createElement(CameraButton, Object.assign({ "data-ui-id": "call-composite-camera-button" }, cameraButtonProps, { showLabel: props.displayType !== 'compact', styles: styles, enableDeviceSelectionMenu: props.splitButtonsForDeviceSelection })));
+    return (React__default['default'].createElement(CameraButton, Object.assign({ "data-ui-id": "call-composite-camera-button" }, cameraButtonProps, { showLabel: props.displayType !== 'compact', styles: styles, enableDeviceSelectionMenu: props.splitButtonsForDeviceSelection, disabled: cameraButtonProps.disabled || props.disabled })));
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -14723,7 +14754,7 @@ const Devices = (props) => {
     /* By setting `persistMenu?` to true, we prevent options menu from getting hidden every time a participant joins or leaves. */
     , Object.assign({ 
         /* By setting `persistMenu?` to true, we prevent options menu from getting hidden every time a participant joins or leaves. */
-        persistMenu: true }, devicesButtonProps, { showLabel: props.displayType !== 'compact', styles: styles })));
+        persistMenu: true }, devicesButtonProps, { showLabel: props.displayType !== 'compact', styles: styles, "data-ui-id": "calling-composite-devices-button", disabled: props.disabled })));
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -14830,7 +14861,7 @@ const Microphone = (props) => {
         : {};
     const styles = React.useMemo(() => { var _a; return concatButtonBaseStyles((_a = props.styles) !== null && _a !== void 0 ? _a : {}); }, [props.styles]);
     // tab focus on MicrophoneButton on page load
-    return (React__default['default'].createElement(MicrophoneButton, Object.assign({ autoFocus: true, "data-ui-id": "call-composite-microphone-button" }, microphoneButtonProps, { showLabel: props.displayType !== 'compact', styles: styles }, microphoneButtonStrings, { enableDeviceSelectionMenu: props.splitButtonsForDeviceSelection })));
+    return (React__default['default'].createElement(MicrophoneButton, Object.assign({ autoFocus: true, "data-ui-id": "call-composite-microphone-button" }, microphoneButtonProps, { showLabel: props.displayType !== 'compact', styles: styles }, microphoneButtonStrings, { enableDeviceSelectionMenu: props.splitButtonsForDeviceSelection, disabled: microphoneButtonProps.disabled || props.disabled })));
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -14841,7 +14872,7 @@ const Participants = (props) => {
         var _a;
         return concatButtonBaseStyles(props.increaseFlyoutItemSize ? participantButtonWithIncreasedTouchTargets : {}, (_a = props.styles) !== null && _a !== void 0 ? _a : {});
     }, [props.increaseFlyoutItemSize, props.styles]);
-    return (React__default['default'].createElement(ParticipantsButton, Object.assign({ "data-ui-id": "call-composite-participants-button" }, participantsButtonProps, { showLabel: props.displayType !== 'compact', callInvitationURL: props.callInvitationURL, onFetchParticipantMenuItems: props.onFetchParticipantMenuItems, disabled: isDisabled$2(props.option), styles: participantsButtonStyles, showParticipantOverflowTooltip: !props.isMobile })));
+    return (React__default['default'].createElement(ParticipantsButton, Object.assign({ "data-ui-id": "call-composite-participants-button" }, participantsButtonProps, { showLabel: props.displayType !== 'compact', callInvitationURL: props.callInvitationURL, onFetchParticipantMenuItems: props.onFetchParticipantMenuItems, disabled: isDisabled$2(props.option) || props.disabled, styles: participantsButtonStyles, showParticipantOverflowTooltip: !props.isMobile })));
 };
 const isDisabled$2 = (option) => {
     if (option === undefined || option === true || option === false) {
@@ -14859,7 +14890,7 @@ const ScreenShare = (props) => {
         /* @conditional-compile-remove(PSTN-calls) */
         return (screenShareButtonProps === null || screenShareButtonProps === void 0 ? void 0 : screenShareButtonProps.disabled) ? screenShareButtonProps.disabled : isDisabled$1(props.option);
     };
-    return (React__default['default'].createElement(ScreenShareButton, Object.assign({ "data-ui-id": "call-composite-screenshare-button" }, screenShareButtonProps, { showLabel: props.displayType !== 'compact', disabled: screenShareButtonDisabled(), styles: styles })));
+    return (React__default['default'].createElement(ScreenShareButton, Object.assign({ "data-ui-id": "call-composite-screenshare-button" }, screenShareButtonProps, { showLabel: props.displayType !== 'compact', disabled: screenShareButtonDisabled() || props.disabled, styles: styles })));
 };
 const isDisabled$1 = (option) => {
     if (option === undefined || option === true || option === false) {
@@ -15045,7 +15076,8 @@ const CallControls = (props) => {
                 iconProps: { iconName: 'ControlButtonParticipants', styles: { root: { lineHeight: 0 } } },
                 itemProps: {
                     styles: buttonFlyoutIncreasedSizeStyles
-                }
+                },
+                ['data-ui-id']: 'call-composite-more-menu-people-button'
             });
         }
         items.push({
@@ -15057,7 +15089,9 @@ const CallControls = (props) => {
             iconProps: { iconName: 'HoldCall', styles: { root: { lineHeight: 0 } } },
             itemProps: {
                 styles: buttonFlyoutIncreasedSizeStyles
-            }
+            },
+            disabled: isDisabled(options === null || options === void 0 ? void 0 : options.holdButton),
+            ['data-ui-id']: 'call-composite-more-menu-hold-button'
         });
         /* @conditional-compile-remove(PSTN-calls) */
         items.push({
@@ -15091,26 +15125,26 @@ const CallControls = (props) => {
         React__default['default'].createElement(SendDtmfDialpad, { isMobile: !!props.isMobile, strings: dialpadStrings, showDialpad: showDialpad, onDismissDialpad: onDismissDialpad }),
         React__default['default'].createElement(react.Stack.Item, null,
             React__default['default'].createElement(ControlBar, { layout: "horizontal", styles: controlBarStyles(theme.semanticColors.bodyBackground) },
-                isEnabled$2(options === null || options === void 0 ? void 0 : options.microphoneButton) && React__default['default'].createElement(Microphone, { displayType: options === null || options === void 0 ? void 0 : options.displayType }),
-                isEnabled$2(options === null || options === void 0 ? void 0 : options.cameraButton) && React__default['default'].createElement(Camera, { displayType: options === null || options === void 0 ? void 0 : options.displayType }),
-                isEnabled$2(options === null || options === void 0 ? void 0 : options.screenShareButton) && (React__default['default'].createElement(ScreenShare, { option: options === null || options === void 0 ? void 0 : options.screenShareButton, displayType: options === null || options === void 0 ? void 0 : options.displayType })),
+                isEnabled$2(options === null || options === void 0 ? void 0 : options.microphoneButton) && (React__default['default'].createElement(Microphone, { displayType: options === null || options === void 0 ? void 0 : options.displayType, disabled: isDisabled(options === null || options === void 0 ? void 0 : options.microphoneButton) })),
+                isEnabled$2(options === null || options === void 0 ? void 0 : options.cameraButton) && (React__default['default'].createElement(Camera, { displayType: options === null || options === void 0 ? void 0 : options.displayType, disabled: isDisabled(options === null || options === void 0 ? void 0 : options.cameraButton) })),
+                isEnabled$2(options === null || options === void 0 ? void 0 : options.screenShareButton) && (React__default['default'].createElement(ScreenShare, { option: options === null || options === void 0 ? void 0 : options.screenShareButton, displayType: options === null || options === void 0 ? void 0 : options.displayType, disabled: isDisabled(options === null || options === void 0 ? void 0 : options.screenShareButton) })),
                 isEnabled$2(options === null || options === void 0 ? void 0 : options.participantsButton) &&
-                    /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(one-to-n-calling) */ !props.isMobile && (React__default['default'].createElement(Participants, { option: options === null || options === void 0 ? void 0 : options.participantsButton, callInvitationURL: props.callInvitationURL, onFetchParticipantMenuItems: props.onFetchParticipantMenuItems, displayType: options === null || options === void 0 ? void 0 : options.displayType, increaseFlyoutItemSize: props.increaseFlyoutItemSize, isMobile: props.isMobile })) && (
+                    /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(one-to-n-calling) */
+                    !props.isMobile && (React__default['default'].createElement(Participants, { option: options === null || options === void 0 ? void 0 : options.participantsButton, callInvitationURL: props.callInvitationURL, onFetchParticipantMenuItems: props.onFetchParticipantMenuItems, displayType: options === null || options === void 0 ? void 0 : options.displayType, increaseFlyoutItemSize: props.increaseFlyoutItemSize, isMobile: props.isMobile, disabled: isDisabled(options === null || options === void 0 ? void 0 : options.participantsButton) })) && (
                 /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(one-to-n-calling) */
-                React__default['default'].createElement(People, { checked: props.peopleButtonChecked, showLabel: (options === null || options === void 0 ? void 0 : options.displayType) !== 'compact', onClick: props.onPeopleButtonClicked, "data-ui-id": "call-with-chat-composite-people-button", disabled: isDisabled(options === null || options === void 0 ? void 0 : options.participantsButton), strings: peopleButtonStrings })),
-                isEnabled$2(options === null || options === void 0 ? void 0 : options.devicesButton) && (React__default['default'].createElement(Devices, { displayType: options === null || options === void 0 ? void 0 : options.displayType, increaseFlyoutItemSize: props.increaseFlyoutItemSize })),
+                React__default['default'].createElement(People, { checked: props.peopleButtonChecked, showLabel: (options === null || options === void 0 ? void 0 : options.displayType) !== 'compact', onClick: props.onPeopleButtonClicked, "data-ui-id": "call-composite-people-button", strings: peopleButtonStrings, disabled: isDisabled(options === null || options === void 0 ? void 0 : options.participantsButton) })),
+                isEnabled$2(options === null || options === void 0 ? void 0 : options.devicesButton) && (React__default['default'].createElement(Devices, { displayType: options === null || options === void 0 ? void 0 : options.displayType, increaseFlyoutItemSize: props.increaseFlyoutItemSize, disabled: isDisabled(options === null || options === void 0 ? void 0 : options.devicesButton) })),
                 /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(one-to-n-calling) */
                 isEnabled$2(options === null || options === void 0 ? void 0 : options.moreButton) && (React__default['default'].createElement(MoreButton, { strings: moreButtonStrings, menuIconProps: { hidden: true }, menuProps: { items: moreButtonContextualMenuItems() }, showLabel: !props.isMobile })),
                 customButtons['primary'],
                 isEnabled$2(options === null || options === void 0 ? void 0 : options.endCallButton) && React__default['default'].createElement(EndCall, { displayType: options === null || options === void 0 ? void 0 : options.displayType })))));
 };
 const isEnabled$2 = (option) => option !== false;
-/* @conditional-compile-remove(one-to-n-calling) */
 const isDisabled = (option) => {
-    if (option === undefined || option === true || option === false) {
-        return false;
+    if (typeof option !== 'boolean') {
+        return !!(option === null || option === void 0 ? void 0 : option.disabled);
     }
-    return option.disabled;
+    return option;
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -17043,7 +17077,7 @@ const LobbyPage = (props) => {
     let callControlOptions = props.mobileView
         ? reduceCallControlsForMobile((_a = props.options) === null || _a === void 0 ? void 0 : _a.callControls)
         : (_b = props.options) === null || _b === void 0 ? void 0 : _b.callControls;
-    callControlOptions = disableLobbyPageControls(callControlOptions);
+    callControlOptions = disableCallControls(callControlOptions, ['screenShareButton', 'participantsButton']);
     return (React__default['default'].createElement(CallArrangement, { complianceBannerProps: { strings }, errorBarProps: ((_c = props.options) === null || _c === void 0 ? void 0 : _c.errorBar) !== false && Object.assign({}, errorBarProps), callControlProps: {
             options: callControlOptions,
             increaseFlyoutItemSize: props.mobileView
@@ -17051,27 +17085,6 @@ const LobbyPage = (props) => {
         /* @conditional-compile-remove(one-to-n-calling) */
         modalLayerHostId: props.modalLayerHostId, onRenderGalleryContent: () => React__default['default'].createElement(LobbyTile, Object.assign({}, lobbyProps, { overlayProps: overlayProps(strings, inLobby) })), dataUiId: 'lobby-page' }));
 };
-const disableLobbyPageControls = (callControlOptions) => {
-    // Ensure we clone the prop if it is an object to ensure we do not mutate the original prop.
-    let newOptions = callControlOptions instanceof Object ? Object.assign({}, callControlOptions) : callControlOptions;
-    if (newOptions !== false) {
-        if (newOptions === true || newOptions === undefined) {
-            newOptions = {
-                participantsButton: { disabled: true },
-                screenShareButton: { disabled: true }
-            };
-        }
-        else {
-            if (newOptions.participantsButton !== false) {
-                newOptions.participantsButton = { disabled: true };
-            }
-            if (newOptions.screenShareButton !== false) {
-                newOptions.screenShareButton = { disabled: true };
-            }
-        }
-    }
-    return newOptions;
-};
 const overlayProps = (strings, inLobby) => inLobby ? overlayPropsWaitingToBeAdmitted(strings) : overlayPropsConnectingToCall(strings);
 const overlayPropsConnectingToCall = (strings) => ({
     title: strings.lobbyScreenConnectingToCallTitle,
@@ -17221,9 +17234,18 @@ const HoldPage = (props) => {
     var _a, _b, _c;
     const errorBarProps = usePropsFor$1(ErrorBar);
     const strings = useLocale().strings.call;
-    const callControlOptions = props.mobileView
+    let callControlOptions = props.mobileView
         ? reduceCallControlsForMobile((_a = props.options) === null || _a === void 0 ? void 0 : _a.callControls)
         : (_b = props.options) === null || _b === void 0 ? void 0 : _b.callControls;
+    callControlOptions = disableCallControls(callControlOptions, [
+        'cameraButton',
+        'microphoneButton',
+        'devicesButton',
+        'screenShareButton',
+        /* @conditional-compile-remove(PSTN-calls) */
+        /* @conditional-compile-remove(one-to-n-calling) */
+        'holdButton'
+    ]);
     return (React__default['default'].createElement(CallArrangement, { complianceBannerProps: { strings }, errorBarProps: ((_c = props.options) === null || _c === void 0 ? void 0 : _c.errorBar) !== false && Object.assign({}, errorBarProps), callControlProps: {
             options: callControlOptions,
             increaseFlyoutItemSize: props.mobileView
@@ -18323,7 +18345,8 @@ const DesktopMoreButton = (props) => {
             iconProps: { iconName: 'HoldCall', styles: { root: { lineHeight: 0 } } },
             itemProps: {
                 styles: buttonFlyoutIncreasedSizeStyles
-            }
+            },
+            disabled: props.disableButtonsForHoldScreen
         });
         /*@conditional-compile-remove(PSTN-calls) */
         if (props.onClickShowDialpad) {
@@ -18336,7 +18359,8 @@ const DesktopMoreButton = (props) => {
                 iconProps: { iconName: 'Dialpad', styles: { root: { lineHeight: 0 } } },
                 itemProps: {
                     styles: buttonFlyoutIncreasedSizeStyles
-                }
+                },
+                disabled: props.disableButtonsForHoldScreen
             });
         }
         return items;
@@ -18410,10 +18434,16 @@ const CallWithChatControlBar = (props) => {
                 React__default['default'].createElement(react.Stack, { horizontalAlign: "center" },
                     React__default['default'].createElement(react.Stack.Item, null,
                         React__default['default'].createElement(ControlBar, { layout: "horizontal", styles: centerContainerStyles },
-                            isEnabled$1(options.microphoneButton) && (React__default['default'].createElement(Microphone, { displayType: options.displayType, styles: commonButtonStyles, splitButtonsForDeviceSelection: !props.mobileView })),
-                            isEnabled$1(options.cameraButton) && (React__default['default'].createElement(Camera, { displayType: options.displayType, styles: commonButtonStyles, splitButtonsForDeviceSelection: !props.mobileView })),
+                            isEnabled$1(options.microphoneButton) && (React__default['default'].createElement(Microphone, { displayType: options.displayType, styles: commonButtonStyles, splitButtonsForDeviceSelection: !props.mobileView, 
+                                /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
+                                disabled: props.disableButtonsForHoldScreen })),
+                            isEnabled$1(options.cameraButton) && (React__default['default'].createElement(Camera, { displayType: options.displayType, styles: commonButtonStyles, splitButtonsForDeviceSelection: !props.mobileView, 
+                                /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
+                                disabled: props.disableButtonsForHoldScreen })),
                             props.mobileView && isEnabled$1(options === null || options === void 0 ? void 0 : options.chatButton) && chatButton,
-                            isEnabled$1(options.screenShareButton) && (React__default['default'].createElement(ScreenShare, { option: options.screenShareButton, displayType: options.displayType, styles: screenShareButtonStyles })), 
+                            isEnabled$1(options.screenShareButton) && (React__default['default'].createElement(ScreenShare, { option: options.screenShareButton, displayType: options.displayType, styles: screenShareButtonStyles, 
+                                /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
+                                disabled: props.disableButtonsForHoldScreen })), 
                         /* @conditional-compile-remove(control-bar-button-injection) */
                         (_a = customButtons['primary']) === null || _a === void 0 ? void 0 :
                             _a.props.children.slice(0, props.mobileView
@@ -18424,7 +18454,7 @@ const CallWithChatControlBar = (props) => {
                             props.mobileView && (React__default['default'].createElement(MoreButton, { "data-ui-id": "call-with-chat-composite-more-button", strings: moreButtonStrings, onClick: props.onMoreButtonClicked, disabled: props.disableButtonsForLobbyPage })),
                             /*@conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ isEnabled$1(options === null || options === void 0 ? void 0 : options.moreButton) &&
                                 /*@conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ isEnabled$1(options === null || options === void 0 ? void 0 : options.holdButton) &&
-                                !props.mobileView && (React__default['default'].createElement(DesktopMoreButton, { disabled: props.disableButtonsForLobbyPage, styles: commonButtonStyles, onClickShowDialpad: props.onClickShowDialpad })),
+                                !props.mobileView && (React__default['default'].createElement(DesktopMoreButton, { disableButtonsForHoldScreen: props.disableButtonsForHoldScreen, styles: commonButtonStyles, onClickShowDialpad: props.onClickShowDialpad })),
                             React__default['default'].createElement(EndCall, { displayType: "compact", styles: endCallButtonStyles })))))),
         !props.mobileView && (React__default['default'].createElement(react.Stack, { horizontal: true, className: !props.mobileView ? react.mergeStyles(desktopButtonContainerStyle) : undefined }, 
         /* @conditional-compile-remove(control-bar-button-injection) */
@@ -18775,6 +18805,7 @@ const MoreDrawer = (props) => {
     if (props.speakers && props.speakers.length > 0) {
         drawerMenuItems.push({
             itemKey: 'speakers',
+            disabled: props.disableButtonsForHoldScreen,
             text: props.strings.speakerMenuTitle,
             iconProps: { iconName: 'MoreDrawerSpeakers' },
             subMenuProps: props.speakers.map((speaker) => ({
@@ -18810,6 +18841,7 @@ const MoreDrawer = (props) => {
         const selectedIconName = speakersAvailable ? 'MoreDrawerSelectedMicrophone' : 'MoreDrawerSelectedSpeaker';
         drawerMenuItems.push({
             itemKey: itemKey,
+            disabled: props.disableButtonsForHoldScreen,
             text: text,
             iconProps: { iconName: iconName },
             subMenuProps: props.microphones.map((mic) => ({
@@ -18836,6 +18868,7 @@ const MoreDrawer = (props) => {
     if (drawerSelectionOptions !== false && isEnabled(drawerSelectionOptions === null || drawerSelectionOptions === void 0 ? void 0 : drawerSelectionOptions.peopleButton)) {
         drawerMenuItems.push({
             itemKey: 'holdButtonKey',
+            disabled: props.disableButtonsForHoldScreen,
             text: localeStrings.component.strings.holdButton.tooltipOffContent,
             onItemClick: () => {
                 holdButtonProps.onToggleHold();
@@ -18847,6 +18880,7 @@ const MoreDrawer = (props) => {
     if (drawerSelectionOptions !== false && isEnabled(drawerSelectionOptions === null || drawerSelectionOptions === void 0 ? void 0 : drawerSelectionOptions.peopleButton) && props.onClickShowDialpad) {
         drawerMenuItems.push({
             itemKey: 'showDialpadKey',
+            disabled: props.disableButtonsForHoldScreen,
             text: localeStrings.strings.callWithChat.openDtmfDialpad,
             onItemClick: () => {
                 props.onClickShowDialpad && props.onClickShowDialpad();
@@ -19006,6 +19040,8 @@ const CallWithChatScreen = (props) => {
     }, [callWithChatAdapter]);
     const modalLayerHostId = reactHooks.useId('modalLayerhost');
     const isInLobbyOrConnecting = currentPage === 'lobby';
+    /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
+    const isInLocalHold = currentPage === 'hold';
     const hasJoinedCall = !!(currentPage && hasJoinedCallFn(currentPage, currentCallState !== null && currentCallState !== void 0 ? currentCallState : 'None'));
     const showControlBar = isInLobbyOrConnecting || hasJoinedCall;
     const isMobileWithActivePane = mobileView && activePane !== 'none';
@@ -19095,7 +19131,9 @@ const CallWithChatScreen = (props) => {
                     fileSharing: props.fileSharing, rtl: props.rtl }))),
             showControlBar && !isMobileWithActivePane && (React__default['default'].createElement(ChatAdapterProvider, { adapter: chatProps.adapter },
                 React__default['default'].createElement(react.Stack.Item, { styles: controlBarContainerStyles$1 },
-                    React__default['default'].createElement(CallWithChatControlBar, { callAdapter: callAdapter, chatAdapter: chatProps.adapter, chatButtonChecked: activePane === 'chat', onChatButtonClicked: toggleChat, peopleButtonChecked: activePane === 'people', onPeopleButtonClicked: togglePeople, onMoreButtonClicked: onMoreButtonClicked, mobileView: mobileView, disableButtonsForLobbyPage: isInLobbyOrConnecting, callControls: props.callControls, containerHeight: containerHeight, containerWidth: containerWidth, 
+                    React__default['default'].createElement(CallWithChatControlBar, { callAdapter: callAdapter, chatAdapter: chatProps.adapter, chatButtonChecked: activePane === 'chat', onChatButtonClicked: toggleChat, peopleButtonChecked: activePane === 'people', onPeopleButtonClicked: togglePeople, onMoreButtonClicked: onMoreButtonClicked, mobileView: mobileView, disableButtonsForLobbyPage: isInLobbyOrConnecting, 
+                        /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
+                        disableButtonsForHoldScreen: isInLocalHold, callControls: props.callControls, containerHeight: containerHeight, containerWidth: containerWidth, 
                         /* @conditional-compile-remove(PSTN-calls) */
                         onClickShowDialpad: onClickShowDialpad })))),
             showControlBar && showDrawer && (React__default['default'].createElement(ChatAdapterProvider, { adapter: chatProps.adapter },
@@ -19103,7 +19141,9 @@ const CallWithChatScreen = (props) => {
                     React__default['default'].createElement(react.Stack, { styles: drawerContainerStyles$1 },
                         React__default['default'].createElement(PreparedMoreDrawer, { callControls: props.callControls, onLightDismiss: closeDrawer, onPeopleButtonClicked: onMoreDrawerPeopleClicked, 
                             /* @conditional-compile-remove(PSTN-calls) */
-                            onClickShowDialpad: onClickShowDialpad }))))),
+                            onClickShowDialpad: onClickShowDialpad, 
+                            /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
+                            disableButtonsForHoldScreen: isInLocalHold }))))),
             /* @conditional-compile-remove(PSTN-calls) */
             showControlBar && showDtmfDialpad && (React__default['default'].createElement(ChatAdapterProvider, { adapter: chatProps.adapter },
                 React__default['default'].createElement(CallAdapterProvider, { adapter: callAdapter },
@@ -19848,7 +19888,13 @@ const useSelector = (selector, selectorProps, type) => {
     return callProps !== null && callProps !== void 0 ? callProps : chatProps;
 };
 /**
- * Primary hook to get all hooks necessary for a React Component from this library..
+ * Primary hook to get all hooks necessary for a React Component from this library.
+ *
+ * To call this hook, the component requires to be wrapped under these providers:
+ *
+ * 1. For chat components: {@link ChatClientProvider} and {@link ChatThreadClientProvider}.
+ *
+ * 2. For calling components: {@link CallClientProvider}, {@link CallAgentProvider} and {@link CallAgentProvider}.
  *
  * Most straightforward usage of a components looks like:
  *
@@ -19884,7 +19930,12 @@ const usePropsFor = (component, type) => {
         }
         return Object.assign(Object.assign({}, callProps), callingHandlers);
     }
-    throw "Can't find corresponding selector for this component. Please check the supported components from Azure Communication UI Feature Component List.";
+    if (!chatSelector && !callingSelector) {
+        throw "Can't find corresponding selector for this component. Please check the supported components from Azure Communication UI Feature Component List.";
+    }
+    else {
+        throw 'Could not find props for this component, ensure the component is wrapped by appropriate providers.';
+    }
 };
 
 exports.COMPONENT_LOCALE_DE_DE = COMPONENT_LOCALE_DE_DE;