@azure/communication-react 1.22.0 → 1.23.0-alpha-202412200016

package/dist/dist-esm/react-components/src/components/DevicePermissions/DevicePermissionDropdown.js

@@ -10,7 +10,7 @@ import React from 'react';
 export const _DevicePermissionDropdown = (props) => {
     const { icon, askDevicePermission, onClick, constrain, strings, options } = props;
     const onRenderPlaceholder = () => {
-        return React.createElement(Stack, { horizontal: true, verticalAlign: "center", horizontalAlign: "space-between" },
+        return (React.createElement(Stack, { horizontal: true, verticalAlign: "center", horizontalAlign: "space-between" },
             icon,
             React.createElement(Stack.Item, { styles: {
                     root: {
@@ -26,27 +26,28 @@ export const _DevicePermissionDropdown = (props) => {
                         paddingLeft: '0.5rem'
                     }
                 } },
-                React.createElement(Text, null, strings === null || strings === void 0 ? void 0 : strings.actionButtonContent)));
+                React.createElement(Text, null, strings === null || strings === void 0 ? void 0 : strings.actionButtonContent))));
     };
     const showAsAllowPrompt = !options && !!askDevicePermission;
-    const styles = mergeStyleSets(showAsAllowPrompt ? {
-        title: {
-            paddingRight: '0.625rem'
+    const styles = mergeStyleSets(showAsAllowPrompt
+        ? {
+            title: {
+                paddingRight: '0.625rem'
+            }
         }
-    } : {}, props.styles);
+        : {}, props.styles);
     const click = () => {
         if (askDevicePermission) {
-            void askDevicePermission(constrain !== null && constrain !== void 0 ? constrain : {
-                video: true,
-                audio: true
-            });
+            void askDevicePermission(constrain !== null && constrain !== void 0 ? constrain : { video: true, audio: true });
         }
         onClick === null || onClick === void 0 ? void 0 : onClick();
     };
-    return React.createElement(Dropdown, { role: showAsAllowPrompt ? 'button' : undefined, "data-ui-id": 'permission-dropdown', placeholder: strings === null || strings === void 0 ? void 0 : strings.placeHolderText, label: strings === null || strings === void 0 ? void 0 : strings.label, "aria-labelledby": props.ariaLabelledby, onRenderPlaceholder: onRenderPlaceholder, onRenderCaretDown: showAsAllowPrompt ? () => React.createElement(React.Fragment, null) : undefined, onClick: showAsAllowPrompt ? click : undefined, onKeyDown: showAsAllowPrompt ? e => {
-            if (e.key === 'Enter' || e.key === ' ') {
-                click();
+    return (React.createElement(Dropdown, { role: showAsAllowPrompt ? 'button' : undefined, "data-ui-id": 'permission-dropdown', placeholder: strings === null || strings === void 0 ? void 0 : strings.placeHolderText, label: strings === null || strings === void 0 ? void 0 : strings.label, "aria-labelledby": props.ariaLabelledby, onRenderPlaceholder: onRenderPlaceholder, onRenderCaretDown: showAsAllowPrompt ? () => React.createElement(React.Fragment, null) : undefined, onClick: showAsAllowPrompt ? click : undefined, onKeyDown: showAsAllowPrompt
+            ? (e) => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                    click();
+                }
             }
-        } : undefined, options: options !== null && options !== void 0 ? options : [], styles: styles });
+            : undefined, options: options !== null && options !== void 0 ? options : [], styles: styles }));
 };
 //# sourceMappingURL=DevicePermissionDropdown.js.map

