@azure/communication-react 1.7.0-beta.1 → 1.7.1-alpha-202308170011

package/dist/dist-esm/react-composites/src/composites/CallComposite/components/SidePane/SidePane.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { SidePaneRenderer } from './SidePaneProvider';
 /** @private */
 export interface SidePaneProps {

package/dist/dist-esm/react-composites/src/composites/CallComposite/components/SidePane/SidePane.js

@@ -11,11 +11,17 @@ import { hiddenStyles } from '../../../common/styles/Pane.styles';
 export const SidePane = (props) => {
     var _a;
     const { sidePaneRenderer, overrideSidePane } = useSidePaneContext();
-    const renderingHiddenOverrideContent = (overrideSidePane === null || overrideSidePane === void 0 ? void 0 : overrideSidePane.renderer.contentRenderer) && overrideSidePane.persistRenderingWhenClosed && !overrideSidePane.isActive;
+    const renderingHiddenOverrideContent = (overrideSidePane === null || overrideSidePane === void 0 ? void 0 : overrideSidePane.renderer.contentRenderer) &&
+        overrideSidePane.persistRenderingWhenClosed &&
+        !overrideSidePane.isActive;
     const renderingOnlyHiddenContent = renderingHiddenOverrideContent && !sidePaneRenderer;
     const maxWidthStyles = useMemo(() => sidePaneStyles(props.maxWidth), [props.maxWidth]);
-    const paneStyles = renderingOnlyHiddenContent ? hiddenStyles : props.mobileView ? availableSpaceStyles : maxWidthStyles;
-    let Header = (_a = ((overrideSidePane === null || overrideSidePane === void 0 ? void 0 : overrideSidePane.isActive) ? overrideSidePane.renderer.headerRenderer : sidePaneRenderer === null || sidePaneRenderer === void 0 ? void 0 : sidePaneRenderer.headerRenderer)) !== null && _a !== void 0 ? _a : EmptyElement;
+    const paneStyles = renderingOnlyHiddenContent
+        ? hiddenStyles
+        : props.mobileView
+            ? availableSpaceStyles
+            : maxWidthStyles;
+    const Header = (_a = ((overrideSidePane === null || overrideSidePane === void 0 ? void 0 : overrideSidePane.isActive) ? overrideSidePane.renderer.headerRenderer : sidePaneRenderer === null || sidePaneRenderer === void 0 ? void 0 : sidePaneRenderer.headerRenderer)) !== null && _a !== void 0 ? _a : EmptyElement;
     /**
      * Legacy code to support old behavior of showing chat and people tab headers on mobile side pane.
      * To be removed in breaking change.
@@ -25,30 +31,40 @@ export const SidePane = (props) => {
     const closePane = useCallback(() => {
         updateSidePaneRenderer(undefined);
     }, [updateSidePaneRenderer]);
-    if (props.mobileView && (overrideSidePaneId === 'chat' || (sidePaneRenderer === null || sidePaneRenderer === void 0 ? void 0 : sidePaneRenderer.id) === 'people')) {
-        // use legacy header
-        Header = () => {
-            var _a;
-            return React.createElement(PeopleAndChatHeader, { onClose: overrideSidePaneId === 'chat' ? (_a = props.onChatButtonClicked) !== null && _a !== void 0 ? _a : noop : closePane, activeTab: (sidePaneRenderer === null || sidePaneRenderer === void 0 ? void 0 : sidePaneRenderer.id) === 'people' ? 'people' : 'chat', 
-                // legacy arguments to be removed in breaking change:
-                disablePeopleButton: props.disablePeopleButton, disableChatButton: props.disableChatButton, onPeopleButtonClicked: (sidePaneRenderer === null || sidePaneRenderer === void 0 ? void 0 : sidePaneRenderer.id) === 'people' ? noop : props.onPeopleButtonClicked, onChatButtonClicked: overrideSidePaneId === 'chat' ? noop : props.onChatButtonClicked });
-        };
-    }
+    const LegacyHeader = useMemo(() => {
+        var _a;
+        return (React.createElement(PeopleAndChatHeader, { onClose: overrideSidePaneId === 'chat' ? (_a = props.onChatButtonClicked) !== null && _a !== void 0 ? _a : noop : closePane, activeTab: (sidePaneRenderer === null || sidePaneRenderer === void 0 ? void 0 : sidePaneRenderer.id) === 'people' ? 'people' : 'chat', 
+            // legacy arguments to be removed in breaking change:
+            disablePeopleButton: props.disablePeopleButton, disableChatButton: props.disableChatButton, onPeopleButtonClicked: (sidePaneRenderer === null || sidePaneRenderer === void 0 ? void 0 : sidePaneRenderer.id) === 'people' ? noop : props.onPeopleButtonClicked, onChatButtonClicked: overrideSidePaneId === 'chat' ? noop : props.onChatButtonClicked }));
+    }, [
+        overrideSidePaneId,
+        props.onChatButtonClicked,
+        props.onPeopleButtonClicked,
+        props.disablePeopleButton,
+        props.disableChatButton,
+        sidePaneRenderer,
+        closePane
+    ]);
+    const HeaderToRender = props.mobileView && (overrideSidePaneId === 'chat' || (sidePaneRenderer === null || sidePaneRenderer === void 0 ? void 0 : sidePaneRenderer.id) === 'people') ? LegacyHeader : Header();
     const ContentRender = (overrideSidePane === null || overrideSidePane === void 0 ? void 0 : overrideSidePane.isActive) ? undefined : sidePaneRenderer === null || sidePaneRenderer === void 0 ? void 0 : sidePaneRenderer.contentRenderer;
-    const OverrideContentRender = (overrideSidePane === null || overrideSidePane === void 0 ? void 0 : overrideSidePane.isActive) || (overrideSidePane === null || overrideSidePane === void 0 ? void 0 : overrideSidePane.persistRenderingWhenClosed) ? overrideSidePane.renderer.contentRenderer : undefined;
+    const OverrideContentRender = (overrideSidePane === null || overrideSidePane === void 0 ? void 0 : overrideSidePane.isActive) || (overrideSidePane === null || overrideSidePane === void 0 ? void 0 : overrideSidePane.persistRenderingWhenClosed)
+        ? overrideSidePane.renderer.contentRenderer
+        : undefined;
     if (!ContentRender && !OverrideContentRender) {
         return React.createElement(EmptyElement, null);
     }
-    return React.createElement(Stack, { verticalFill: true, grow: true, styles: paneStyles, "data-ui-id": "SidePane", tokens: props.mobileView ? {} : sidePaneTokens },
-        React.createElement(Header, null),
+    return (React.createElement(Stack, { verticalFill: true, grow: true, styles: paneStyles, "data-ui-id": "SidePane", tokens: props.mobileView ? {} : sidePaneTokens },
+        HeaderToRender,
         React.createElement(Stack.Item, { verticalFill: true, grow: true, styles: paneBodyContainer },
             React.createElement(Stack, { verticalFill: true, styles: scrollableContainer },
-                ContentRender && React.createElement(Stack.Item, { verticalFill: true, styles: scrollableContainerContents },
+                ContentRender && (React.createElement(Stack.Item, { verticalFill: true, styles: scrollableContainerContents },
                     React.createElement(Stack, { styles: containerContextStyles },
-                        React.createElement(ContentRender, null))),
-                OverrideContentRender && React.createElement(Stack.Item, { verticalFill: true, styles: !(overrideSidePane === null || overrideSidePane === void 0 ? void 0 : overrideSidePane.isActive) && (overrideSidePane === null || overrideSidePane === void 0 ? void 0 : overrideSidePane.persistRenderingWhenClosed) ? hiddenStyles : scrollableContainerContents },
+                        React.createElement(ContentRender, null)))),
+                OverrideContentRender && (React.createElement(Stack.Item, { verticalFill: true, styles: !(overrideSidePane === null || overrideSidePane === void 0 ? void 0 : overrideSidePane.isActive) && (overrideSidePane === null || overrideSidePane === void 0 ? void 0 : overrideSidePane.persistRenderingWhenClosed)
+                        ? hiddenStyles
+                        : scrollableContainerContents },
                     React.createElement(Stack, { styles: containerContextStyles },
-                        React.createElement(OverrideContentRender, null))))));
+                        React.createElement(OverrideContentRender, null))))))));
 };
 // eslint-disable-next-line @typescript-eslint/no-empty-function
 const noop = () => { };

package/dist/dist-esm/react-composites/src/composites/CallComposite/components/SidePane/SidePane.js.map

@@ -1 +1 @@
-{"version":3,"file":"SidePane.js","sourceRoot":"","sources":["../../../../../../../../preprocess-dist/react-composites/src/composites/CallComposite/components/SidePane/SidePane.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport React, { useCallback, useMemo } from 'react';\nimport { Stack } from '@fluentui/react';\nimport { containerContextStyles, paneBodyContainer, scrollableContainer, scrollableContainerContents } from '../../../common/styles/ParticipantContainer.styles';\nimport { availableSpaceStyles, sidePaneStyles, sidePaneTokens } from '../../../common/styles/Pane.styles';\nimport { SidePaneRenderer, useSidePaneContext } from './SidePaneProvider';\nimport { PeopleAndChatHeader } from '../../../common/TabHeader';\nimport { hiddenStyles } from '../../../common/styles/Pane.styles';\n\n/** @private */\nexport interface SidePaneProps {\n  updateSidePaneRenderer: (renderer: SidePaneRenderer | undefined) => void;\n  mobileView?: boolean;\n  maxWidth?: string;\n\n  // legacy arguments to be removed in breaking change\n  disablePeopleButton?: boolean;\n  disableChatButton?: boolean;\n  onChatButtonClicked?: () => void;\n  onPeopleButtonClicked?: () => void;\n}\n\n/** @private */\nexport const SidePane = (props: SidePaneProps): JSX.Element => {\n  const {\n    sidePaneRenderer,\n    overrideSidePane\n  } = useSidePaneContext();\n  const renderingHiddenOverrideContent = overrideSidePane?.renderer.contentRenderer && overrideSidePane.persistRenderingWhenClosed && !overrideSidePane.isActive;\n  const renderingOnlyHiddenContent = renderingHiddenOverrideContent && !sidePaneRenderer;\n  const maxWidthStyles = useMemo(() => sidePaneStyles(props.maxWidth), [props.maxWidth]);\n  const paneStyles = renderingOnlyHiddenContent ? hiddenStyles : props.mobileView ? availableSpaceStyles : maxWidthStyles;\n  let Header = (overrideSidePane?.isActive ? overrideSidePane.renderer.headerRenderer : sidePaneRenderer?.headerRenderer) ?? EmptyElement;\n  /**\n   * Legacy code to support old behavior of showing chat and people tab headers on mobile side pane.\n   * To be removed in breaking change.\n   */\n  const overrideSidePaneId = overrideSidePane?.isActive ? overrideSidePane.renderer.id : undefined;\n  const {\n    updateSidePaneRenderer\n  } = props;\n  const closePane = useCallback(() => {\n    updateSidePaneRenderer(undefined);\n  }, [updateSidePaneRenderer]);\n  if (props.mobileView && (overrideSidePaneId === 'chat' || sidePaneRenderer?.id === 'people')) {\n    // use legacy header\n    Header = () => <PeopleAndChatHeader onClose={overrideSidePaneId === 'chat' ? props.onChatButtonClicked ?? noop : closePane} activeTab={sidePaneRenderer?.id === 'people' ? 'people' : 'chat'}\n    // legacy arguments to be removed in breaking change:\n    disablePeopleButton={props.disablePeopleButton} disableChatButton={props.disableChatButton} onPeopleButtonClicked={sidePaneRenderer?.id === 'people' ? noop : props.onPeopleButtonClicked} onChatButtonClicked={overrideSidePaneId === 'chat' ? noop : props.onChatButtonClicked} />;\n  }\n  const ContentRender = overrideSidePane?.isActive ? undefined : sidePaneRenderer?.contentRenderer;\n  const OverrideContentRender = overrideSidePane?.isActive || overrideSidePane?.persistRenderingWhenClosed ? overrideSidePane.renderer.contentRenderer : undefined;\n  if (!ContentRender && !OverrideContentRender) {\n    return <EmptyElement />;\n  }\n  return <Stack verticalFill grow styles={paneStyles} data-ui-id=\"SidePane\" tokens={props.mobileView ? {} : sidePaneTokens}>\n      <Header />\n      <Stack.Item verticalFill grow styles={paneBodyContainer}>\n        <Stack verticalFill styles={scrollableContainer}>\n          {ContentRender && <Stack.Item verticalFill styles={scrollableContainerContents}>\n              <Stack styles={containerContextStyles}>\n                <ContentRender />\n              </Stack>\n            </Stack.Item>}\n          {OverrideContentRender && <Stack.Item verticalFill styles={!overrideSidePane?.isActive && overrideSidePane?.persistRenderingWhenClosed ? hiddenStyles : scrollableContainerContents}>\n              <Stack styles={containerContextStyles}>\n                <OverrideContentRender />\n              </Stack>\n            </Stack.Item>}\n        </Stack>\n      </Stack.Item>\n    </Stack>;\n};\n\n// eslint-disable-next-line @typescript-eslint/no-empty-function\nconst noop = (): void => {};\nconst EmptyElement = (): JSX.Element => <></>;"]}
+{"version":3,"file":"SidePane.js","sourceRoot":"","sources":["../../../../../../../../../react-composites/src/composites/CallComposite/components/SidePane/SidePane.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport React, { useCallback, useMemo } from 'react';\nimport { Stack } from '@fluentui/react';\nimport {\n  containerContextStyles,\n  paneBodyContainer,\n  scrollableContainer,\n  scrollableContainerContents\n} from '../../../common/styles/ParticipantContainer.styles';\nimport { availableSpaceStyles, sidePaneStyles, sidePaneTokens } from '../../../common/styles/Pane.styles';\nimport { SidePaneRenderer, useSidePaneContext } from './SidePaneProvider';\nimport { PeopleAndChatHeader } from '../../../common/TabHeader';\nimport { hiddenStyles } from '../../../common/styles/Pane.styles';\n\n/** @private */\nexport interface SidePaneProps {\n  updateSidePaneRenderer: (renderer: SidePaneRenderer | undefined) => void;\n  mobileView?: boolean;\n  maxWidth?: string;\n\n  // legacy arguments to be removed in breaking change\n  disablePeopleButton?: boolean;\n  disableChatButton?: boolean;\n  onChatButtonClicked?: () => void;\n  onPeopleButtonClicked?: () => void;\n}\n\n/** @private */\nexport const SidePane = (props: SidePaneProps): JSX.Element => {\n  const { sidePaneRenderer, overrideSidePane } = useSidePaneContext();\n  const renderingHiddenOverrideContent =\n    overrideSidePane?.renderer.contentRenderer &&\n    overrideSidePane.persistRenderingWhenClosed &&\n    !overrideSidePane.isActive;\n  const renderingOnlyHiddenContent = renderingHiddenOverrideContent && !sidePaneRenderer;\n\n  const maxWidthStyles = useMemo(() => sidePaneStyles(props.maxWidth), [props.maxWidth]);\n  const paneStyles = renderingOnlyHiddenContent\n    ? hiddenStyles\n    : props.mobileView\n    ? availableSpaceStyles\n    : maxWidthStyles;\n\n  const Header =\n    (overrideSidePane?.isActive ? overrideSidePane.renderer.headerRenderer : sidePaneRenderer?.headerRenderer) ??\n    EmptyElement;\n\n  /**\n   * Legacy code to support old behavior of showing chat and people tab headers on mobile side pane.\n   * To be removed in breaking change.\n   */\n  const overrideSidePaneId = overrideSidePane?.isActive ? overrideSidePane.renderer.id : undefined;\n  const { updateSidePaneRenderer } = props;\n  const closePane = useCallback(() => {\n    updateSidePaneRenderer(undefined);\n  }, [updateSidePaneRenderer]);\n\n  const LegacyHeader = useMemo((): JSX.Element => {\n    return (\n      <PeopleAndChatHeader\n        onClose={overrideSidePaneId === 'chat' ? props.onChatButtonClicked ?? noop : closePane}\n        activeTab={sidePaneRenderer?.id === 'people' ? 'people' : 'chat'}\n        // legacy arguments to be removed in breaking change:\n        disablePeopleButton={props.disablePeopleButton}\n        disableChatButton={props.disableChatButton}\n        onPeopleButtonClicked={sidePaneRenderer?.id === 'people' ? noop : props.onPeopleButtonClicked}\n        onChatButtonClicked={overrideSidePaneId === 'chat' ? noop : props.onChatButtonClicked}\n      />\n    );\n  }, [\n    overrideSidePaneId,\n    props.onChatButtonClicked,\n    props.onPeopleButtonClicked,\n    props.disablePeopleButton,\n    props.disableChatButton,\n    sidePaneRenderer,\n    closePane\n  ]);\n\n  const HeaderToRender =\n    props.mobileView && (overrideSidePaneId === 'chat' || sidePaneRenderer?.id === 'people') ? LegacyHeader : Header();\n\n  const ContentRender = overrideSidePane?.isActive ? undefined : sidePaneRenderer?.contentRenderer;\n  const OverrideContentRender =\n    overrideSidePane?.isActive || overrideSidePane?.persistRenderingWhenClosed\n      ? overrideSidePane.renderer.contentRenderer\n      : undefined;\n\n  if (!ContentRender && !OverrideContentRender) {\n    return <EmptyElement />;\n  }\n\n  return (\n    <Stack verticalFill grow styles={paneStyles} data-ui-id=\"SidePane\" tokens={props.mobileView ? {} : sidePaneTokens}>\n      {HeaderToRender}\n      <Stack.Item verticalFill grow styles={paneBodyContainer}>\n        <Stack verticalFill styles={scrollableContainer}>\n          {ContentRender && (\n            <Stack.Item verticalFill styles={scrollableContainerContents}>\n              <Stack styles={containerContextStyles}>\n                <ContentRender />\n              </Stack>\n            </Stack.Item>\n          )}\n          {OverrideContentRender && (\n            <Stack.Item\n              verticalFill\n              styles={\n                !overrideSidePane?.isActive && overrideSidePane?.persistRenderingWhenClosed\n                  ? hiddenStyles\n                  : scrollableContainerContents\n              }\n            >\n              <Stack styles={containerContextStyles}>\n                <OverrideContentRender />\n              </Stack>\n            </Stack.Item>\n          )}\n        </Stack>\n      </Stack.Item>\n    </Stack>\n  );\n};\n\n// eslint-disable-next-line @typescript-eslint/no-empty-function\nconst noop = (): void => {};\nconst EmptyElement = (): JSX.Element => <></>;\n"]}

package/dist/dist-esm/react-composites/src/composites/CallComposite/components/SidePane/SidePaneProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"SidePaneProvider.js","sourceRoot":"","sources":["../../../../../../../../preprocess-dist/react-composites/src/composites/CallComposite/components/SidePane/SidePaneProvider.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAiCzD;;;;GAIG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,aAAa,CAAuB,EAAE,CAAC,CAAC;AAWvE;;;;GAIG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,KAA4B,EAAe,EAAE;IAC5E,OAAO,oBAAC,eAAe,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,IAAG,KAAK,CAAC,QAAQ,CAA4B,CAAC;AAC7F,CAAC,CAAC;AAEF,eAAe;AACf,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAyB,EAAE,CAAC,UAAU,CAAC,eAAe,CAAC,CAAC;AAE1F,eAAe;AACf,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAY,EAAE;IAC7C,MAAM,EACJ,gBAAgB,EAChB,gBAAgB,EACjB,GAAG,kBAAkB,EAAE,CAAC;IACzB,OAAO,CAAC,CAAC,CAAC,gBAAgB,KAAI,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAE,QAAQ,CAAA,CAAC,CAAC;AAC5D,CAAC,CAAC;AAEF,eAAe;AACf,MAAM,CAAC,MAAM,2BAA2B,GAAG,CAAC,UAAkB,EAAW,EAAE;IACzE,MAAM,cAAc,GAAG,iBAAiB,EAAE,CAAC;IAC3C,MAAM,EACJ,gBAAgB,EACjB,GAAG,kBAAkB,EAAE,CAAC;IACzB,OAAO,cAAc,IAAI,CAAA,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAE,EAAE,MAAK,UAAU,CAAC;AAC/D,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport React, { createContext, useContext } from 'react';\n\n/** @private */\nexport interface SidePaneRenderer {\n  /** Side pane header content to render */\n  headerRenderer?: () => JSX.Element;\n  /** Side pane body content to render */\n  contentRenderer?: () => JSX.Element;\n  /** An id for identifying the side pane in events like `onSidePaneIdChanged` */\n  id: string;\n}\n\n/** @private */\nexport type InjectedSidePaneProps = {\n  renderer: SidePaneRenderer;\n  /**\n   * Whether the side pane showing the override content is displayed\n   */\n  isActive: boolean;\n  /**\n   * Useful to ensure the side pane renders the content of the override even if the side pane is closed.\n   * This avoids remounting the content when the side pane is opened again.\n   * This typically improves performance of opening the side pane, but may impact the overall performance of the app.\n   *\n   * @default false\n   */\n  persistRenderingWhenClosed?: boolean;\n};\ninterface SidePaneContextProps {\n  sidePaneRenderer?: SidePaneRenderer;\n  overrideSidePane?: InjectedSidePaneProps;\n}\n\n/**\n * Context for side pane interaction\n *\n * @private\n */\nexport const SidePaneContext = createContext<SidePaneContextProps>({});\n\n/**\n * Props to LocalizationProvider\n *\n * @private\n */\nexport type SidePaneProviderProps = SidePaneContextProps & {\n  children: React.ReactNode;\n};\n\n/**\n * Provider to provide localized strings for this library's composites.\n *\n * @private\n */\nexport const SidePaneProvider = (props: SidePaneProviderProps): JSX.Element => {\n  return <SidePaneContext.Provider value={props}>{props.children}</SidePaneContext.Provider>;\n};\n\n/** @private */\nexport const useSidePaneContext = (): SidePaneContextProps => useContext(SidePaneContext);\n\n/** @private */\nexport const useIsSidePaneOpen = (): boolean => {\n  const {\n    sidePaneRenderer,\n    overrideSidePane\n  } = useSidePaneContext();\n  return !!(sidePaneRenderer || overrideSidePane?.isActive);\n};\n\n/** @private */\nexport const useIsParticularSidePaneOpen = (sidePaneId: string): boolean => {\n  const isSidePaneOpen = useIsSidePaneOpen();\n  const {\n    sidePaneRenderer\n  } = useSidePaneContext();\n  return isSidePaneOpen && sidePaneRenderer?.id === sidePaneId;\n};"]}
+{"version":3,"file":"SidePaneProvider.js","sourceRoot":"","sources":["../../../../../../../../../react-composites/src/composites/CallComposite/components/SidePane/SidePaneProvider.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAkCzD;;;;GAIG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,aAAa,CAAuB,EAAE,CAAC,CAAC;AAWvE;;;;GAIG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,KAA4B,EAAe,EAAE;IAC5E,OAAO,oBAAC,eAAe,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,IAAG,KAAK,CAAC,QAAQ,CAA4B,CAAC;AAC7F,CAAC,CAAC;AAEF,eAAe;AACf,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAyB,EAAE,CAAC,UAAU,CAAC,eAAe,CAAC,CAAC;AAE1F,eAAe;AACf,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAY,EAAE;IAC7C,MAAM,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,GAAG,kBAAkB,EAAE,CAAC;IACpE,OAAO,CAAC,CAAC,CAAC,gBAAgB,KAAI,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAE,QAAQ,CAAA,CAAC,CAAC;AAC5D,CAAC,CAAC;AAEF,eAAe;AACf,MAAM,CAAC,MAAM,2BAA2B,GAAG,CAAC,UAAkB,EAAW,EAAE;IACzE,MAAM,cAAc,GAAG,iBAAiB,EAAE,CAAC;IAC3C,MAAM,EAAE,gBAAgB,EAAE,GAAG,kBAAkB,EAAE,CAAC;IAClD,OAAO,cAAc,IAAI,CAAA,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAE,EAAE,MAAK,UAAU,CAAC;AAC/D,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport React, { createContext, useContext } from 'react';\n\n/** @private */\nexport interface SidePaneRenderer {\n  /** Side pane header content to render */\n  headerRenderer?: () => JSX.Element;\n  /** Side pane body content to render */\n  contentRenderer?: () => JSX.Element;\n  /** An id for identifying the side pane in events like `onSidePaneIdChanged` */\n  id: string;\n}\n\n/** @private */\nexport type InjectedSidePaneProps = {\n  renderer: SidePaneRenderer;\n  /**\n   * Whether the side pane showing the override content is displayed\n   */\n  isActive: boolean;\n  /**\n   * Useful to ensure the side pane renders the content of the override even if the side pane is closed.\n   * This avoids remounting the content when the side pane is opened again.\n   * This typically improves performance of opening the side pane, but may impact the overall performance of the app.\n   *\n   * @default false\n   */\n  persistRenderingWhenClosed?: boolean;\n};\n\ninterface SidePaneContextProps {\n  sidePaneRenderer?: SidePaneRenderer;\n  overrideSidePane?: InjectedSidePaneProps;\n}\n\n/**\n * Context for side pane interaction\n *\n * @private\n */\nexport const SidePaneContext = createContext<SidePaneContextProps>({});\n\n/**\n * Props to LocalizationProvider\n *\n * @private\n */\nexport type SidePaneProviderProps = SidePaneContextProps & {\n  children: React.ReactNode;\n};\n\n/**\n * Provider to provide localized strings for this library's composites.\n *\n * @private\n */\nexport const SidePaneProvider = (props: SidePaneProviderProps): JSX.Element => {\n  return <SidePaneContext.Provider value={props}>{props.children}</SidePaneContext.Provider>;\n};\n\n/** @private */\nexport const useSidePaneContext = (): SidePaneContextProps => useContext(SidePaneContext);\n\n/** @private */\nexport const useIsSidePaneOpen = (): boolean => {\n  const { sidePaneRenderer, overrideSidePane } = useSidePaneContext();\n  return !!(sidePaneRenderer || overrideSidePane?.isActive);\n};\n\n/** @private */\nexport const useIsParticularSidePaneOpen = (sidePaneId: string): boolean => {\n  const isSidePaneOpen = useIsSidePaneOpen();\n  const { sidePaneRenderer } = useSidePaneContext();\n  return isSidePaneOpen && sidePaneRenderer?.id === sidePaneId;\n};\n"]}

package/dist/dist-esm/react-composites/src/composites/CallComposite/components/SidePane/usePeoplePane.d.ts

@@ -1,6 +1,8 @@
+import React, { RefObject } from 'react';
 import { SidePaneRenderer } from './SidePaneProvider';
 import { ParticipantMenuItemsCallback, _DrawerMenuItemProps } from "../../../../../../react-components/src";
 import { AvatarPersonaDataCallback } from '../../../common/AvatarPersona';
+import { IButton } from '@fluentui/react';
 /** @private */
 export declare const usePeoplePane: (props: {
     updateSidePaneRenderer: (renderer: SidePaneRenderer | undefined) => void;
@@ -9,6 +11,7 @@ export declare const usePeoplePane: (props: {
     onFetchAvatarPersonaData?: AvatarPersonaDataCallback | undefined;
     onFetchParticipantMenuItems?: ParticipantMenuItemsCallback | undefined;
     mobileView?: boolean | undefined;
+    peopleButtonRef?: React.RefObject<IButton> | undefined;
 }) => {
     openPeoplePane: () => void;
     closePeoplePane: () => void;

package/dist/dist-esm/react-composites/src/composites/CallComposite/components/SidePane/usePeoplePane.js

@@ -8,14 +8,16 @@ import { useLocale } from '../../../localization';
 const PEOPLE_SIDE_PANE_ID = 'people';
 /** @private */
 export const usePeoplePane = (props) => {
-    const { updateSidePaneRenderer, inviteLink, onFetchAvatarPersonaData, onFetchParticipantMenuItems, setDrawerMenuItems, mobileView } = props;
+    const { updateSidePaneRenderer, inviteLink, onFetchAvatarPersonaData, onFetchParticipantMenuItems, setDrawerMenuItems, mobileView, peopleButtonRef } = props;
     const closePane = useCallback(() => {
+        var _a;
         updateSidePaneRenderer(undefined);
-    }, [updateSidePaneRenderer]);
+        (_a = peopleButtonRef === null || peopleButtonRef === void 0 ? void 0 : peopleButtonRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }, [peopleButtonRef, updateSidePaneRenderer]);
     const localeStrings = localeTrampoline(useLocale());
-    const onRenderHeader = useCallback(() => React.createElement(SidePaneHeader, { onClose: closePane, headingText: localeStrings.peoplePaneTitle, dismissSidePaneButtonAriaLabel: localeStrings.dismissSidePaneButtonLabel, mobileView: mobileView !== null && mobileView !== void 0 ? mobileView : false }), [mobileView, closePane, localeStrings]);
+    const onRenderHeader = useCallback(() => (React.createElement(SidePaneHeader, { onClose: closePane, headingText: localeStrings.peoplePaneTitle, dismissSidePaneButtonAriaLabel: localeStrings.dismissSidePaneButtonLabel, mobileView: mobileView !== null && mobileView !== void 0 ? mobileView : false })), [mobileView, closePane, localeStrings]);
     const onRenderContent = useCallback(() => {
-        return React.createElement(PeoplePaneContent, { inviteLink: inviteLink, onFetchAvatarPersonaData: onFetchAvatarPersonaData, onFetchParticipantMenuItems: onFetchParticipantMenuItems, setDrawerMenuItems: setDrawerMenuItems, mobileView: mobileView });
+        return (React.createElement(PeoplePaneContent, { inviteLink: inviteLink, onFetchAvatarPersonaData: onFetchAvatarPersonaData, onFetchParticipantMenuItems: onFetchParticipantMenuItems, setDrawerMenuItems: setDrawerMenuItems, mobileView: mobileView }));
     }, [inviteLink, mobileView, onFetchAvatarPersonaData, onFetchParticipantMenuItems, setDrawerMenuItems]);
     const sidePaneRenderer = useMemo(() => ({
         headerRenderer: onRenderHeader,
@@ -32,11 +34,7 @@ export const usePeoplePane = (props) => {
             openPane();
         }
     }, [isOpen, openPane]);
-    return {
-        openPeoplePane: openPane,
-        closePeoplePane: closePane,
-        isPeoplePaneOpen: isOpen
-    };
+    return { openPeoplePane: openPane, closePeoplePane: closePane, isPeoplePaneOpen: isOpen };
 };
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const localeTrampoline = (locale) => {

package/dist/dist-esm/react-composites/src/composites/CallComposite/components/SidePane/usePeoplePane.js.map

@@ -1 +1 @@
-{"version":3,"file":"usePeoplePane.js","sourceRoot":"","sources":["../../../../../../../../preprocess-dist/react-composites/src/composites/CallComposite/components/SidePane/usePeoplePane.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAC/D,OAAO,EAAoB,2BAA2B,EAAE,MAAM,oBAAoB,CAAC;AACnF,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAChE,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AACtE,OAAO,EAAmB,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAGnE,MAAM,mBAAmB,GAAG,QAAQ,CAAC;AAErC,eAAe;AACf,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,KAO7B,EAIC,EAAE;IACF,MAAM,EACJ,sBAAsB,EACtB,UAAU,EACV,wBAAwB,EACxB,2BAA2B,EAC3B,kBAAkB,EAClB,UAAU,EACX,GAAG,KAAK,CAAC;IACV,MAAM,SAAS,GAAG,WAAW,CAAC,GAAG,EAAE;QACjC,sBAAsB,CAAC,SAAS,CAAC,CAAC;IACpC,CAAC,EAAE,CAAC,sBAAsB,CAAC,CAAC,CAAC;IAC7B,MAAM,aAAa,GAAG,gBAAgB,CAAC,SAAS,EAAE,CAAC,CAAC;IACpD,MAAM,cAAc,GAAG,WAAW,CAAC,GAAG,EAAE,CAAC,oBAAC,cAAc,IAAC,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,aAAa,CAAC,eAAe,EAAE,8BAA8B,EAAE,aAAa,CAAC,0BAA0B,EAAE,UAAU,EAAE,UAAU,aAAV,UAAU,cAAV,UAAU,GAAI,KAAK,GAAI,EAAE,CAAC,UAAU,EAAE,SAAS,EAAE,aAAa,CAAC,CAAC,CAAC;IAChR,MAAM,eAAe,GAAG,WAAW,CAAC,GAAgB,EAAE;QACpD,OAAO,oBAAC,iBAAiB,IAAC,UAAU,EAAE,UAAU,EAAE,wBAAwB,EAAE,wBAAwB,EAAE,2BAA2B,EAAE,2BAA2B,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,UAAU,EAAE,UAAU,GAAI,CAAC;IACrO,CAAC,EAAE,CAAC,UAAU,EAAE,UAAU,EAAE,wBAAwB,EAAE,2BAA2B,EAAE,kBAAkB,CAAC,CAAC,CAAC;IACxG,MAAM,gBAAgB,GAAqB,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC;QACxD,cAAc,EAAE,cAAc;QAC9B,eAAe,EAAE,eAAe;QAChC,EAAE,EAAE,mBAAmB;KACxB,CAAC,EAAE,CAAC,eAAe,EAAE,cAAc,CAAC,CAAC,CAAC;IACvC,MAAM,QAAQ,GAAG,WAAW,CAAC,GAAG,EAAE;QAChC,sBAAsB,CAAC,gBAAgB,CAAC,CAAC;IAC3C,CAAC,EAAE,CAAC,gBAAgB,EAAE,sBAAsB,CAAC,CAAC,CAAC;IAC/C,MAAM,MAAM,GAAG,2BAA2B,CAAC,mBAAmB,CAAC,CAAC;IAEhE,kEAAkE;IAClE,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,MAAM,EAAE;YACV,QAAQ,EAAE,CAAC;SACZ;IACH,CAAC,EAAE,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC;IACvB,OAAO;QACL,cAAc,EAAE,QAAQ;QACxB,eAAe,EAAE,SAAS;QAC1B,gBAAgB,EAAE,MAAM;KACzB,CAAC;AACJ,CAAC,CAAC;AAEF,8DAA8D;AAC9D,MAAM,gBAAgB,GAAG,CAAC,MAAuB,EAAO,EAAE;IACxD,uDAAuD;IACvD,OAAO,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC;IAC3B,OAAO,MAAM,CAAC,OAAO,CAAC,YAAY,CAAC;AACrC,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport React, { useCallback, useEffect, useMemo } from 'react';\nimport { SidePaneRenderer, useIsParticularSidePaneOpen } from './SidePaneProvider';\nimport { SidePaneHeader } from '../../../common/SidePaneHeader';\nimport { PeoplePaneContent } from '../../../common/PeoplePaneContent';\nimport { CompositeLocale, useLocale } from '../../../localization';\nimport { ParticipantMenuItemsCallback, _DrawerMenuItemProps } from '@internal/react-components';\nimport { AvatarPersonaDataCallback } from '../../../common/AvatarPersona';\nconst PEOPLE_SIDE_PANE_ID = 'people';\n\n/** @private */\nexport const usePeoplePane = (props: {\n  updateSidePaneRenderer: (renderer: SidePaneRenderer | undefined) => void;\n  setDrawerMenuItems: (items: _DrawerMenuItemProps[]) => void;\n  inviteLink?: string;\n  onFetchAvatarPersonaData?: AvatarPersonaDataCallback;\n  onFetchParticipantMenuItems?: ParticipantMenuItemsCallback;\n  mobileView?: boolean;\n}): {\n  openPeoplePane: () => void;\n  closePeoplePane: () => void;\n  isPeoplePaneOpen: boolean;\n} => {\n  const {\n    updateSidePaneRenderer,\n    inviteLink,\n    onFetchAvatarPersonaData,\n    onFetchParticipantMenuItems,\n    setDrawerMenuItems,\n    mobileView\n  } = props;\n  const closePane = useCallback(() => {\n    updateSidePaneRenderer(undefined);\n  }, [updateSidePaneRenderer]);\n  const localeStrings = localeTrampoline(useLocale());\n  const onRenderHeader = useCallback(() => <SidePaneHeader onClose={closePane} headingText={localeStrings.peoplePaneTitle} dismissSidePaneButtonAriaLabel={localeStrings.dismissSidePaneButtonLabel} mobileView={mobileView ?? false} />, [mobileView, closePane, localeStrings]);\n  const onRenderContent = useCallback((): JSX.Element => {\n    return <PeoplePaneContent inviteLink={inviteLink} onFetchAvatarPersonaData={onFetchAvatarPersonaData} onFetchParticipantMenuItems={onFetchParticipantMenuItems} setDrawerMenuItems={setDrawerMenuItems} mobileView={mobileView} />;\n  }, [inviteLink, mobileView, onFetchAvatarPersonaData, onFetchParticipantMenuItems, setDrawerMenuItems]);\n  const sidePaneRenderer: SidePaneRenderer = useMemo(() => ({\n    headerRenderer: onRenderHeader,\n    contentRenderer: onRenderContent,\n    id: PEOPLE_SIDE_PANE_ID\n  }), [onRenderContent, onRenderHeader]);\n  const openPane = useCallback(() => {\n    updateSidePaneRenderer(sidePaneRenderer);\n  }, [sidePaneRenderer, updateSidePaneRenderer]);\n  const isOpen = useIsParticularSidePaneOpen(PEOPLE_SIDE_PANE_ID);\n\n  // Update pane renderer if it is open and the openPane dep changes\n  useEffect(() => {\n    if (isOpen) {\n      openPane();\n    }\n  }, [isOpen, openPane]);\n  return {\n    openPeoplePane: openPane,\n    closePeoplePane: closePane,\n    isPeoplePaneOpen: isOpen\n  };\n};\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst localeTrampoline = (locale: CompositeLocale): any => {\n  /* @conditional-compile-remove(new-call-control-bar) */\n  return locale.strings.call;\n  return locale.strings.callWithChat;\n};\"../../../../../../react-components/src\""]}
+{"version":3,"file":"usePeoplePane.js","sourceRoot":"","sources":["../../../../../../../../../react-composites/src/composites/CallComposite/components/SidePane/usePeoplePane.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport React, { RefObject, useCallback, useEffect, useMemo } from 'react';\nimport { SidePaneRenderer, useIsParticularSidePaneOpen } from './SidePaneProvider';\nimport { SidePaneHeader } from '../../../common/SidePaneHeader';\nimport { PeoplePaneContent } from '../../../common/PeoplePaneContent';\nimport { CompositeLocale, useLocale } from '../../../localization';\nimport { ParticipantMenuItemsCallback, _DrawerMenuItemProps } from '@internal/react-components';\nimport { AvatarPersonaDataCallback } from '../../../common/AvatarPersona';\nimport { IButton } from '@fluentui/react';\n\nconst PEOPLE_SIDE_PANE_ID = 'people';\n\n/** @private */\nexport const usePeoplePane = (props: {\n  updateSidePaneRenderer: (renderer: SidePaneRenderer | undefined) => void;\n  setDrawerMenuItems: (items: _DrawerMenuItemProps[]) => void;\n  inviteLink?: string;\n  onFetchAvatarPersonaData?: AvatarPersonaDataCallback;\n  onFetchParticipantMenuItems?: ParticipantMenuItemsCallback;\n  mobileView?: boolean;\n  peopleButtonRef?: RefObject<IButton>;\n}): {\n  openPeoplePane: () => void;\n  closePeoplePane: () => void;\n  isPeoplePaneOpen: boolean;\n} => {\n  const {\n    updateSidePaneRenderer,\n    inviteLink,\n    onFetchAvatarPersonaData,\n    onFetchParticipantMenuItems,\n    setDrawerMenuItems,\n    mobileView,\n    peopleButtonRef\n  } = props;\n\n  const closePane = useCallback(() => {\n    updateSidePaneRenderer(undefined);\n    peopleButtonRef?.current?.focus();\n  }, [peopleButtonRef, updateSidePaneRenderer]);\n\n  const localeStrings = localeTrampoline(useLocale());\n\n  const onRenderHeader = useCallback(\n    () => (\n      <SidePaneHeader\n        onClose={closePane}\n        headingText={localeStrings.peoplePaneTitle}\n        dismissSidePaneButtonAriaLabel={localeStrings.dismissSidePaneButtonLabel}\n        mobileView={mobileView ?? false}\n      />\n    ),\n    [mobileView, closePane, localeStrings]\n  );\n\n  const onRenderContent = useCallback((): JSX.Element => {\n    return (\n      <PeoplePaneContent\n        inviteLink={inviteLink}\n        onFetchAvatarPersonaData={onFetchAvatarPersonaData}\n        onFetchParticipantMenuItems={onFetchParticipantMenuItems}\n        setDrawerMenuItems={setDrawerMenuItems}\n        mobileView={mobileView}\n      />\n    );\n  }, [inviteLink, mobileView, onFetchAvatarPersonaData, onFetchParticipantMenuItems, setDrawerMenuItems]);\n\n  const sidePaneRenderer: SidePaneRenderer = useMemo(\n    () => ({\n      headerRenderer: onRenderHeader,\n      contentRenderer: onRenderContent,\n      id: PEOPLE_SIDE_PANE_ID\n    }),\n    [onRenderContent, onRenderHeader]\n  );\n\n  const openPane = useCallback(() => {\n    updateSidePaneRenderer(sidePaneRenderer);\n  }, [sidePaneRenderer, updateSidePaneRenderer]);\n\n  const isOpen = useIsParticularSidePaneOpen(PEOPLE_SIDE_PANE_ID);\n\n  // Update pane renderer if it is open and the openPane dep changes\n  useEffect(() => {\n    if (isOpen) {\n      openPane();\n    }\n  }, [isOpen, openPane]);\n\n  return { openPeoplePane: openPane, closePeoplePane: closePane, isPeoplePaneOpen: isOpen };\n};\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst localeTrampoline = (locale: CompositeLocale): any => {\n  /* @conditional-compile-remove(new-call-control-bar) */\n  return locale.strings.call;\n\n  return locale.strings.callWithChat;\n};\n\"../../../../../../react-components/src\""]}

package/dist/dist-esm/react-composites/src/composites/CallComposite/components/SidePane/useVideoEffectsPane.d.ts

@@ -1,10 +1,13 @@
+import React from 'react';
 import { SidePaneRenderer } from './SidePaneProvider';
+import { ActiveErrorMessage } from "../../../../../../react-components/src";
+import { IButton } from '@fluentui/react';
 /** @private */
 export declare const VIDEO_EFFECTS_SIDE_PANE_ID = "videoeffects";
 /** @private */
 export declare const VIDEO_EFFECTS_SIDE_PANE_WIDTH_REM = 17.5;
 /** @private */
-export declare const useVideoEffectsPane: (updateSidePaneRenderer: (renderer: SidePaneRenderer | undefined) => void, mobileView: boolean) => {
+export declare const useVideoEffectsPane: (updateSidePaneRenderer: (renderer: SidePaneRenderer | undefined) => void, mobileView: boolean, latestErrors: ActiveErrorMessage[], onDismissError: (error: ActiveErrorMessage) => void, cameraButtonRef?: React.RefObject<IButton> | undefined) => {
     openVideoEffectsPane: () => void;
     closeVideoEffectsPane: () => void;
     toggleVideoEffectsPane: () => void;

package/dist/dist-esm/react-composites/src/composites/CallComposite/components/SidePane/useVideoEffectsPane.js

@@ -1,46 +1,47 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo } from 'react';
 import { useIsParticularSidePaneOpen } from './SidePaneProvider';
 import { SidePaneHeader } from '../../../common/SidePaneHeader';
 /* @conditional-compile-remove(video-background-effects) */
 import { useLocale } from '../../../localization';
 import { VideoEffectsPaneContent } from '../../../common/VideoEffectsPane';
-import { dismissVideoEffectsError } from '../../utils';
-import { videoBackgroundErrorsSelector } from '../../selectors/videoBackgroundErrorsSelector';
-import { useSelector } from '../../hooks/useSelector';
 /** @private */
 export const VIDEO_EFFECTS_SIDE_PANE_ID = 'videoeffects';
 /** @private */
 export const VIDEO_EFFECTS_SIDE_PANE_WIDTH_REM = 17.5;
 /** @private */
-export const useVideoEffectsPane = (updateSidePaneRenderer, mobileView) => {
+export const useVideoEffectsPane = (updateSidePaneRenderer, mobileView, latestErrors, onDismissError, cameraButtonRef) => {
     const closePane = useCallback(() => {
+        var _a;
         updateSidePaneRenderer(undefined);
-    }, [updateSidePaneRenderer]);
+        (_a = cameraButtonRef === null || cameraButtonRef === void 0 ? void 0 : cameraButtonRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }, [cameraButtonRef, updateSidePaneRenderer]);
     /* @conditional-compile-remove(video-background-effects) */
     const locale = useLocale();
     const onRenderHeader = useCallback(() => {
         var _a, _b;
-        return React.createElement(SidePaneHeader, { onClose: closePane, 
-            /* @conditional-compile-remove(video-background-effects) */ headingText: locale.strings.call.videoEffectsPaneTitle, 
-            /* @conditional-compile-remove(video-background-effects) */ dismissSidePaneButtonAriaLabel: (_b = (_a = locale.strings.call.dismissSidePaneButtonLabel) !== null && _a !== void 0 ? _a : locale.strings.callWithChat.dismissSidePaneButtonLabel) !== null && _b !== void 0 ? _b : 'Close', mobileView: mobileView });
+        return (React.createElement(SidePaneHeader, { onClose: closePane, 
+            /* @conditional-compile-remove(video-background-effects) */
+            headingText: locale.strings.call.videoEffectsPaneTitle, 
+            /* @conditional-compile-remove(video-background-effects) */
+            dismissSidePaneButtonAriaLabel: (_b = (_a = locale.strings.call.dismissSidePaneButtonLabel) !== null && _a !== void 0 ? _a : locale.strings.callWithChat.dismissSidePaneButtonLabel) !== null && _b !== void 0 ? _b : 'Close', mobileView: mobileView }));
     }, [closePane, /* @conditional-compile-remove(video-background-effects) */ locale.strings, mobileView]);
-    const [dismissedVideoEffectsError, setDismissedVideoEffectsError] = useState();
-    const [activeVideoEffect, setActiveVideoEffect] = useState();
-    const onDismissVideoEffectError = useCallback((error) => {
-        setDismissedVideoEffectsError(dismissVideoEffectsError(error));
-    }, []);
-    const latestVideoEffectError = useSelector(videoBackgroundErrorsSelector);
-    const activeVideoEffectError = useCallback(() => {
-        if (latestVideoEffectError && (!dismissedVideoEffectsError || latestVideoEffectError.timestamp > dismissedVideoEffectsError.dismissedAt) && (!activeVideoEffect || latestVideoEffectError.timestamp > activeVideoEffect.timestamp)) {
-            return latestVideoEffectError;
-        }
-        return undefined;
-    }, [dismissedVideoEffectsError, latestVideoEffectError, activeVideoEffect]);
+    /* @conditional-compile-remove(video-background-effects) */
+    const latestVideoEffectError = latestErrors.find((error) => error.type === 'unableToStartVideoEffect');
     const onRenderContent = useCallback(() => {
-        return React.createElement(VideoEffectsPaneContent, { onDismissError: onDismissVideoEffectError, activeVideoEffectError: activeVideoEffectError, setActiveVideoEffect: setActiveVideoEffect });
-    }, [onDismissVideoEffectError, activeVideoEffectError]);
+        return (React.createElement(VideoEffectsPaneContent, { onDismissError: onDismissError, 
+            /* @conditional-compile-remove(video-background-effects) */
+            activeVideoEffectError: latestVideoEffectError, activeVideoEffectChange: () => {
+                // Clear any existing video effects error when the user clicks on a new video effect
+                /* @conditional-compile-remove(video-background-effects) */
+                latestVideoEffectError && (onDismissError === null || onDismissError === void 0 ? void 0 : onDismissError(latestVideoEffectError));
+            } }));
+    }, [
+        /* @conditional-compile-remove(video-background-effects) */
+        latestVideoEffectError,
+        onDismissError
+    ]);
     const sidePaneRenderer = useMemo(() => ({
         headerRenderer: onRenderHeader,
         contentRenderer: onRenderContent,

package/dist/dist-esm/react-composites/src/composites/CallComposite/components/SidePane/useVideoEffectsPane.js.map

@@ -1 +1 @@
-{"version":3,"file":"useVideoEffectsPane.js","sourceRoot":"","sources":["../../../../../../../../preprocess-dist/react-composites/src/composites/CallComposite/components/SidePane/useVideoEffectsPane.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport React, { useCallback, useEffect, useMemo, useState } from 'react';\nimport { SidePaneRenderer, useIsParticularSidePaneOpen } from './SidePaneProvider';\nimport { SidePaneHeader } from '../../../common/SidePaneHeader';\n/* @conditional-compile-remove(video-background-effects) */\nimport { useLocale } from '../../../localization';\nimport { VideoEffectsPaneContent } from '../../../common/VideoEffectsPane';\nimport { AdapterError } from '../../../common/adapters';\nimport { DismissedError, dismissVideoEffectsError } from '../../utils';\nimport { videoBackgroundErrorsSelector } from '../../selectors/videoBackgroundErrorsSelector';\nimport { useSelector } from '../../hooks/useSelector';\n\n/** @private */\nexport const VIDEO_EFFECTS_SIDE_PANE_ID = 'videoeffects';\n\n/** @private */\nexport const VIDEO_EFFECTS_SIDE_PANE_WIDTH_REM = 17.5;\n\n/** @private */\nexport const useVideoEffectsPane = (updateSidePaneRenderer: (renderer: SidePaneRenderer | undefined) => void, mobileView: boolean): {\n  openVideoEffectsPane: () => void;\n  closeVideoEffectsPane: () => void;\n  toggleVideoEffectsPane: () => void;\n  isVideoEffectsPaneOpen: boolean;\n} => {\n  const closePane = useCallback(() => {\n    updateSidePaneRenderer(undefined);\n  }, [updateSidePaneRenderer]);\n\n  /* @conditional-compile-remove(video-background-effects) */\n  const locale = useLocale();\n  const onRenderHeader = useCallback(() => {\n    return <SidePaneHeader onClose={closePane}\n    /* @conditional-compile-remove(video-background-effects) */ headingText={locale.strings.call.videoEffectsPaneTitle}\n    /* @conditional-compile-remove(video-background-effects) */ dismissSidePaneButtonAriaLabel={locale.strings.call.dismissSidePaneButtonLabel ?? locale.strings.callWithChat.dismissSidePaneButtonLabel ?? 'Close'} mobileView={mobileView} />;\n  }, [closePane, /* @conditional-compile-remove(video-background-effects) */locale.strings, mobileView]);\n  const [dismissedVideoEffectsError, setDismissedVideoEffectsError] = useState<DismissedError>();\n  const [activeVideoEffect, setActiveVideoEffect] = useState<ActiveVideoEffect>();\n  const onDismissVideoEffectError = useCallback((error: AdapterError) => {\n    setDismissedVideoEffectsError(dismissVideoEffectsError(error));\n  }, []);\n  const latestVideoEffectError = useSelector(videoBackgroundErrorsSelector);\n  const activeVideoEffectError = useCallback(() => {\n    if (latestVideoEffectError && (!dismissedVideoEffectsError || latestVideoEffectError.timestamp > dismissedVideoEffectsError.dismissedAt) && (!activeVideoEffect || latestVideoEffectError.timestamp > activeVideoEffect.timestamp)) {\n      return latestVideoEffectError;\n    }\n    return undefined;\n  }, [dismissedVideoEffectsError, latestVideoEffectError, activeVideoEffect]);\n  const onRenderContent = useCallback((): JSX.Element => {\n    return <VideoEffectsPaneContent onDismissError={onDismissVideoEffectError} activeVideoEffectError={activeVideoEffectError} setActiveVideoEffect={setActiveVideoEffect} />;\n  }, [onDismissVideoEffectError, activeVideoEffectError]);\n  const sidePaneRenderer: SidePaneRenderer = useMemo(() => ({\n    headerRenderer: onRenderHeader,\n    contentRenderer: onRenderContent,\n    id: VIDEO_EFFECTS_SIDE_PANE_ID\n  }), [onRenderContent, onRenderHeader]);\n  const openPane = useCallback(() => {\n    updateSidePaneRenderer(sidePaneRenderer);\n  }, [sidePaneRenderer, updateSidePaneRenderer]);\n  const isOpen = useIsParticularSidePaneOpen(VIDEO_EFFECTS_SIDE_PANE_ID);\n\n  // Update pane renderer if it is open and the openPane dep changes\n  useEffect(() => {\n    if (isOpen) {\n      openPane();\n    }\n  }, [isOpen, openPane]);\n  const togglePane = useCallback(() => {\n    if (isOpen) {\n      closePane();\n    } else {\n      openPane();\n    }\n  }, [closePane, isOpen, openPane]);\n  return {\n    openVideoEffectsPane: openPane,\n    closeVideoEffectsPane: closePane,\n    toggleVideoEffectsPane: togglePane,\n    isVideoEffectsPaneOpen: isOpen\n  };\n};\n\n/**\n * Active video effect with timestamp.\n *\n * @private\n */\nexport interface ActiveVideoEffect {\n  /**\n   * Type of video effect that is active.\n   */\n  type: 'blur' | 'replacement';\n  /**\n   * The latest timestamp when this effect was activated.\n   *\n   */\n  timestamp: Date;\n}"]}
+{"version":3,"file":"useVideoEffectsPane.js","sourceRoot":"","sources":["../../../../../../../../../react-composites/src/composites/CallComposite/components/SidePane/useVideoEffectsPane.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAC/D,OAAO,EAAoB,2BAA2B,EAAE,MAAM,oBAAoB,CAAC;AACnF,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAChE,2DAA2D;AAC3D,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAClD,OAAO,EAAE,uBAAuB,EAAE,MAAM,kCAAkC,CAAC;AAI3E,eAAe;AACf,MAAM,CAAC,MAAM,0BAA0B,GAAG,cAAc,CAAC;AAEzD,eAAe;AACf,MAAM,CAAC,MAAM,iCAAiC,GAAG,IAAI,CAAC;AAEtD,eAAe;AACf,MAAM,CAAC,MAAM,mBAAmB,GAAG,CACjC,sBAAwE,EACxE,UAAmB,EACnB,YAAkC,EAClC,cAAmD,EACnD,eAA0C,EAM1C,EAAE;IACF,MAAM,SAAS,GAAG,WAAW,CAAC,GAAG,EAAE;;QACjC,sBAAsB,CAAC,SAAS,CAAC,CAAC;QAClC,MAAA,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAE,OAAO,0CAAE,KAAK,EAAE,CAAC;IACpC,CAAC,EAAE,CAAC,eAAe,EAAE,sBAAsB,CAAC,CAAC,CAAC;IAE9C,2DAA2D;IAC3D,MAAM,MAAM,GAAG,SAAS,EAAE,CAAC;IAE3B,MAAM,cAAc,GAAG,WAAW,CAAC,GAAG,EAAE;;QACtC,OAAO,CACL,oBAAC,cAAc,IACb,OAAO,EAAE,SAAS;YAClB,2DAA2D;YAC3D,WAAW,EAAE,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,qBAAqB;YACtD,2DAA2D;YAC3D,8BAA8B,EAC5B,MAAA,MAAA,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,0BAA0B,mCAC9C,MAAM,CAAC,OAAO,CAAC,YAAY,CAAC,0BAA0B,mCACtD,OAAO,EAET,UAAU,EAAE,UAAU,GACtB,CACH,CAAC;IACJ,CAAC,EAAE,CAAC,SAAS,EAAE,2DAA2D,CAAC,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,CAAC,CAAC;IAExG,2DAA2D;IAC3D,MAAM,sBAAsB,GAAG,YAAY,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,IAAI,KAAK,0BAA0B,CAAC,CAAC;IAEvG,MAAM,eAAe,GAAG,WAAW,CAAC,GAAgB,EAAE;QACpD,OAAO,CACL,oBAAC,uBAAuB,IACtB,cAAc,EAAE,cAAc;YAC9B,2DAA2D;YAC3D,sBAAsB,EAAE,sBAAsB,EAC9C,uBAAuB,EAAE,GAAG,EAAE;gBAC5B,oFAAoF;gBACpF,2DAA2D;gBAC3D,sBAAsB,KAAI,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAG,sBAAsB,CAAC,CAAA,CAAC;YACrE,CAAC,GACD,CACH,CAAC;IACJ,CAAC,EAAE;QACD,2DAA2D;QAC3D,sBAAsB;QACtB,cAAc;KACf,CAAC,CAAC;IAEH,MAAM,gBAAgB,GAAqB,OAAO,CAChD,GAAG,EAAE,CAAC,CAAC;QACL,cAAc,EAAE,cAAc;QAC9B,eAAe,EAAE,eAAe;QAChC,EAAE,EAAE,0BAA0B;KAC/B,CAAC,EACF,CAAC,eAAe,EAAE,cAAc,CAAC,CAClC,CAAC;IAEF,MAAM,QAAQ,GAAG,WAAW,CAAC,GAAG,EAAE;QAChC,sBAAsB,CAAC,gBAAgB,CAAC,CAAC;IAC3C,CAAC,EAAE,CAAC,gBAAgB,EAAE,sBAAsB,CAAC,CAAC,CAAC;IAE/C,MAAM,MAAM,GAAG,2BAA2B,CAAC,0BAA0B,CAAC,CAAC;IAEvE,kEAAkE;IAClE,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,MAAM,EAAE;YACV,QAAQ,EAAE,CAAC;SACZ;IACH,CAAC,EAAE,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEvB,MAAM,UAAU,GAAG,WAAW,CAAC,GAAG,EAAE;QAClC,IAAI,MAAM,EAAE;YACV,SAAS,EAAE,CAAC;SACb;aAAM;YACL,QAAQ,EAAE,CAAC;SACZ;IACH,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC;IAElC,OAAO;QACL,oBAAoB,EAAE,QAAQ;QAC9B,qBAAqB,EAAE,SAAS;QAChC,sBAAsB,EAAE,UAAU;QAClC,sBAAsB,EAAE,MAAM;KAC/B,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport React, { useCallback, useEffect, useMemo } from 'react';\nimport { SidePaneRenderer, useIsParticularSidePaneOpen } from './SidePaneProvider';\nimport { SidePaneHeader } from '../../../common/SidePaneHeader';\n/* @conditional-compile-remove(video-background-effects) */\nimport { useLocale } from '../../../localization';\nimport { VideoEffectsPaneContent } from '../../../common/VideoEffectsPane';\nimport { ActiveErrorMessage } from '@internal/react-components';\nimport { IButton } from '@fluentui/react';\n\n/** @private */\nexport const VIDEO_EFFECTS_SIDE_PANE_ID = 'videoeffects';\n\n/** @private */\nexport const VIDEO_EFFECTS_SIDE_PANE_WIDTH_REM = 17.5;\n\n/** @private */\nexport const useVideoEffectsPane = (\n  updateSidePaneRenderer: (renderer: SidePaneRenderer | undefined) => void,\n  mobileView: boolean,\n  latestErrors: ActiveErrorMessage[],\n  onDismissError: (error: ActiveErrorMessage) => void,\n  cameraButtonRef?: React.RefObject<IButton>\n): {\n  openVideoEffectsPane: () => void;\n  closeVideoEffectsPane: () => void;\n  toggleVideoEffectsPane: () => void;\n  isVideoEffectsPaneOpen: boolean;\n} => {\n  const closePane = useCallback(() => {\n    updateSidePaneRenderer(undefined);\n    cameraButtonRef?.current?.focus();\n  }, [cameraButtonRef, updateSidePaneRenderer]);\n\n  /* @conditional-compile-remove(video-background-effects) */\n  const locale = useLocale();\n\n  const onRenderHeader = useCallback(() => {\n    return (\n      <SidePaneHeader\n        onClose={closePane}\n        /* @conditional-compile-remove(video-background-effects) */\n        headingText={locale.strings.call.videoEffectsPaneTitle}\n        /* @conditional-compile-remove(video-background-effects) */\n        dismissSidePaneButtonAriaLabel={\n          locale.strings.call.dismissSidePaneButtonLabel ??\n          locale.strings.callWithChat.dismissSidePaneButtonLabel ??\n          'Close'\n        }\n        mobileView={mobileView}\n      />\n    );\n  }, [closePane, /* @conditional-compile-remove(video-background-effects) */ locale.strings, mobileView]);\n\n  /* @conditional-compile-remove(video-background-effects) */\n  const latestVideoEffectError = latestErrors.find((error) => error.type === 'unableToStartVideoEffect');\n\n  const onRenderContent = useCallback((): JSX.Element => {\n    return (\n      <VideoEffectsPaneContent\n        onDismissError={onDismissError}\n        /* @conditional-compile-remove(video-background-effects) */\n        activeVideoEffectError={latestVideoEffectError}\n        activeVideoEffectChange={() => {\n          // Clear any existing video effects error when the user clicks on a new video effect\n          /* @conditional-compile-remove(video-background-effects) */\n          latestVideoEffectError && onDismissError?.(latestVideoEffectError);\n        }}\n      />\n    );\n  }, [\n    /* @conditional-compile-remove(video-background-effects) */\n    latestVideoEffectError,\n    onDismissError\n  ]);\n\n  const sidePaneRenderer: SidePaneRenderer = useMemo(\n    () => ({\n      headerRenderer: onRenderHeader,\n      contentRenderer: onRenderContent,\n      id: VIDEO_EFFECTS_SIDE_PANE_ID\n    }),\n    [onRenderContent, onRenderHeader]\n  );\n\n  const openPane = useCallback(() => {\n    updateSidePaneRenderer(sidePaneRenderer);\n  }, [sidePaneRenderer, updateSidePaneRenderer]);\n\n  const isOpen = useIsParticularSidePaneOpen(VIDEO_EFFECTS_SIDE_PANE_ID);\n\n  // Update pane renderer if it is open and the openPane dep changes\n  useEffect(() => {\n    if (isOpen) {\n      openPane();\n    }\n  }, [isOpen, openPane]);\n\n  const togglePane = useCallback(() => {\n    if (isOpen) {\n      closePane();\n    } else {\n      openPane();\n    }\n  }, [closePane, isOpen, openPane]);\n\n  return {\n    openVideoEffectsPane: openPane,\n    closeVideoEffectsPane: closePane,\n    toggleVideoEffectsPane: togglePane,\n    isVideoEffectsPaneOpen: isOpen\n  };\n};\n\n/**\n * Active video effect with timestamp.\n *\n * @private\n */\nexport interface ActiveVideoEffect {\n  /**\n   * Type of video effect that is active.\n   */\n  type: 'blur' | 'replacement';\n  /**\n   * The latest timestamp when this effect was activated.\n   *\n   */\n  timestamp: Date;\n}\n\"../../../../../../react-components/src\""]}

package/dist/dist-esm/react-composites/src/composites/CallComposite/components/StartCallButton.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { IButtonProps } from '@fluentui/react';
 /**
  * @private

package/dist/dist-esm/react-composites/src/composites/CallComposite/components/StartCallButton.js

@@ -11,6 +11,6 @@ import { useLocale } from '../../localization';
 export const StartCallButton = (props) => {
     const { rejoinCall } = props;
     const locale = useLocale();
-    return React.createElement(PrimaryButton, Object.assign({}, props, { "data-ui-id": "call-composite-start-call-button", className: mergeStyles(buttonStyle, props.className), styles: buttonWithIconStyles, text: rejoinCall ? locale.strings.call.rejoinCallButtonLabel : locale.strings.call.startCallButtonLabel, onRenderIcon: () => React.createElement(Video20Filled, { className: videoCameraIconStyle }) }));
+    return (React.createElement(PrimaryButton, Object.assign({}, props, { "data-ui-id": "call-composite-start-call-button", className: mergeStyles(buttonStyle, props.className), styles: buttonWithIconStyles, text: rejoinCall ? locale.strings.call.rejoinCallButtonLabel : locale.strings.call.startCallButtonLabel, onRenderIcon: () => React.createElement(Video20Filled, { className: videoCameraIconStyle }) })));
 };
 //# sourceMappingURL=StartCallButton.js.map

package/dist/dist-esm/react-composites/src/composites/CallComposite/components/StartCallButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"StartCallButton.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-composites/src/composites/CallComposite/components/StartCallButton.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,aAAa,EAAE,WAAW,EAAgB,MAAM,iBAAiB,CAAC;AAC3E,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,WAAW,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,MAAM,kCAAkC,CAAC;AAC3G,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACtD,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAW/C;;GAEG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,KAA2B,EAAe,EAAE;IAC1E,MAAM,EACJ,UAAU,EACX,GAAG,KAAK,CAAC;IACV,MAAM,MAAM,GAAG,SAAS,EAAE,CAAC;IAC3B,OAAO,oBAAC,aAAa,oBAAK,KAAK,kBAAa,kCAAkC,EAAC,SAAS,EAAE,WAAW,CAAC,WAAW,EAAE,KAAK,CAAC,SAAS,CAAC,EAAE,MAAM,EAAE,oBAAoB,EAAE,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,oBAAoB,EAAE,YAAY,EAAE,GAAG,EAAE,CAAC,oBAAC,aAAa,IAAC,SAAS,EAAE,oBAAoB,GAAI,IAAI,CAAC;AACzV,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { PrimaryButton, mergeStyles, IButtonProps } from '@fluentui/react';\nimport React from 'react';\nimport { buttonStyle, buttonWithIconStyles, videoCameraIconStyle } from '../styles/StartCallButton.styles';\nimport { Video20Filled } from '@fluentui/react-icons';\nimport { useLocale } from '../../localization';\n\n/**\n * @private\n */\nexport interface StartCallButtonProps extends IButtonProps {\n  className?: string;\n  /** If set, the button is intended to rejoin an existing call. */\n  rejoinCall?: boolean;\n}\n\n/**\n * @private\n */\nexport const StartCallButton = (props: StartCallButtonProps): JSX.Element => {\n  const {\n    rejoinCall\n  } = props;\n  const locale = useLocale();\n  return <PrimaryButton {...props} data-ui-id=\"call-composite-start-call-button\" className={mergeStyles(buttonStyle, props.className)} styles={buttonWithIconStyles} text={rejoinCall ? locale.strings.call.rejoinCallButtonLabel : locale.strings.call.startCallButtonLabel} onRenderIcon={() => <Video20Filled className={videoCameraIconStyle} />} />;\n};"]}
+{"version":3,"file":"StartCallButton.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallComposite/components/StartCallButton.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,aAAa,EAAE,WAAW,EAAgB,MAAM,iBAAiB,CAAC;AAC3E,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,WAAW,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,MAAM,kCAAkC,CAAC;AAC3G,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACtD,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAW/C;;GAEG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,KAA2B,EAAe,EAAE;IAC1E,MAAM,EAAE,UAAU,EAAE,GAAG,KAAK,CAAC;IAC7B,MAAM,MAAM,GAAG,SAAS,EAAE,CAAC;IAE3B,OAAO,CACL,oBAAC,aAAa,oBACR,KAAK,kBACE,kCAAkC,EAC7C,SAAS,EAAE,WAAW,CAAC,WAAW,EAAE,KAAK,CAAC,SAAS,CAAC,EACpD,MAAM,EAAE,oBAAoB,EAC5B,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,oBAAoB,EACvG,YAAY,EAAE,GAAG,EAAE,CAAC,oBAAC,aAAa,IAAC,SAAS,EAAE,oBAAoB,GAAI,IACtE,CACH,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { PrimaryButton, mergeStyles, IButtonProps } from '@fluentui/react';\nimport React from 'react';\nimport { buttonStyle, buttonWithIconStyles, videoCameraIconStyle } from '../styles/StartCallButton.styles';\nimport { Video20Filled } from '@fluentui/react-icons';\nimport { useLocale } from '../../localization';\n\n/**\n * @private\n */\nexport interface StartCallButtonProps extends IButtonProps {\n  className?: string;\n  /** If set, the button is intended to rejoin an existing call. */\n  rejoinCall?: boolean;\n}\n\n/**\n * @private\n */\nexport const StartCallButton = (props: StartCallButtonProps): JSX.Element => {\n  const { rejoinCall } = props;\n  const locale = useLocale();\n\n  return (\n    <PrimaryButton\n      {...props}\n      data-ui-id=\"call-composite-start-call-button\"\n      className={mergeStyles(buttonStyle, props.className)}\n      styles={buttonWithIconStyles}\n      text={rejoinCall ? locale.strings.call.rejoinCallButtonLabel : locale.strings.call.startCallButtonLabel}\n      onRenderIcon={() => <Video20Filled className={videoCameraIconStyle} />}\n    />\n  );\n};\n"]}

package/dist/dist-esm/react-composites/src/composites/CallComposite/components/buttons/Camera.d.ts

@@ -1,6 +1,7 @@
-/// <reference types="react" />
 import { ControlBarButtonStyles } from "../../../../../../react-components/src";
+import React from 'react';
 import { CallControlDisplayType } from '../../../common/types/CommonCallControlOptions';
+import { IButton } from '@fluentui/react';
 /**
  * @private
  */
@@ -10,5 +11,6 @@ export declare const Camera: (props: {
     splitButtonsForDeviceSelection?: boolean | undefined;
     disabled?: boolean | undefined;
     onShowVideoEffectsPicker?: ((showVideoEffectsOptions: boolean) => void) | undefined;
+    componentRef?: React.RefObject<IButton> | undefined;
 }) => JSX.Element;
 //# sourceMappingURL=Camera.d.ts.map

package/dist/dist-esm/react-composites/src/composites/CallComposite/components/buttons/Camera.js

@@ -4,13 +4,23 @@ import { CameraButton } from "../../../../../../react-components/src";
 import React, { useMemo } from 'react';
 import { usePropsFor } from '../../hooks/usePropsFor';
 import { concatButtonBaseStyles } from '../../styles/Buttons.styles';
+/* @conditional-compile-remove(rooms) */
+import { useAdapter } from '../../adapter/CallAdapterProvider';
 /**
  * @private
  */
 export const Camera = (props) => {
+    var _a;
     const cameraButtonProps = usePropsFor(CameraButton);
     const styles = useMemo(() => { var _a; return concatButtonBaseStyles((_a = props.styles) !== null && _a !== void 0 ? _a : {}); }, [props.styles]);
-    return React.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, 
-        /* @conditional-compile-remove(video-background-effects) */ onShowVideoEffectsPicker: props.onShowVideoEffectsPicker }));
+    /* @conditional-compile-remove(rooms) */
+    const adapter = useAdapter();
+    /* @conditional-compile-remove(rooms) */
+    const isRoomsCall = adapter.getState().isRoomsCall;
+    return (React.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 ||
+            /* @conditional-compile-remove(rooms) */ (isRoomsCall && ((_a = adapter.getState().call) === null || _a === void 0 ? void 0 : _a.role) === 'Unknown'), 
+        /* @conditional-compile-remove(video-background-effects) */
+        onShowVideoEffectsPicker: props.onShowVideoEffectsPicker, componentRef: props.componentRef })));
 };
 //# sourceMappingURL=Camera.js.map

package/dist/dist-esm/react-composites/src/composites/CallComposite/components/buttons/Camera.js.map

@@ -1 +1 @@
-{"version":3,"file":"Camera.js","sourceRoot":"","sources":["../../../../../../../../preprocess-dist/react-composites/src/composites/CallComposite/components/buttons/Camera.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,YAAY,EAA0B,+CAAmC;AAClF,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AACtD,OAAO,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAC;AAErE;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,KAOtB,EAAe,EAAE;IAChB,MAAM,iBAAiB,GAAG,WAAW,CAAC,YAAY,CAAC,CAAC;IACpD,MAAM,MAAM,GAAG,OAAO,CAAC,GAAG,EAAE,WAAC,OAAA,sBAAsB,CAAC,MAAA,KAAK,CAAC,MAAM,mCAAI,EAAE,CAAC,CAAA,EAAA,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC;IACzF,OAAO,oBAAC,YAAY,gCAAY,8BAA8B,IAAK,iBAAiB,IAAE,SAAS,EAAE,KAAK,CAAC,WAAW,KAAK,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,yBAAyB,EAAE,KAAK,CAAC,8BAA8B,EAAE,QAAQ,EAAE,iBAAiB,CAAC,QAAQ,IAAI,KAAK,CAAC,QAAQ;QACzQ,2DAA2D,CAAC,wBAAwB,EAAE,KAAK,CAAC,wBAAwB,IAAI,CAAC;AAC3H,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { CameraButton, ControlBarButtonStyles } from '@internal/react-components';\nimport React, { useMemo } from 'react';\nimport { CallControlDisplayType } from '../../../common/types/CommonCallControlOptions';\nimport { usePropsFor } from '../../hooks/usePropsFor';\nimport { concatButtonBaseStyles } from '../../styles/Buttons.styles';\n\n/**\n * @private\n */\nexport const Camera = (props: {\n  displayType?: CallControlDisplayType;\n  styles?: ControlBarButtonStyles;\n  splitButtonsForDeviceSelection?: boolean;\n  disabled?: boolean;\n  /* @conditional-compile-remove(video-background-effects) */\n  onShowVideoEffectsPicker?: (showVideoEffectsOptions: boolean) => void;\n}): JSX.Element => {\n  const cameraButtonProps = usePropsFor(CameraButton);\n  const styles = useMemo(() => concatButtonBaseStyles(props.styles ?? {}), [props.styles]);\n  return <CameraButton data-ui-id=\"call-composite-camera-button\" {...cameraButtonProps} showLabel={props.displayType !== 'compact'} styles={styles} enableDeviceSelectionMenu={props.splitButtonsForDeviceSelection} disabled={cameraButtonProps.disabled || props.disabled}\n  /* @conditional-compile-remove(video-background-effects) */ onShowVideoEffectsPicker={props.onShowVideoEffectsPicker} />;\n};\"../../../../../../react-components/src\""]}
+{"version":3,"file":"Camera.js","sourceRoot":"","sources":["../../../../../../../../../react-composites/src/composites/CallComposite/components/buttons/Camera.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,YAAY,EAA0B,+CAAmC;AAClF,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AACtD,OAAO,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAC;AACrE,wCAAwC;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,mCAAmC,CAAC;AAG/D;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,KAQtB,EAAe,EAAE;;IAChB,MAAM,iBAAiB,GAAG,WAAW,CAAC,YAAY,CAAC,CAAC;IACpD,MAAM,MAAM,GAAG,OAAO,CAAC,GAAG,EAAE,WAAC,OAAA,sBAAsB,CAAC,MAAA,KAAK,CAAC,MAAM,mCAAI,EAAE,CAAC,CAAA,EAAA,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC;IACzF,wCAAwC;IACxC,MAAM,OAAO,GAAG,UAAU,EAAE,CAAC;IAC7B,wCAAwC;IACxC,MAAM,WAAW,GAAG,OAAO,CAAC,QAAQ,EAAE,CAAC,WAAW,CAAC;IACnD,OAAO,CACL,oBAAC,YAAY,gCACA,8BAA8B,IACrC,iBAAiB,IACrB,SAAS,EAAE,KAAK,CAAC,WAAW,KAAK,SAAS,EAC1C,MAAM,EAAE,MAAM,EACd,yBAAyB,EAAE,KAAK,CAAC,8BAA8B,EAC/D,QAAQ,EACN,iBAAiB,CAAC,QAAQ;YAC1B,KAAK,CAAC,QAAQ;YACd,wCAAwC,CAAC,CAAC,WAAW,IAAI,CAAA,MAAA,OAAO,CAAC,QAAQ,EAAE,CAAC,IAAI,0CAAE,IAAI,MAAK,SAAS,CAAC;QAEvG,2DAA2D;QAC3D,wBAAwB,EAAE,KAAK,CAAC,wBAAwB,EACxD,YAAY,EAAE,KAAK,CAAC,YAAY,IAChC,CACH,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { CameraButton, ControlBarButtonStyles } from '@internal/react-components';\nimport React, { useMemo } from 'react';\nimport { CallControlDisplayType } from '../../../common/types/CommonCallControlOptions';\nimport { usePropsFor } from '../../hooks/usePropsFor';\nimport { concatButtonBaseStyles } from '../../styles/Buttons.styles';\n/* @conditional-compile-remove(rooms) */\nimport { useAdapter } from '../../adapter/CallAdapterProvider';\nimport { IButton } from '@fluentui/react';\n\n/**\n * @private\n */\nexport const Camera = (props: {\n  displayType?: CallControlDisplayType;\n  styles?: ControlBarButtonStyles;\n  splitButtonsForDeviceSelection?: boolean;\n  disabled?: boolean;\n  /* @conditional-compile-remove(video-background-effects) */\n  onShowVideoEffectsPicker?: (showVideoEffectsOptions: boolean) => void;\n  componentRef?: React.RefObject<IButton>;\n}): JSX.Element => {\n  const cameraButtonProps = usePropsFor(CameraButton);\n  const styles = useMemo(() => concatButtonBaseStyles(props.styles ?? {}), [props.styles]);\n  /* @conditional-compile-remove(rooms) */\n  const adapter = useAdapter();\n  /* @conditional-compile-remove(rooms) */\n  const isRoomsCall = adapter.getState().isRoomsCall;\n  return (\n    <CameraButton\n      data-ui-id=\"call-composite-camera-button\"\n      {...cameraButtonProps}\n      showLabel={props.displayType !== 'compact'}\n      styles={styles}\n      enableDeviceSelectionMenu={props.splitButtonsForDeviceSelection}\n      disabled={\n        cameraButtonProps.disabled ||\n        props.disabled ||\n        /* @conditional-compile-remove(rooms) */ (isRoomsCall && adapter.getState().call?.role === 'Unknown')\n      }\n      /* @conditional-compile-remove(video-background-effects) */\n      onShowVideoEffectsPicker={props.onShowVideoEffectsPicker}\n      componentRef={props.componentRef}\n    />\n  );\n};\n\"../../../../../../react-components/src\""]}

package/dist/dist-esm/react-composites/src/composites/CallComposite/components/buttons/Custom.d.ts

@@ -1,7 +1,5 @@
-/// <reference types="react" />
 import { CustomCallControlButtonCallback, CustomCallControlButtonPlacement } from '../../../common/ControlBar/CustomButton';
 import { CallControlDisplayType } from '../../../common/types/CommonCallControlOptions';
-import { CallControlOptions } from '../../types/CallControlOptions';
 /** @private */
 export declare type CustomButtons = {
     [key in CustomCallControlButtonPlacement]: JSX.Element | undefined;
@@ -9,5 +7,10 @@ export declare type CustomButtons = {
 /** @private */
 export declare const generateCustomControlBarButtons: (onFetchCustomButtonProps?: CustomCallControlButtonCallback[] | undefined, displayType?: CallControlDisplayType | undefined) => CustomButtons;
 /** @private */
-export declare const onFetchCustomButtonPropsTrampoline: (options?: CallControlOptions | undefined) => CustomCallControlButtonCallback[] | undefined;
+export declare const onFetchCustomButtonPropsTrampoline: (options?: (import("../../../common/types/CommonCallControlOptions").CommonCallControlOptions & {
+    participantsButton?: boolean | {
+        disabled: boolean;
+    } | undefined;
+    legacyControlBarExperience?: boolean | undefined;
+}) | undefined) => CustomCallControlButtonCallback[] | undefined;
 //# sourceMappingURL=Custom.d.ts.map

package/dist/dist-esm/react-composites/src/composites/CallComposite/components/buttons/Custom.js

@@ -14,11 +14,14 @@ export const generateCustomControlBarButtons = (onFetchCustomButtonProps, displa
     if (!onFetchCustomButtonProps) {
         return response;
     }
-    const allButtonProps = onFetchCustomButtonProps.map(f => f({
-        displayType
-    }));
+    const allButtonProps = onFetchCustomButtonProps.map((f) => f({ displayType }));
     for (const key in response) {
-        response[key] = React.createElement(React.Fragment, null, allButtonProps.filter(buttonProps => buttonProps.placement === key).map((buttonProps, i) => { var _a; return React.createElement(ControlBarButton, { ariaDescription: buttonProps.ariaDescription, ariaLabel: buttonProps.ariaLabel, disabled: buttonProps.disabled, id: buttonProps.id, key: (_a = buttonProps.key) !== null && _a !== void 0 ? _a : `${buttonProps.placement}_${i}`, onClick: buttonProps.onItemClick, onRenderIcon: () => { var _a; return React.createElement(Icon, { iconName: (_a = buttonProps.iconName) !== null && _a !== void 0 ? _a : 'ControlButtonOptions' }); }, showLabel: buttonProps.showLabel, text: buttonProps.text, styles: buttonProps.styles }); }));
+        response[key] = (React.createElement(React.Fragment, null, allButtonProps
+            .filter((buttonProps) => buttonProps.placement === key)
+            .map((buttonProps, i) => {
+            var _a;
+            return (React.createElement(ControlBarButton, { ariaDescription: buttonProps.ariaDescription, ariaLabel: buttonProps.ariaLabel, disabled: buttonProps.disabled, id: buttonProps.id, key: (_a = buttonProps.key) !== null && _a !== void 0 ? _a : `${buttonProps.placement}_${i}`, onClick: buttonProps.onItemClick, onRenderIcon: () => { var _a; return React.createElement(Icon, { iconName: (_a = buttonProps.iconName) !== null && _a !== void 0 ? _a : 'ControlButtonOptions' }); }, showLabel: buttonProps.showLabel, text: buttonProps.text, styles: buttonProps.styles }));
+        })));
     }
     return response;
 };

package/dist/dist-esm/react-composites/src/composites/CallComposite/components/buttons/Custom.js.map

@@ -1 +1 @@
-{"version":3,"file":"Custom.js","sourceRoot":"","sources":["../../../../../../../../preprocess-dist/react-composites/src/composites/CallComposite/components/buttons/Custom.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,iDAAiD;AACjD,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AACvC,OAAO,EAAE,gBAAgB,EAAwB,+CAAmC;AACpF,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,eAAe;AACf,MAAM,CAAC,MAAM,+BAA+B,GAAG,CAAC,wBAA4D,EAAE,WAAoC,EAAiB,EAAE;IACnK,MAAM,QAAQ,GAAG;QACf,OAAO,EAAE,SAAS;QAClB,QAAQ,EAAE,SAAS;QACnB,SAAS,EAAE,SAAS;KACrB,CAAC;IACF,IAAI,CAAC,wBAAwB,EAAE;QAC7B,OAAO,QAAQ,CAAC;KACjB;IACD,MAAM,cAAc,GAAG,wBAAwB,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;QACzD,WAAW;KACZ,CAAC,CAAC,CAAC;IACJ,KAAK,MAAM,GAAG,IAAI,QAAQ,EAAE;QAC1B,QAAQ,CAAC,GAAG,CAAC,GAAG,0CACX,cAAc,CAAC,MAAM,CAAC,WAAW,CAAC,EAAE,CAAC,WAAW,CAAC,SAAS,KAAK,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,WAAW,EAAE,CAAC,EAAE,EAAE,WAAC,OAAA,oBAAC,gBAAgB,IAAC,eAAe,EAAE,WAAW,CAAC,eAAe,EAAE,SAAS,EAAE,WAAW,CAAC,SAAS,EAAE,QAAQ,EAAE,WAAW,CAAC,QAAQ,EAAE,EAAE,EAAE,WAAW,CAAC,EAAE,EAAE,GAAG,EAAE,MAAA,WAAW,CAAC,GAAG,mCAAI,GAAG,WAAW,CAAC,SAAS,IAAI,CAAC,EAAE,EAAE,OAAO,EAAE,WAAW,CAAC,WAAW,EAAE,YAAY,EAAE,GAAG,EAAE,WAAC,OAAA,oBAAC,IAAI,IAAC,QAAQ,EAAE,MAAA,WAAW,CAAC,QAAQ,mCAAI,sBAAsB,GAAI,CAAA,EAAA,EAAE,SAAS,EAAE,WAAW,CAAC,SAAS,EAAE,IAAI,EAAE,WAAW,CAAC,IAAI,EAAE,MAAM,EAAE,WAAW,CAAC,MAAM,GAAI,CAAA,EAAA,CAAC,CAC9f,CAAC;KACP;IACD,OAAO,QAAQ,CAAC;AAClB,CAAC,CAAC;AAEF,eAAe;AACf,MAAM,CAAC,MAAM,kCAAkC,GAAG,CAAC,OAA4B,EAAiD,EAAE;;IAChI,IAAI,QAAQ,GAAkD,SAAS,CAAC;IACxE,QAAQ,GAAG,MAAC,OAAqC,0CAAE,wBAAwB,CAAC;IAC5E,OAAO,QAAQ,CAAC;AAClB,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\n// eslint-disable-next-line no-restricted-imports\nimport { Icon } from '@fluentui/react';\nimport { ControlBarButton, _DrawerMenuItemProps } from '@internal/react-components';\nimport React from 'react';\nimport { CustomCallControlButtonCallback, CustomCallControlButtonPlacement } from '../../../common/ControlBar/CustomButton';\nimport { CallControlDisplayType, _CommonCallControlOptions } from '../../../common/types/CommonCallControlOptions';\nimport { CallControlOptions } from '../../types/CallControlOptions';\n\n/** @private */\nexport type CustomButtons = { [key in CustomCallControlButtonPlacement]: JSX.Element | undefined };\n\n/** @private */\nexport const generateCustomControlBarButtons = (onFetchCustomButtonProps?: CustomCallControlButtonCallback[], displayType?: CallControlDisplayType): CustomButtons => {\n  const response = {\n    primary: undefined,\n    overflow: undefined,\n    secondary: undefined\n  };\n  if (!onFetchCustomButtonProps) {\n    return response;\n  }\n  const allButtonProps = onFetchCustomButtonProps.map(f => f({\n    displayType\n  }));\n  for (const key in response) {\n    response[key] = <>\n        {allButtonProps.filter(buttonProps => buttonProps.placement === key).map((buttonProps, i) => <ControlBarButton ariaDescription={buttonProps.ariaDescription} ariaLabel={buttonProps.ariaLabel} disabled={buttonProps.disabled} id={buttonProps.id} key={buttonProps.key ?? `${buttonProps.placement}_${i}`} onClick={buttonProps.onItemClick} onRenderIcon={() => <Icon iconName={buttonProps.iconName ?? 'ControlButtonOptions'} />} showLabel={buttonProps.showLabel} text={buttonProps.text} styles={buttonProps.styles} />)}\n      </>;\n  }\n  return response;\n};\n\n/** @private */\nexport const onFetchCustomButtonPropsTrampoline = (options?: CallControlOptions): CustomCallControlButtonCallback[] | undefined => {\n  let response: CustomCallControlButtonCallback[] | undefined = undefined;\n  response = (options as _CommonCallControlOptions)?.onFetchCustomButtonProps;\n  return response;\n};\"../../../../../../react-components/src\""]}
+{"version":3,"file":"Custom.js","sourceRoot":"","sources":["../../../../../../../../../react-composites/src/composites/CallComposite/components/buttons/Custom.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,iDAAiD;AACjD,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AACvC,OAAO,EAAE,gBAAgB,EAAwB,+CAAmC;AACpF,OAAO,KAAK,MAAM,OAAO,CAAC;AAW1B,eAAe;AACf,MAAM,CAAC,MAAM,+BAA+B,GAAG,CAC7C,wBAA4D,EAC5D,WAAoC,EACrB,EAAE;IACjB,MAAM,QAAQ,GAAG;QACf,OAAO,EAAE,SAAS;QAClB,QAAQ,EAAE,SAAS;QACnB,SAAS,EAAE,SAAS;KACrB,CAAC;IAEF,IAAI,CAAC,wBAAwB,EAAE;QAC7B,OAAO,QAAQ,CAAC;KACjB;IAED,MAAM,cAAc,GAAG,wBAAwB,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,WAAW,EAAE,CAAC,CAAC,CAAC;IAE/E,KAAK,MAAM,GAAG,IAAI,QAAQ,EAAE;QAC1B,QAAQ,CAAC,GAAG,CAAC,GAAG,CACd,0CACG,cAAc;aACZ,MAAM,CAAC,CAAC,WAAW,EAAE,EAAE,CAAC,WAAW,CAAC,SAAS,KAAK,GAAG,CAAC;aACtD,GAAG,CAAC,CAAC,WAAW,EAAE,CAAC,EAAE,EAAE;;YAAC,OAAA,CACvB,oBAAC,gBAAgB,IACf,eAAe,EAAE,WAAW,CAAC,eAAe,EAC5C,SAAS,EAAE,WAAW,CAAC,SAAS,EAChC,QAAQ,EAAE,WAAW,CAAC,QAAQ,EAC9B,EAAE,EAAE,WAAW,CAAC,EAAE,EAClB,GAAG,EAAE,MAAA,WAAW,CAAC,GAAG,mCAAI,GAAG,WAAW,CAAC,SAAS,IAAI,CAAC,EAAE,EACvD,OAAO,EAAE,WAAW,CAAC,WAAW,EAChC,YAAY,EAAE,GAAG,EAAE,WAAC,OAAA,oBAAC,IAAI,IAAC,QAAQ,EAAE,MAAA,WAAW,CAAC,QAAQ,mCAAI,sBAAsB,GAAI,CAAA,EAAA,EACtF,SAAS,EAAE,WAAW,CAAC,SAAS,EAChC,IAAI,EAAE,WAAW,CAAC,IAAI,EACtB,MAAM,EAAE,WAAW,CAAC,MAAM,GAC1B,CACH,CAAA;SAAA,CAAC,CACH,CACJ,CAAC;KACH;IACD,OAAO,QAAQ,CAAC;AAClB,CAAC,CAAC;AAEF,eAAe;AACf,MAAM,CAAC,MAAM,kCAAkC,GAAG,CAChD,OAA4B,EACmB,EAAE;;IACjD,IAAI,QAAQ,GAAkD,SAAS,CAAC;IACxE,QAAQ,GAAG,MAAC,OAAqC,0CAAE,wBAAwB,CAAC;IAC5E,OAAO,QAAQ,CAAC;AAClB,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\n// eslint-disable-next-line no-restricted-imports\nimport { Icon } from '@fluentui/react';\nimport { ControlBarButton, _DrawerMenuItemProps } from '@internal/react-components';\nimport React from 'react';\nimport {\n  CustomCallControlButtonCallback,\n  CustomCallControlButtonPlacement\n} from '../../../common/ControlBar/CustomButton';\nimport { CallControlDisplayType, _CommonCallControlOptions } from '../../../common/types/CommonCallControlOptions';\nimport { CallControlOptions } from '../../types/CallControlOptions';\n\n/** @private */\nexport type CustomButtons = { [key in CustomCallControlButtonPlacement]: JSX.Element | undefined };\n\n/** @private */\nexport const generateCustomControlBarButtons = (\n  onFetchCustomButtonProps?: CustomCallControlButtonCallback[],\n  displayType?: CallControlDisplayType\n): CustomButtons => {\n  const response = {\n    primary: undefined,\n    overflow: undefined,\n    secondary: undefined\n  };\n\n  if (!onFetchCustomButtonProps) {\n    return response;\n  }\n\n  const allButtonProps = onFetchCustomButtonProps.map((f) => f({ displayType }));\n\n  for (const key in response) {\n    response[key] = (\n      <>\n        {allButtonProps\n          .filter((buttonProps) => buttonProps.placement === key)\n          .map((buttonProps, i) => (\n            <ControlBarButton\n              ariaDescription={buttonProps.ariaDescription}\n              ariaLabel={buttonProps.ariaLabel}\n              disabled={buttonProps.disabled}\n              id={buttonProps.id}\n              key={buttonProps.key ?? `${buttonProps.placement}_${i}`}\n              onClick={buttonProps.onItemClick}\n              onRenderIcon={() => <Icon iconName={buttonProps.iconName ?? 'ControlButtonOptions'} />}\n              showLabel={buttonProps.showLabel}\n              text={buttonProps.text}\n              styles={buttonProps.styles}\n            />\n          ))}\n      </>\n    );\n  }\n  return response;\n};\n\n/** @private */\nexport const onFetchCustomButtonPropsTrampoline = (\n  options?: CallControlOptions\n): CustomCallControlButtonCallback[] | undefined => {\n  let response: CustomCallControlButtonCallback[] | undefined = undefined;\n  response = (options as _CommonCallControlOptions)?.onFetchCustomButtonProps;\n  return response;\n};\n\"../../../../../../react-components/src\""]}

package/dist/dist-esm/react-composites/src/composites/CallComposite/components/buttons/Devices.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ControlBarButtonStyles } from "../../../../../../react-components/src";
 import { CallControlDisplayType } from '../../../common/types/CommonCallControlOptions';
 /** @private */