package/dist/dist-esm/react-components/src/components/DevicePermissions/DevicePermissionDropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"DevicePermissionDropdown.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/DevicePermissions/DevicePermissionDropdown.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,QAAQ,EAAoC,KAAK,EAAE,IAAI,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAC1G,OAAO,KAAK,MAAM,OAAO,CAAC;AAkE1B;;;;GAIG;AACH,MAAM,CAAC,MAAM,yBAAyB,GAAG,CAAC,KAAqC,EAAe,EAAE;IAC9F,MAAM,EACJ,IAAI,EACJ,mBAAmB,EACnB,OAAO,EACP,SAAS,EACT,OAAO,EACP,OAAO,EACR,GAAG,KAAK,CAAC;IACV,MAAM,mBAAmB,GAAG,GAAgB,EAAE;QAC5C,OAAO,oBAAC,KAAK,IAAC,UAAU,QAAC,aAAa,EAAC,QAAQ,EAAC,eAAe,EAAC,eAAe;YAC1E,IAAI;YACL,oBAAC,KAAK,CAAC,IAAI,IAAC,MAAM,EAAE;oBACpB,IAAI,EAAE;wBACJ,QAAQ,EAAE,QAAQ;wBAClB,UAAU,EAAE,QAAQ;wBACpB,YAAY,EAAE,UAAU;wBACxB,IAAI,EAAE,CAAC;qBACR;iBACF;gBACG,oBAAC,IAAI,QAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,eAAe,CAAQ,CAC5B;YACb,oBAAC,KAAK,CAAC,IAAI,IAAC,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE;oBAC/B,IAAI,EAAE;wBACJ,WAAW,EAAE,QAAQ;qBACtB;iBACF;gBACG,oBAAC,IAAI,QAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,mBAAmB,CAAQ,CAChC,CACP,CAAC;IACb,CAAC,CAAC;IACF,MAAM,iBAAiB,GAAG,CAAC,OAAO,IAAI,CAAC,CAAC,mBAAmB,CAAC;IAC5D,MAAM,MAAM,GAAG,cAAc,CAAC,iBAAiB,CAAC,CAAC,CAAC;QAChD,KAAK,EAAE;YACL,YAAY,EAAE,UAAU;SACzB;KACF,CAAC,CAAC,CAAC,EAAE,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IACtB,MAAM,KAAK,GAAG,GAAS,EAAE;QACvB,IAAI,mBAAmB,EAAE,CAAC;YACxB,KAAK,mBAAmB,CAAC,SAAS,aAAT,SAAS,cAAT,SAAS,GAAI;gBACpC,KAAK,EAAE,IAAI;gBACX,KAAK,EAAE,IAAI;aACZ,CAAC,CAAC;QACL,CAAC;QACD,OAAO,aAAP,OAAO,uBAAP,OAAO,EAAI,CAAC;IACd,CAAC,CAAC;IACF,OAAO,oBAAC,QAAQ,IAAC,IAAI,EAAE,iBAAiB,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,gBAAc,qBAAqB,EAAE,WAAW,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,eAAe,EAAE,KAAK,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,KAAK,qBAAmB,KAAK,CAAC,cAAc,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,iBAAiB,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,yCAAK,CAAC,CAAC,CAAC,SAAS,EAAE,OAAO,EAAE,iBAAiB,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,EAAE,SAAS,EAAE,iBAAiB,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE;YACpY,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,EAAE,CAAC;gBACvC,KAAK,EAAE,CAAC;YACV,CAAC;QACH,CAAC,CAAC,CAAC,CAAC,SAAS,EAAE,OAAO,EAAE,OAAO,aAAP,OAAO,cAAP,OAAO,GAAI,EAAE,EAAE,MAAM,EAAE,MAAM,GAAI,CAAC;AAC5D,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { Dropdown, IDropdownOption, IDropdownStyles, Stack, Text, mergeStyleSets } from '@fluentui/react';\nimport React from 'react';\n\n/**\n * Strings of {@link DevicePermissionDropdown} that can be overridden.\n *\n * @internal\n */\nexport interface _DevicePermissionDropdownStrings {\n  /**\n   * dropdown label\n   */\n\n  label?: string;\n  /**\n   * dropdown placeholder\n   */\n  placeHolderText: string;\n  /** string for action button  */\n  actionButtonContent?: string;\n}\n\n/**\n * Props for {@link _DevicePermissionDropdown}.\n *\n * @internal\n */\nexport interface _DevicePermissionDropdownProps {\n  /**\n   * icon shown in dropdown placeholder\n   */\n  icon?: JSX.Element;\n  /**\n   * Dropdown content\n   */\n  options?: IDropdownOption[];\n  /**\n   * Ask for permissions of devices.\n   *\n   * @remarks\n   * Browser permission window will pop up if permissions are not granted yet\n   *\n   * @param constrain - Define constraints for accessing local devices {@link @azure/communication-calling#PermissionConstraints }\n   */\n  askDevicePermission?(constrain: _PermissionConstraints): Promise<void>;\n  /**\n   * Optional callback when component is clicked\n   */\n  onClick?: () => void;\n  /**\n   * Define constraints for accessing local devices  {@link @azure/communication-calling#PermissionConstraints }\n   */\n  constrain?: _PermissionConstraints;\n  /**\n   * Strings for devicepermissiondropdown\n   */\n  strings?: _DevicePermissionDropdownStrings;\n  /**\n   * Styles for devicepermissiondropdown\n   */\n  styles?: Partial<IDropdownStyles>;\n  /**\n   * Aria-labelledby for the dropdown\n   */\n  ariaLabelledby?: string;\n}\n\n/**\n * A dropdown to trigger device permission prompt\n *\n * @internal\n */\nexport const _DevicePermissionDropdown = (props: _DevicePermissionDropdownProps): JSX.Element => {\n  const {\n    icon,\n    askDevicePermission,\n    onClick,\n    constrain,\n    strings,\n    options\n  } = props;\n  const onRenderPlaceholder = (): JSX.Element => {\n    return <Stack horizontal verticalAlign=\"center\" horizontalAlign=\"space-between\">\n        {icon}\n        <Stack.Item styles={{\n        root: {\n          overflow: 'hidden',\n          whiteSpace: 'nowrap',\n          textOverflow: 'ellipsis',\n          flex: 1\n        }\n      }}>\n          <Text>{strings?.placeHolderText}</Text>\n        </Stack.Item>\n        <Stack.Item shrink={0} styles={{\n        root: {\n          paddingLeft: '0.5rem'\n        }\n      }}>\n          <Text>{strings?.actionButtonContent}</Text>\n        </Stack.Item>\n      </Stack>;\n  };\n  const showAsAllowPrompt = !options && !!askDevicePermission;\n  const styles = mergeStyleSets(showAsAllowPrompt ? {\n    title: {\n      paddingRight: '0.625rem'\n    }\n  } : {}, props.styles);\n  const click = (): void => {\n    if (askDevicePermission) {\n      void askDevicePermission(constrain ?? {\n        video: true,\n        audio: true\n      });\n    }\n    onClick?.();\n  };\n  return <Dropdown role={showAsAllowPrompt ? 'button' : undefined} data-ui-id={'permission-dropdown'} placeholder={strings?.placeHolderText} label={strings?.label} aria-labelledby={props.ariaLabelledby} onRenderPlaceholder={onRenderPlaceholder} onRenderCaretDown={showAsAllowPrompt ? () => <></> : undefined} onClick={showAsAllowPrompt ? click : undefined} onKeyDown={showAsAllowPrompt ? e => {\n    if (e.key === 'Enter' || e.key === ' ') {\n      click();\n    }\n  } : undefined} options={options ?? []} styles={styles} />;\n};\n\n/**\n * Define constraints for accessing local devices  {@link @azure/communication-calling#PermissionConstraints }\n *\n * @internal\n */\nexport type _PermissionConstraints = {\n  audio: boolean;\n  video: boolean;\n};"]}
+{"version":3,"file":"DevicePermissionDropdown.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/DevicePermissions/DevicePermissionDropdown.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,QAAQ,EAAoC,KAAK,EAAE,IAAI,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAC1G,OAAO,KAAK,MAAM,OAAO,CAAC;AAkE1B;;;;GAIG;AACH,MAAM,CAAC,MAAM,yBAAyB,GAAG,CAAC,KAAqC,EAAe,EAAE;IAC9F,MAAM,EAAE,IAAI,EAAE,mBAAmB,EAAE,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC;IAElF,MAAM,mBAAmB,GAAG,GAAgB,EAAE;QAC5C,OAAO,CACL,oBAAC,KAAK,IAAC,UAAU,QAAC,aAAa,EAAC,QAAQ,EAAC,eAAe,EAAC,eAAe;YACrE,IAAI;YACL,oBAAC,KAAK,CAAC,IAAI,IACT,MAAM,EAAE;oBACN,IAAI,EAAE;wBACJ,QAAQ,EAAE,QAAQ;wBAClB,UAAU,EAAE,QAAQ;wBACpB,YAAY,EAAE,UAAU;wBACxB,IAAI,EAAE,CAAC;qBACR;iBACF;gBAED,oBAAC,IAAI,QAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,eAAe,CAAQ,CAC5B;YACb,oBAAC,KAAK,CAAC,IAAI,IACT,MAAM,EAAE,CAAC,EACT,MAAM,EAAE;oBACN,IAAI,EAAE;wBACJ,WAAW,EAAE,QAAQ;qBACtB;iBACF;gBAED,oBAAC,IAAI,QAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,mBAAmB,CAAQ,CAChC,CACP,CACT,CAAC;IACJ,CAAC,CAAC;IAEF,MAAM,iBAAiB,GAAG,CAAC,OAAO,IAAI,CAAC,CAAC,mBAAmB,CAAC;IAC5D,MAAM,MAAM,GAAG,cAAc,CAC3B,iBAAiB;QACf,CAAC,CAAC;YACE,KAAK,EAAE;gBACL,YAAY,EAAE,UAAU;aACzB;SACF;QACH,CAAC,CAAC,EAAE,EACN,KAAK,CAAC,MAAM,CACb,CAAC;IAEF,MAAM,KAAK,GAAG,GAAS,EAAE;QACvB,IAAI,mBAAmB,EAAE,CAAC;YACxB,KAAK,mBAAmB,CAAC,SAAS,aAAT,SAAS,cAAT,SAAS,GAAI,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC;QACtE,CAAC;QACD,OAAO,aAAP,OAAO,uBAAP,OAAO,EAAI,CAAC;IACd,CAAC,CAAC;IAEF,OAAO,CACL,oBAAC,QAAQ,IACP,IAAI,EAAE,iBAAiB,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,gBAClC,qBAAqB,EACjC,WAAW,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,eAAe,EACrC,KAAK,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,KAAK,qBACJ,KAAK,CAAC,cAAc,EACrC,mBAAmB,EAAE,mBAAmB,EACxC,iBAAiB,EAAE,iBAAiB,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,yCAAK,CAAC,CAAC,CAAC,SAAS,EAC9D,OAAO,EAAE,iBAAiB,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,EAC9C,SAAS,EACP,iBAAiB;YACf,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE;gBACJ,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,EAAE,CAAC;oBACvC,KAAK,EAAE,CAAC;gBACV,CAAC;YACH,CAAC;YACH,CAAC,CAAC,SAAS,EAEf,OAAO,EAAE,OAAO,aAAP,OAAO,cAAP,OAAO,GAAI,EAAE,EACtB,MAAM,EAAE,MAAM,GACd,CACH,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { Dropdown, IDropdownOption, IDropdownStyles, Stack, Text, mergeStyleSets } from '@fluentui/react';\nimport React from 'react';\n\n/**\n * Strings of {@link DevicePermissionDropdown} that can be overridden.\n *\n * @internal\n */\nexport interface _DevicePermissionDropdownStrings {\n  /**\n   * dropdown label\n   */\n\n  label?: string;\n  /**\n   * dropdown placeholder\n   */\n  placeHolderText: string;\n  /** string for action button  */\n  actionButtonContent?: string;\n}\n\n/**\n * Props for {@link _DevicePermissionDropdown}.\n *\n * @internal\n */\nexport interface _DevicePermissionDropdownProps {\n  /**\n   * icon shown in dropdown placeholder\n   */\n  icon?: JSX.Element;\n  /**\n   * Dropdown content\n   */\n  options?: IDropdownOption[];\n  /**\n   * Ask for permissions of devices.\n   *\n   * @remarks\n   * Browser permission window will pop up if permissions are not granted yet\n   *\n   * @param constrain - Define constraints for accessing local devices {@link @azure/communication-calling#PermissionConstraints }\n   */\n  askDevicePermission?(constrain: _PermissionConstraints): Promise<void>;\n  /**\n   * Optional callback when component is clicked\n   */\n  onClick?: () => void;\n  /**\n   * Define constraints for accessing local devices  {@link @azure/communication-calling#PermissionConstraints }\n   */\n  constrain?: _PermissionConstraints;\n  /**\n   * Strings for devicepermissiondropdown\n   */\n  strings?: _DevicePermissionDropdownStrings;\n  /**\n   * Styles for devicepermissiondropdown\n   */\n  styles?: Partial<IDropdownStyles>;\n  /**\n   * Aria-labelledby for the dropdown\n   */\n  ariaLabelledby?: string;\n}\n\n/**\n * A dropdown to trigger device permission prompt\n *\n * @internal\n */\nexport const _DevicePermissionDropdown = (props: _DevicePermissionDropdownProps): JSX.Element => {\n  const { icon, askDevicePermission, onClick, constrain, strings, options } = props;\n\n  const onRenderPlaceholder = (): JSX.Element => {\n    return (\n      <Stack horizontal verticalAlign=\"center\" horizontalAlign=\"space-between\">\n        {icon}\n        <Stack.Item\n          styles={{\n            root: {\n              overflow: 'hidden',\n              whiteSpace: 'nowrap',\n              textOverflow: 'ellipsis',\n              flex: 1\n            }\n          }}\n        >\n          <Text>{strings?.placeHolderText}</Text>\n        </Stack.Item>\n        <Stack.Item\n          shrink={0}\n          styles={{\n            root: {\n              paddingLeft: '0.5rem'\n            }\n          }}\n        >\n          <Text>{strings?.actionButtonContent}</Text>\n        </Stack.Item>\n      </Stack>\n    );\n  };\n\n  const showAsAllowPrompt = !options && !!askDevicePermission;\n  const styles = mergeStyleSets(\n    showAsAllowPrompt\n      ? {\n          title: {\n            paddingRight: '0.625rem'\n          }\n        }\n      : {},\n    props.styles\n  );\n\n  const click = (): void => {\n    if (askDevicePermission) {\n      void askDevicePermission(constrain ?? { video: true, audio: true });\n    }\n    onClick?.();\n  };\n\n  return (\n    <Dropdown\n      role={showAsAllowPrompt ? 'button' : undefined}\n      data-ui-id={'permission-dropdown'}\n      placeholder={strings?.placeHolderText}\n      label={strings?.label}\n      aria-labelledby={props.ariaLabelledby}\n      onRenderPlaceholder={onRenderPlaceholder}\n      onRenderCaretDown={showAsAllowPrompt ? () => <></> : undefined}\n      onClick={showAsAllowPrompt ? click : undefined}\n      onKeyDown={\n        showAsAllowPrompt\n          ? (e) => {\n              if (e.key === 'Enter' || e.key === ' ') {\n                click();\n              }\n            }\n          : undefined\n      }\n      options={options ?? []}\n      styles={styles}\n    />\n  );\n};\n\n/**\n * Define constraints for accessing local devices  {@link @azure/communication-calling#PermissionConstraints }\n *\n * @internal\n */\nexport type _PermissionConstraints = {\n  audio: boolean;\n  video: boolean;\n};\n"]}

package/dist/dist-esm/react-components/src/components/DevicePermissions/SitePermissions.d.ts

@@ -0,0 +1,105 @@
+/// <reference types="react" />
+import { SitePermissionsStrings, SitePermissionsStyles } from './SitePermissionsScaffolding';
+/**
+ * @beta
+ * Props for SitePermissions components.
+ */
+export interface CommonSitePermissionsProps {
+    /**
+     * Name of application calling experience is in.
+     */
+    appName: string;
+    /**
+     * Kind of the Site Permissions component.
+     */
+    kind: 'request' | 'denied' | 'check';
+    /**
+     * Type of the browser used, the Site permission component will show different guidance text based on the browser type
+     */
+    browserHint?: 'safari' | 'unset';
+    /**
+     * Action to be taken by the more help link. Possible to send to external page or show other modal.
+     * If this is not provided the button will not be shown.
+     */
+    onTroubleshootingClick?: () => void;
+    /**
+     * Action that is taken when the user clicks the continue anyway button.
+     * If this is not provided the button will not be shown.
+     */
+    onContinueAnywayClick?: () => void;
+    /**
+     * Styles for SitePermissions component.
+     */
+    styles?: SitePermissionsStyles;
+}
+/**
+ * @beta
+ * Strings for CameraAndMicrophoneSitePermissions component.
+ */
+export type CameraAndMicrophoneSitePermissionsStrings = SitePermissionsStrings;
+/**
+ * @beta
+ * Props for CameraAndMicrophoneSitePermissions component.
+ */
+export interface CameraAndMicrophoneSitePermissionsProps extends CommonSitePermissionsProps {
+    /** Icon name for the camera icon */
+    cameraIconName?: string;
+    /** Icon name for the microphone icon */
+    microphoneIconName?: string;
+    /** Icon name for the central icon between the camera and microphone icons */
+    connectorIconName?: string;
+    /** Strings for use with the {@link CameraAndMicrophoneSitePermissions} */
+    strings?: CameraAndMicrophoneSitePermissionsStrings;
+}
+/**
+ * @beta
+ *
+ * Component to allow Contoso to help their end user with their devices should their permissions be blocked
+ * by their browsers settings.
+ */
+export declare const CameraAndMicrophoneSitePermissions: (props: CameraAndMicrophoneSitePermissionsProps) => JSX.Element;
+/**
+ * @beta
+ * Strings for MicrophoneSitePermissions component.
+ */
+export type MicrophoneSitePermissionsStrings = SitePermissionsStrings;
+/**
+ * @beta
+ * Props for MicrophoneSitePermissions component.
+ */
+export interface MicrophoneSitePermissionsProps extends CommonSitePermissionsProps {
+    /** Icon name for the microphone icon */
+    microphoneIconName?: string;
+    /** Strings for use with the {@link MicrophoneSitePermissions} */
+    strings?: MicrophoneSitePermissionsStrings;
+}
+/**
+ * Component to allow Contoso to help their end user with their devices should their permissions be blocked
+ * by their browsers settings.
+ *
+ * @beta
+ */
+export declare const MicrophoneSitePermissions: (props: MicrophoneSitePermissionsProps) => JSX.Element;
+/**
+ * @beta
+ * Strings for CameraSitePermissions component.
+ */
+export type CameraSitePermissionsStrings = SitePermissionsStrings;
+/**
+ * @beta
+ * Props for CameraSitePermissions component.
+ */
+export interface CameraSitePermissionsProps extends CommonSitePermissionsProps {
+    /** Icon name for the camera icon */
+    cameraIconName?: string;
+    /** Strings for use with the {@link CameraSitePermissions} */
+    strings?: CameraSitePermissionsStrings;
+}
+/**
+ * Component to allow Contoso to help their end user with their devices should their permissions be blocked
+ * by their browsers settings.
+ *
+ * @beta
+ */
+export declare const CameraSitePermissions: (props: CameraSitePermissionsProps) => JSX.Element;
+//# sourceMappingURL=SitePermissions.d.ts.map

package/dist/dist-esm/react-components/src/components/DevicePermissions/SitePermissions.js

@@ -0,0 +1,86 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+import React from 'react';
+/* @conditional-compile-remove(call-readiness) */
+import { useLocale } from '../../localization';
+/* @conditional-compile-remove(call-readiness) */
+import { SitePermissionsContainer } from './SitePermissionsScaffolding';
+/* @conditional-compile-remove(call-readiness) */
+import { useShallowMerge } from '../utils/merge';
+/**
+ * @beta
+ *
+ * Component to allow Contoso to help their end user with their devices should their permissions be blocked
+ * by their browsers settings.
+ */
+export const CameraAndMicrophoneSitePermissions = (props) => {
+    var _a, _b, _c;
+    /* @conditional-compile-remove(call-readiness) */
+    const locale = useLocale().strings;
+    /* @conditional-compile-remove(call-readiness) */
+    const strings = useShallowMerge(props.kind === 'denied'
+        ? props.browserHint === 'safari'
+            ? locale.CameraAndMicrophoneSitePermissionsDeniedSafari
+            : locale.CameraAndMicrophoneSitePermissionsDenied
+        : props.kind === 'request'
+            ? locale.CameraAndMicrophoneSitePermissionsRequest
+            : locale.CameraAndMicrophoneSitePermissionsCheck, props.strings);
+    /* @conditional-compile-remove(call-readiness) */
+    const cameraIconName = ((_a = props.microphoneIconName) !== null && _a !== void 0 ? _a : props.kind === 'denied') ? 'SitePermissionCameraDenied' : 'SitePermissionCamera';
+    /* @conditional-compile-remove(call-readiness) */
+    const microphoneIconName = ((_b = props.microphoneIconName) !== null && _b !== void 0 ? _b : props.kind === 'denied') ? 'SitePermissionMicDenied' : 'SitePermissionMic';
+    /* @conditional-compile-remove(call-readiness) */
+    const connectorIconName = (_c = props.microphoneIconName) !== null && _c !== void 0 ? _c : 'SitePermissionsSparkle';
+    /* @conditional-compile-remove(call-readiness) */
+    return (React.createElement(SitePermissionsContainer, Object.assign({}, props, { strings: strings, cameraIconName: cameraIconName, connectorIconName: connectorIconName, microphoneIconName: microphoneIconName, onPrimaryButtonClick: props.onContinueAnywayClick })));
+    return React.createElement(React.Fragment, null);
+};
+/**
+ * Component to allow Contoso to help their end user with their devices should their permissions be blocked
+ * by their browsers settings.
+ *
+ * @beta
+ */
+export const MicrophoneSitePermissions = (props) => {
+    var _a;
+    /* @conditional-compile-remove(call-readiness) */
+    const locale = useLocale().strings;
+    /* @conditional-compile-remove(call-readiness) */
+    const strings = useShallowMerge(props.kind === 'denied'
+        ? props.browserHint === 'safari'
+            ? locale.MicrophoneSitePermissionsDeniedSafari
+            : locale.MicrophoneSitePermissionsDenied
+        : props.kind === 'request'
+            ? locale.MicrophoneSitePermissionsRequest
+            : locale.MicrophoneSitePermissionsCheck, props.strings);
+    /* @conditional-compile-remove(call-readiness) */
+    const iconName = ((_a = props.microphoneIconName) !== null && _a !== void 0 ? _a : props.kind === 'denied') ? 'SitePermissionMicDenied' : 'SitePermissionMic';
+    /* @conditional-compile-remove(call-readiness) */
+    return (React.createElement(SitePermissionsContainer, Object.assign({}, props, { strings: strings, cameraIconName: iconName, onPrimaryButtonClick: props.onContinueAnywayClick })));
+    return React.createElement(React.Fragment, null);
+};
+/**
+ * Component to allow Contoso to help their end user with their devices should their permissions be blocked
+ * by their browsers settings.
+ *
+ * @beta
+ */
+export const CameraSitePermissions = (props) => {
+    var _a;
+    /* @conditional-compile-remove(call-readiness) */
+    const locale = useLocale().strings;
+    /* @conditional-compile-remove(call-readiness) */
+    const strings = useShallowMerge(props.kind === 'denied'
+        ? props.browserHint === 'safari'
+            ? locale.CameraSitePermissionsDeniedSafari
+            : locale.CameraSitePermissionsDenied
+        : props.kind === 'request'
+            ? locale.CameraSitePermissionsRequest
+            : locale.CameraSitePermissionsCheck, props.strings);
+    /* @conditional-compile-remove(call-readiness) */
+    const iconName = ((_a = props.cameraIconName) !== null && _a !== void 0 ? _a : props.kind === 'denied') ? 'SitePermissionCameraDenied' : 'SitePermissionCamera';
+    /* @conditional-compile-remove(call-readiness) */
+    return (React.createElement(SitePermissionsContainer, Object.assign({}, props, { strings: strings, microphoneIconName: iconName, onPrimaryButtonClick: props.onContinueAnywayClick })));
+    return React.createElement(React.Fragment, null);
+};
+//# sourceMappingURL=SitePermissions.js.map

package/dist/dist-esm/react-components/src/components/DevicePermissions/SitePermissions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SitePermissions.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/DevicePermissions/SitePermissions.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\n/* @conditional-compile-remove(call-readiness) */\nimport { useLocale } from '../../localization';\nimport { SitePermissionsStrings, SitePermissionsStyles } from './SitePermissionsScaffolding';\n/* @conditional-compile-remove(call-readiness) */\nimport { SitePermissionsContainer } from './SitePermissionsScaffolding';\n/* @conditional-compile-remove(call-readiness) */\nimport { useShallowMerge } from '../utils/merge';\n\n/**\n * @beta\n * Props for SitePermissions components.\n */\nexport interface CommonSitePermissionsProps {\n  /**\n   * Name of application calling experience is in.\n   */\n  appName: string;\n  /**\n   * Kind of the Site Permissions component.\n   */\n  kind: 'request' | 'denied' | 'check';\n  /**\n   * Type of the browser used, the Site permission component will show different guidance text based on the browser type\n   */\n  browserHint?: 'safari' | 'unset';\n  /**\n   * Action to be taken by the more help link. Possible to send to external page or show other modal.\n   * If this is not provided the button will not be shown.\n   */\n  onTroubleshootingClick?: () => void;\n  /**\n   * Action that is taken when the user clicks the continue anyway button.\n   * If this is not provided the button will not be shown.\n   */\n  onContinueAnywayClick?: () => void;\n  /**\n   * Styles for SitePermissions component.\n   */\n  styles?: SitePermissionsStyles;\n}\n\n/**\n * @beta\n * Strings for CameraAndMicrophoneSitePermissions component.\n */\nexport type CameraAndMicrophoneSitePermissionsStrings = SitePermissionsStrings;\n\n/**\n * @beta\n * Props for CameraAndMicrophoneSitePermissions component.\n */\nexport interface CameraAndMicrophoneSitePermissionsProps extends CommonSitePermissionsProps {\n  /** Icon name for the camera icon */\n  cameraIconName?: string;\n  /** Icon name for the microphone icon */\n  microphoneIconName?: string;\n  /** Icon name for the central icon between the camera and microphone icons */\n  connectorIconName?: string;\n  /** Strings for use with the {@link CameraAndMicrophoneSitePermissions} */\n  strings?: CameraAndMicrophoneSitePermissionsStrings;\n}\n\n/**\n * @beta\n *\n * Component to allow Contoso to help their end user with their devices should their permissions be blocked\n * by their browsers settings.\n */\nexport const CameraAndMicrophoneSitePermissions = (props: CameraAndMicrophoneSitePermissionsProps): JSX.Element => {\n  /* @conditional-compile-remove(call-readiness) */\n  const locale = useLocale().strings;\n\n  /* @conditional-compile-remove(call-readiness) */\n  const strings = useShallowMerge(\n    props.kind === 'denied'\n      ? props.browserHint === 'safari'\n        ? locale.CameraAndMicrophoneSitePermissionsDeniedSafari\n        : locale.CameraAndMicrophoneSitePermissionsDenied\n      : props.kind === 'request'\n        ? locale.CameraAndMicrophoneSitePermissionsRequest\n        : locale.CameraAndMicrophoneSitePermissionsCheck,\n    props.strings\n  );\n\n  /* @conditional-compile-remove(call-readiness) */\n  const cameraIconName =\n    props.microphoneIconName ?? props.kind === 'denied' ? 'SitePermissionCameraDenied' : 'SitePermissionCamera';\n  /* @conditional-compile-remove(call-readiness) */\n  const microphoneIconName =\n    props.microphoneIconName ?? props.kind === 'denied' ? 'SitePermissionMicDenied' : 'SitePermissionMic';\n  /* @conditional-compile-remove(call-readiness) */\n  const connectorIconName = props.microphoneIconName ?? 'SitePermissionsSparkle';\n\n  /* @conditional-compile-remove(call-readiness) */\n  return (\n    <SitePermissionsContainer\n      {...props}\n      strings={strings}\n      cameraIconName={cameraIconName}\n      connectorIconName={connectorIconName}\n      microphoneIconName={microphoneIconName}\n      onPrimaryButtonClick={props.onContinueAnywayClick}\n    />\n  );\n  return <></>;\n};\n\n/**\n * @beta\n * Strings for MicrophoneSitePermissions component.\n */\nexport type MicrophoneSitePermissionsStrings = SitePermissionsStrings;\n\n/**\n * @beta\n * Props for MicrophoneSitePermissions component.\n */\nexport interface MicrophoneSitePermissionsProps extends CommonSitePermissionsProps {\n  /** Icon name for the microphone icon */\n  microphoneIconName?: string;\n  /** Strings for use with the {@link MicrophoneSitePermissions} */\n  strings?: MicrophoneSitePermissionsStrings;\n}\n\n/**\n * Component to allow Contoso to help their end user with their devices should their permissions be blocked\n * by their browsers settings.\n *\n * @beta\n */\nexport const MicrophoneSitePermissions = (props: MicrophoneSitePermissionsProps): JSX.Element => {\n  /* @conditional-compile-remove(call-readiness) */\n  const locale = useLocale().strings;\n\n  /* @conditional-compile-remove(call-readiness) */\n  const strings = useShallowMerge(\n    props.kind === 'denied'\n      ? props.browserHint === 'safari'\n        ? locale.MicrophoneSitePermissionsDeniedSafari\n        : locale.MicrophoneSitePermissionsDenied\n      : props.kind === 'request'\n        ? locale.MicrophoneSitePermissionsRequest\n        : locale.MicrophoneSitePermissionsCheck,\n    props.strings\n  );\n\n  /* @conditional-compile-remove(call-readiness) */\n  const iconName =\n    props.microphoneIconName ?? props.kind === 'denied' ? 'SitePermissionMicDenied' : 'SitePermissionMic';\n\n  /* @conditional-compile-remove(call-readiness) */\n  return (\n    <SitePermissionsContainer\n      {...props}\n      strings={strings}\n      cameraIconName={iconName}\n      onPrimaryButtonClick={props.onContinueAnywayClick}\n    />\n  );\n  return <></>;\n};\n\n/**\n * @beta\n * Strings for CameraSitePermissions component.\n */\nexport type CameraSitePermissionsStrings = SitePermissionsStrings;\n\n/**\n * @beta\n * Props for CameraSitePermissions component.\n */\nexport interface CameraSitePermissionsProps extends CommonSitePermissionsProps {\n  /** Icon name for the camera icon */\n  cameraIconName?: string;\n  /** Strings for use with the {@link CameraSitePermissions} */\n  strings?: CameraSitePermissionsStrings;\n}\n\n/**\n * Component to allow Contoso to help their end user with their devices should their permissions be blocked\n * by their browsers settings.\n *\n * @beta\n */\nexport const CameraSitePermissions = (props: CameraSitePermissionsProps): JSX.Element => {\n  /* @conditional-compile-remove(call-readiness) */\n  const locale = useLocale().strings;\n\n  /* @conditional-compile-remove(call-readiness) */\n  const strings = useShallowMerge(\n    props.kind === 'denied'\n      ? props.browserHint === 'safari'\n        ? locale.CameraSitePermissionsDeniedSafari\n        : locale.CameraSitePermissionsDenied\n      : props.kind === 'request'\n        ? locale.CameraSitePermissionsRequest\n        : locale.CameraSitePermissionsCheck,\n    props.strings\n  );\n\n  /* @conditional-compile-remove(call-readiness) */\n  const iconName =\n    props.cameraIconName ?? props.kind === 'denied' ? 'SitePermissionCameraDenied' : 'SitePermissionCamera';\n\n  /* @conditional-compile-remove(call-readiness) */\n  return (\n    <SitePermissionsContainer\n      {...props}\n      strings={strings}\n      microphoneIconName={iconName}\n      onPrimaryButtonClick={props.onContinueAnywayClick}\n    />\n  );\n  return <></>;\n};\n"]}

package/dist/dist-esm/react-components/src/components/DevicePermissions/SitePermissionsScaffolding.d.ts

@@ -0,0 +1,86 @@
+/// <reference types="react" />
+import { ILinkStyles, IButtonStyles } from '@fluentui/react';
+import { BaseCustomStyles } from '../../types';
+/**
+ * @private
+ * Props for SitePermissions component.
+ */
+export interface SitePermissionsContainerProps {
+    /**
+     * Name of application calling experience is in.
+     */
+    appName?: string;
+    /**
+     * Name of icon to be used for the camera icon.
+     * If this is not provided the icon will not be shown.
+     */
+    cameraIconName?: string;
+    /**
+     * Name of icon to be used for the sparkle icon.
+     * If this is not provided the icon will not be shown.
+     */
+    connectorIconName?: string;
+    /**
+     * Name of icon to be used for the mic icon.
+     * If this is not provided the icon will not be shown.
+     */
+    microphoneIconName?: string;
+    /**
+     * Action to be taken by the more help link. Possible to send to external page or show other modal.
+     * If this is not provided the button will not be shown.
+     */
+    onTroubleshootingClick?: () => void;
+    /**
+     * Action that is taken when the user clicks an optional primary button.
+     * If this is not provided the button will not be shown.
+     */
+    onPrimaryButtonClick?: () => void;
+    /**
+     * Localization strings for SitePermissions component.
+     */
+    strings?: SitePermissionsStrings;
+    /**
+     * Styles for SitePermissions component.
+     */
+    styles?: SitePermissionsStyles;
+}
+/**
+ * @beta
+ * Strings for SitePermissions component
+ */
+export type SitePermissionsStrings = {
+    /**
+     * Main text string.
+     */
+    primaryText?: string;
+    /**
+     * Subtext string.
+     */
+    secondaryText?: string;
+    /**
+     * More help link string.
+     */
+    linkText?: string;
+    /**
+     * Primary button text string.
+     */
+    primaryButtonText?: string;
+    /**
+     * Aria label describing the content of the container
+     */
+    ariaLabel?: string;
+};
+/**
+ * Fluent styles for {@link SitePermissionsContainer}.
+ *
+ * @beta
+ */
+export interface SitePermissionsStyles extends BaseCustomStyles {
+    /** Styles for the primary button. */
+    primaryButton?: IButtonStyles;
+    /** Styles for the help troubleshooting link text. */
+    troubleshootingLink?: ILinkStyles;
+}
+/** @private */
+export declare const SitePermissionsContainer: (props: SitePermissionsContainerProps) => JSX.Element;
+//# sourceMappingURL=SitePermissionsScaffolding.d.ts.map

package/dist/dist-esm/react-components/src/components/DevicePermissions/SitePermissionsScaffolding.js

@@ -0,0 +1,32 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+import React from 'react';
+import { Stack, Text, Link, Icon, useTheme, PrimaryButton, mergeStyleSets } from '@fluentui/react';
+import { _formatString } from "../../../../acs-ui-common/src";
+import { iconBannerContainerStyles, iconContainerStyles, iconPrimaryStyles, linkTextStyles, primaryButtonStyles, primaryTextStyles, secondaryTextStyles, sparkleIconBackdropStyles, textContainerStyles } from '../styles/SitePermissions.styles';
+import { isValidString } from '../utils';
+/**
+ * spacing for the icons in the banner.
+ */
+const tokens = { childrenGap: '2rem' };
+/** @private */
+export const SitePermissionsContainer = (props) => {
+    var _a, _b;
+    const { appName, onTroubleshootingClick, onPrimaryButtonClick, strings } = props;
+    const theme = useTheme();
+    const showPrimaryButton = onPrimaryButtonClick && isValidString(strings === null || strings === void 0 ? void 0 : strings.primaryButtonText);
+    return (React.createElement(Stack, { style: { padding: '2rem', maxWidth: '25.375rem', alignSelf: 'center' }, "aria-label": strings === null || strings === void 0 ? void 0 : strings.ariaLabel },
+        React.createElement(Stack, { styles: iconBannerContainerStyles, horizontal: true, horizontalAlign: 'center', verticalFill: true, tokens: tokens },
+            props.cameraIconName && (React.createElement(Stack, null,
+                React.createElement(Icon, { styles: iconPrimaryStyles, iconName: props.cameraIconName }))),
+            props.connectorIconName && (React.createElement(Stack, { styles: iconContainerStyles, horizontal: true },
+                React.createElement(Icon, { styles: sparkleIconBackdropStyles(theme), iconName: props.connectorIconName }))),
+            props.microphoneIconName && (React.createElement(Stack, null,
+                React.createElement(Icon, { styles: iconPrimaryStyles, iconName: props.microphoneIconName })))),
+        React.createElement(Stack, { styles: textContainerStyles },
+            strings && isValidString(strings === null || strings === void 0 ? void 0 : strings.primaryText) && (React.createElement(Text, { styles: primaryTextStyles, role: "alert", "aria-live": "assertive" }, appName ? _formatString(strings.primaryText, { appName: appName }) : strings.primaryText)),
+            strings && isValidString(strings === null || strings === void 0 ? void 0 : strings.secondaryText) && (React.createElement(Text, { styles: secondaryTextStyles }, strings === null || strings === void 0 ? void 0 : strings.secondaryText)),
+            showPrimaryButton && (React.createElement(PrimaryButton, { styles: mergeStyleSets(primaryButtonStyles, (_a = props.styles) === null || _a === void 0 ? void 0 : _a.primaryButton), text: strings === null || strings === void 0 ? void 0 : strings.primaryButtonText, onClick: onPrimaryButtonClick, autoFocus: true })),
+            onTroubleshootingClick && isValidString(strings === null || strings === void 0 ? void 0 : strings.linkText) && (React.createElement(Link, { styles: mergeStyleSets(linkTextStyles, (_b = props.styles) === null || _b === void 0 ? void 0 : _b.troubleshootingLink), onClick: onTroubleshootingClick, autoFocus: !showPrimaryButton }, strings === null || strings === void 0 ? void 0 : strings.linkText)))));
+};
+//# sourceMappingURL=SitePermissionsScaffolding.js.map

package/dist/dist-esm/react-components/src/components/DevicePermissions/SitePermissionsScaffolding.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SitePermissionsScaffolding.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/DevicePermissions/SitePermissionsScaffolding.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\nimport {\n  Stack,\n  Text,\n  Link,\n  Icon,\n  useTheme,\n  PrimaryButton,\n  ILinkStyles,\n  IButtonStyles,\n  mergeStyleSets\n} from '@fluentui/react';\nimport { _formatString, _pxToRem } from '@internal/acs-ui-common';\nimport {\n  iconBannerContainerStyles,\n  iconContainerStyles,\n  iconPrimaryStyles,\n  linkTextStyles,\n  primaryButtonStyles,\n  primaryTextStyles,\n  secondaryTextStyles,\n  sparkleIconBackdropStyles,\n  textContainerStyles\n} from '../styles/SitePermissions.styles';\nimport { isValidString } from '../utils';\nimport { BaseCustomStyles } from '../../types';\n\n/**\n * @private\n * Props for SitePermissions component.\n */\nexport interface SitePermissionsContainerProps {\n  /**\n   * Name of application calling experience is in.\n   */\n  appName?: string;\n  /**\n   * Name of icon to be used for the camera icon.\n   * If this is not provided the icon will not be shown.\n   */\n  cameraIconName?: string;\n  /**\n   * Name of icon to be used for the sparkle icon.\n   * If this is not provided the icon will not be shown.\n   */\n  connectorIconName?: string;\n  /**\n   * Name of icon to be used for the mic icon.\n   * If this is not provided the icon will not be shown.\n   */\n  microphoneIconName?: string;\n  /**\n   * Action to be taken by the more help link. Possible to send to external page or show other modal.\n   * If this is not provided the button will not be shown.\n   */\n  onTroubleshootingClick?: () => void;\n  /**\n   * Action that is taken when the user clicks an optional primary button.\n   * If this is not provided the button will not be shown.\n   */\n  onPrimaryButtonClick?: () => void;\n  /**\n   * Localization strings for SitePermissions component.\n   */\n  strings?: SitePermissionsStrings;\n  /**\n   * Styles for SitePermissions component.\n   */\n  styles?: SitePermissionsStyles;\n}\n\n/**\n * @beta\n * Strings for SitePermissions component\n */\nexport type SitePermissionsStrings = {\n  /**\n   * Main text string.\n   */\n  primaryText?: string;\n  /**\n   * Subtext string.\n   */\n  secondaryText?: string;\n  /**\n   * More help link string.\n   */\n  linkText?: string;\n  /**\n   * Primary button text string.\n   */\n  primaryButtonText?: string;\n  /**\n   * Aria label describing the content of the container\n   */\n  ariaLabel?: string;\n};\n\n/**\n * Fluent styles for {@link SitePermissionsContainer}.\n *\n * @beta\n */\nexport interface SitePermissionsStyles extends BaseCustomStyles {\n  /** Styles for the primary button. */\n  primaryButton?: IButtonStyles;\n  /** Styles for the help troubleshooting link text. */\n  troubleshootingLink?: ILinkStyles;\n}\n\n/**\n * spacing for the icons in the banner.\n */\nconst tokens = { childrenGap: '2rem' };\n\n/** @private */\nexport const SitePermissionsContainer = (props: SitePermissionsContainerProps): JSX.Element => {\n  const { appName, onTroubleshootingClick, onPrimaryButtonClick, strings } = props;\n  const theme = useTheme();\n\n  const showPrimaryButton = onPrimaryButtonClick && isValidString(strings?.primaryButtonText);\n\n  return (\n    <Stack style={{ padding: '2rem', maxWidth: '25.375rem', alignSelf: 'center' }} aria-label={strings?.ariaLabel}>\n      <Stack styles={iconBannerContainerStyles} horizontal horizontalAlign={'center'} verticalFill tokens={tokens}>\n        {props.cameraIconName && (\n          <Stack>\n            <Icon styles={iconPrimaryStyles} iconName={props.cameraIconName}></Icon>\n          </Stack>\n        )}\n        {props.connectorIconName && (\n          <Stack styles={iconContainerStyles} horizontal>\n            <Icon styles={sparkleIconBackdropStyles(theme)} iconName={props.connectorIconName}></Icon>\n          </Stack>\n        )}\n        {props.microphoneIconName && (\n          <Stack>\n            <Icon styles={iconPrimaryStyles} iconName={props.microphoneIconName}></Icon>\n          </Stack>\n        )}\n      </Stack>\n      <Stack styles={textContainerStyles}>\n        {strings && isValidString(strings?.primaryText) && (\n          <Text styles={primaryTextStyles} role=\"alert\" aria-live=\"assertive\">\n            {appName ? _formatString(strings.primaryText, { appName: appName }) : strings.primaryText}\n          </Text>\n        )}\n        {strings && isValidString(strings?.secondaryText) && (\n          <Text styles={secondaryTextStyles}>{strings?.secondaryText}</Text>\n        )}\n\n        {showPrimaryButton && (\n          <PrimaryButton\n            styles={mergeStyleSets(primaryButtonStyles, props.styles?.primaryButton)}\n            text={strings?.primaryButtonText}\n            onClick={onPrimaryButtonClick}\n            autoFocus\n          />\n        )}\n        {onTroubleshootingClick && isValidString(strings?.linkText) && (\n          <Link\n            styles={mergeStyleSets(linkTextStyles, props.styles?.troubleshootingLink)}\n            onClick={onTroubleshootingClick}\n            autoFocus={!showPrimaryButton}\n          >\n            {strings?.linkText}\n          </Link>\n        )}\n      </Stack>\n    </Stack>\n  );\n};\n"]}

package/dist/dist-esm/react-components/src/components/DevicesButton.js

@@ -42,24 +42,21 @@ export const generateDefaultDeviceMenuProps = (props, strings, primaryActionItem
             itemType: ContextualMenuItemType.Section,
             sectionProps: {
                 title: strings.cameraMenuTitle,
-                items: [{
+                items: [
+                    {
                         key: 'sectionCamera',
                         title: strings.cameraMenuTooltip,
                         subMenuProps: {
                             calloutProps: {
                                 preventDismissOnEvent
                             },
-                            items: cameras.map(camera => ({
+                            items: cameras.map((camera) => ({
                                 key: camera.id,
                                 text: camera.name,
                                 title: camera.name,
                                 iconProps: {
                                     iconName: 'ContextMenuCameraIcon',
-                                    styles: {
-                                        root: {
-                                            lineHeight: 0
-                                        }
-                                    }
+                                    styles: { root: { lineHeight: 0 } }
                                 },
                                 itemProps: {
                                     styles: menuItemStyles
@@ -74,7 +71,8 @@ export const generateDefaultDeviceMenuProps = (props, strings, primaryActionItem
                             }))
                         },
                         text: selectedCamera.name
-                    }]
+                    }
+                ]
             }
         });
         if (primaryActionItem) {
@@ -91,14 +89,15 @@ export const generateDefaultDeviceMenuProps = (props, strings, primaryActionItem
             itemType: ContextualMenuItemType.Section,
             sectionProps: {
                 title: strings.microphoneMenuTitle,
-                items: [{
+                items: [
+                    {
                         key: key,
                         title: title,
                         subMenuProps: {
                             calloutProps: {
                                 preventDismissOnEvent
                             },
-                            items: microphones.map(microphone => ({
+                            items: microphones.map((microphone) => ({
                                 key: microphone.id,
                                 text: microphone.name,
                                 title: microphone.name,
@@ -107,11 +106,7 @@ export const generateDefaultDeviceMenuProps = (props, strings, primaryActionItem
                                 },
                                 iconProps: {
                                     iconName: 'ContextMenuMicIcon',
-                                    styles: {
-                                        root: {
-                                            lineHeight: 0
-                                        }
-                                    }
+                                    styles: { root: { lineHeight: 0 } }
                                 },
                                 canCheck: true,
                                 isChecked: microphone.id === (selectedMicrophone === null || selectedMicrophone === void 0 ? void 0 : selectedMicrophone.id),
@@ -123,7 +118,8 @@ export const generateDefaultDeviceMenuProps = (props, strings, primaryActionItem
                             }))
                         },
                         text: selectedMicrophone.name
-                    }]
+                    }
+                ]
             }
         });
     }
@@ -133,13 +129,14 @@ export const generateDefaultDeviceMenuProps = (props, strings, primaryActionItem
             itemType: ContextualMenuItemType.Section,
             sectionProps: {
                 title: strings.speakerMenuTitle,
-                items: [{
+                items: [
+                    {
                         key: 'sectionSpeaker',
                         subMenuProps: {
                             calloutProps: {
                                 preventDismissOnEvent
                             },
-                            items: speakers.map(speaker => ({
+                            items: speakers.map((speaker) => ({
                                 key: speaker.id,
                                 text: speaker.name,
                                 title: speaker.name,
@@ -148,11 +145,7 @@ export const generateDefaultDeviceMenuProps = (props, strings, primaryActionItem
                                 },
                                 iconProps: {
                                     iconName: 'ContextMenuSpeakerIcon',
-                                    styles: {
-                                        root: {
-                                            lineHeight: 0
-                                        }
-                                    }
+                                    styles: { root: { lineHeight: 0 } }
                                 },
                                 canCheck: true,
                                 isChecked: speaker.id === (selectedSpeaker === null || selectedSpeaker === void 0 ? void 0 : selectedSpeaker.id),
@@ -164,7 +157,8 @@ export const generateDefaultDeviceMenuProps = (props, strings, primaryActionItem
                             }))
                         },
                         text: selectedSpeaker.name
-                    }]
+                    }
+                ]
             }
         });
     }
@@ -193,8 +187,6 @@ export const DevicesButton = (props) => {
     const onRenderOptionsIcon = () => {
         return React.createElement(_HighContrastAwareIcon, { disabled: props.disabled, iconName: "ControlButtonOptions" });
     };
-    return React.createElement(ControlBarButton, Object.assign({}, props, { menuProps: devicesButtonMenu, menuIconProps: {
-            hidden: true
-        }, onRenderIcon: onRenderIcon !== null && onRenderIcon !== void 0 ? onRenderIcon : onRenderOptionsIcon, strings: strings, labelKey: (_c = props.labelKey) !== null && _c !== void 0 ? _c : 'devicesButtonLabel' }));
+    return (React.createElement(ControlBarButton, Object.assign({}, props, { menuProps: devicesButtonMenu, menuIconProps: { hidden: true }, onRenderIcon: onRenderIcon !== null && onRenderIcon !== void 0 ? onRenderIcon : onRenderOptionsIcon, strings: strings, labelKey: (_c = props.labelKey) !== null && _c !== void 0 ? _c : 'devicesButtonLabel' })));
 };
 //# sourceMappingURL=DevicesButton.js.map