@azure/communication-react 1.7.0-beta.2 → 1.7.1-alpha-202308172328

package/dist/dist-esm/communication-react/src/mergedHooks.js.map

@@ -1 +1 @@
-{"version":3,"file":"mergedHooks.js","sourceRoot":"","sources":["../../../../preprocess-dist/communication-react/src/mergedHooks.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAClC,OAAO,EAAmB,kBAAkB,EAAsB,kBAAkB,EAAE,kBAAkB,EAAE,6CAA6C;AACvJ,OAAO,EAAgB,eAAe,EAAmB,eAAe,EAAE,eAAe,EAAE,0CAA0C;AAoBrI;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,CAAuC,QAAgB,EAAE,aAA2E,EAAE,IAAyB,EAA4D,EAAE;IACtP,oEAAoE;IACpE,8DAA8D;IAC9D,+DAA+D;IAC/D,MAAM,WAAW,GAAG,CAAC,IAAI,IAAI,IAAI,KAAK,SAAS,CAAC;IAChD,MAAM,QAAQ,GAAG,CAAC,IAAI,IAAI,IAAI,KAAK,MAAM,CAAC;IAC1C,MAAM,SAAS,GAAG,kBAAkB,CAAC,WAAW,CAAC,CAAC,CAAE,QAAgB,CAAC,CAAC,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;IACjG,MAAM,SAAS,GAAG,eAAe,CAAC,QAAQ,CAAC,CAAC,CAAE,QAAgB,CAAC,CAAC,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;IAC3F,OAAO,SAAS,aAAT,SAAS,cAAT,SAAS,GAAI,SAAS,CAAC;AAChC,CAAC,CAAC;AAuBF;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,CAAiD,SAAoB,EAAE,IAAyB,EAA6B,EAAE;IACxJ,MAAM,eAAe,GAAG,IAAI,KAAK,SAAS,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,kBAAkB,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;IAChG,MAAM,YAAY,GAAG,IAAI,KAAK,MAAM,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,eAAe,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;IACvF,MAAM,SAAS,GAAG,kBAAkB,CAAC,eAAe,CAAC,CAAC;IACtD,MAAM,SAAS,GAAG,eAAe,CAAC,YAAY,CAAC,CAAC;IAChD,MAAM,eAAe,GAAG,kBAAkB,CAA2B,SAAS,CAAC,CAAC;IAChF,MAAM,YAAY,GAAG,eAAe,CAA2B,SAAS,CAAC,CAAC;IAC1E,IAAI,SAAS,EAAE;QACb,IAAI,CAAC,YAAY,EAAE;YACjB,MAAM,0DAA0D,CAAC;SAClE;QACD,OAAQ,gCACH,SAAS,GACT,YAAY,CACR,CAAC;KACX;IACD,IAAI,SAAS,EAAE;QACb,IAAI,CAAC,eAAe,EAAE;YACpB,MAAM,qCAAqC,CAAC;SAC7C;QACD,OAAQ,gCACH,SAAS,GACT,eAAe,CACX,CAAC;KACX;IACD,IAAI,CAAC,YAAY,IAAI,CAAC,eAAe,EAAE;QACrC,MAAM,iJAAiJ,CAAC;KACzJ;SAAM;QACL,MAAM,oGAAoG,CAAC;KAC5G;AACH,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\nimport { CallingHandlers, getCallingSelector, GetCallingSelector, useCallingHandlers, useCallingSelector } from '@internal/calling-component-bindings';\nimport { ChatHandlers, getChatSelector, GetChatSelector, useChatHandlers, useChatSelector } from '@internal/chat-component-bindings';\nimport { ChatClientState } from '@internal/chat-stateful-client';\nimport { CallClientState } from '@internal/calling-stateful-client';\nimport { Common } from '@internal/acs-ui-common';\n\n/**\n * Centralized state for {@link @azure/communication-calling#CallClient} or {@link @azure/communication-chat#ChatClient}.\n *\n * See also: {@link CallClientState}, {@link ChatClientState}.\n * @public\n */\nexport type ClientState = CallClientState & ChatClientState;\n\n/**\n * An optimized selector that refines {@link ClientState} updates into props for React Components in this library.\n *\n * @public\n */\nexport type Selector = (state: ClientState, props: any) => any;\n\n/**\n * Hook to obtain a selector for a specified component.\n *\n * Useful when implementing a custom component that utilizes the providers\n * exported from this library.\n *\n * @public\n */\nexport const useSelector = <ParamT extends Selector | undefined,>(selector: ParamT, selectorProps?: ParamT extends Selector ? Parameters<ParamT>[1] : undefined, type?: 'calling' | 'chat'): ParamT extends Selector ? ReturnType<ParamT> : undefined => {\n  // Because of react hooks rules, hooks can't be conditionally called\n  // We call both call and chat hooks and detect current context\n  // Return undefined and skip execution when not in that context\n  const callingMode = !type || type === 'calling';\n  const chatMode = !type || type === 'chat';\n  const callProps = useCallingSelector(callingMode ? (selector as any) : undefined, selectorProps);\n  const chatProps = useChatSelector(chatMode ? (selector as any) : undefined, selectorProps);\n  return callProps ?? chatProps;\n};\n\n/**\n * Helper type for {@link usePropsFor}.\n *\n * @public\n */\nexport type ChatReturnProps<Component extends (props: any) => JSX.Element> = GetChatSelector<Component> extends (state: ChatClientState, props: any) => any ? ReturnType<GetChatSelector<Component>> & Common<ChatHandlers, Parameters<Component>[0]> : never;\n\n/**\n * Helper type for {@link usePropsFor}.\n *\n * @public\n */\nexport type CallingReturnProps<Component extends (props: any) => JSX.Element> = GetCallingSelector<Component> extends (state: CallClientState, props: any) => any ? ReturnType<GetCallingSelector<Component>> & Common<CallingHandlers, Parameters<Component>[0]> : never;\n\n/**\n * Helper type for {@link usePropsFor}.\n *\n * @public\n */\nexport type ComponentProps<Component extends (props: any) => JSX.Element> = ChatReturnProps<Component> extends never ? CallingReturnProps<Component> extends never ? undefined : CallingReturnProps<Component> : ChatReturnProps<Component>;\n\n/**\n * Primary hook to get all hooks necessary for a React Component from this library.\n *\n * To call this hook, the component requires to be wrapped under these providers:\n *\n * 1. For chat components: {@link ChatClientProvider} and {@link ChatThreadClientProvider}.\n *\n * 2. For calling components: {@link CallClientProvider}, {@link CallAgentProvider} and {@link CallAgentProvider}.\n *\n * Most straightforward usage of a components looks like:\n *\n * @example\n * ```\n *     import { ParticipantList, usePropsFor } from '@azure/communication-react';\n *\n *     const App = (): JSX.Element => {\n *         // ... code to setup Providers ...\n *\n *         return <ParticipantList {...usePropsFor(ParticipantList)}/>\n *     }\n * ```\n *\n * @public\n */\nexport const usePropsFor = <Component extends (props: any) => JSX.Element,>(component: Component, type?: 'calling' | 'chat'): ComponentProps<Component> => {\n  const callingSelector = type === 'calling' || !type ? getCallingSelector(component) : undefined;\n  const chatSelector = type === 'chat' || !type ? getChatSelector(component) : undefined;\n  const callProps = useCallingSelector(callingSelector);\n  const chatProps = useChatSelector(chatSelector);\n  const callingHandlers = useCallingHandlers<Parameters<Component>[0]>(component);\n  const chatHandlers = useChatHandlers<Parameters<Component>[0]>(component);\n  if (chatProps) {\n    if (!chatHandlers) {\n      throw 'Please initialize chatClient and chatThreadClient first!';\n    }\n    return ({\n      ...chatProps,\n      ...chatHandlers\n    } as any);\n  }\n  if (callProps) {\n    if (!callingHandlers) {\n      throw 'Please initialize callClient first!';\n    }\n    return ({\n      ...callProps,\n      ...callingHandlers\n    } as any);\n  }\n  if (!chatSelector && !callingSelector) {\n    throw \"Can't find corresponding selector for this component. Please check the supported components from Azure Communication UI Feature Component List.\";\n  } else {\n    throw 'Could not find props for this component, ensure the component is wrapped by appropriate providers.';\n  }\n};\"../../calling-component-bindings/src\"\"../../chat-component-bindings/src\"\"../../chat-stateful-client/src\"\"../../calling-stateful-client/src\"\"../../acs-ui-common/src\""]}
+{"version":3,"file":"mergedHooks.js","sourceRoot":"","sources":["../../../../src/mergedHooks.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAClC,OAAO,EAEL,kBAAkB,EAElB,kBAAkB,EAClB,kBAAkB,EACnB,6CAA6C;AAC9C,OAAO,EAEL,eAAe,EAEf,eAAe,EACf,eAAe,EAChB,0CAA0C;AAoB3C;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,CACzB,QAAgB,EAChB,aAA2E,EAC3E,IAAyB,EACiC,EAAE;IAC5D,oEAAoE;IACpE,8DAA8D;IAC9D,+DAA+D;IAC/D,MAAM,WAAW,GAAG,CAAC,IAAI,IAAI,IAAI,KAAK,SAAS,CAAC;IAChD,MAAM,QAAQ,GAAG,CAAC,IAAI,IAAI,IAAI,KAAK,MAAM,CAAC;IAC1C,MAAM,SAAS,GAAG,kBAAkB,CAAC,WAAW,CAAC,CAAC,CAAE,QAAgB,CAAC,CAAC,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;IACjG,MAAM,SAAS,GAAG,eAAe,CAAC,QAAQ,CAAC,CAAC,CAAE,QAAgB,CAAC,CAAC,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;IAC3F,OAAO,SAAS,aAAT,SAAS,cAAT,SAAS,GAAI,SAAS,CAAC;AAChC,CAAC,CAAC;AAqCF;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,CACzB,SAAoB,EACpB,IAAyB,EACE,EAAE;IAC7B,MAAM,eAAe,GAAG,IAAI,KAAK,SAAS,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,kBAAkB,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;IAChG,MAAM,YAAY,GAAG,IAAI,KAAK,MAAM,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,eAAe,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;IACvF,MAAM,SAAS,GAAG,kBAAkB,CAAC,eAAe,CAAC,CAAC;IACtD,MAAM,SAAS,GAAG,eAAe,CAAC,YAAY,CAAC,CAAC;IAChD,MAAM,eAAe,GAAG,kBAAkB,CAA2B,SAAS,CAAC,CAAC;IAChF,MAAM,YAAY,GAAG,eAAe,CAA2B,SAAS,CAAC,CAAC;IAE1E,IAAI,SAAS,EAAE;QACb,IAAI,CAAC,YAAY,EAAE;YACjB,MAAM,0DAA0D,CAAC;SAClE;QACD,OAAO,gCAAK,SAAS,GAAK,YAAY,CAAS,CAAC;KACjD;IAED,IAAI,SAAS,EAAE;QACb,IAAI,CAAC,eAAe,EAAE;YACpB,MAAM,qCAAqC,CAAC;SAC7C;QACD,OAAO,gCAAK,SAAS,GAAK,eAAe,CAAS,CAAC;KACpD;IAED,IAAI,CAAC,YAAY,IAAI,CAAC,eAAe,EAAE;QACrC,MAAM,iJAAiJ,CAAC;KACzJ;SAAM;QACL,MAAM,oGAAoG,CAAC;KAC5G;AACH,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\nimport {\n  CallingHandlers,\n  getCallingSelector,\n  GetCallingSelector,\n  useCallingHandlers,\n  useCallingSelector\n} from '@internal/calling-component-bindings';\nimport {\n  ChatHandlers,\n  getChatSelector,\n  GetChatSelector,\n  useChatHandlers,\n  useChatSelector\n} from '@internal/chat-component-bindings';\nimport { ChatClientState } from '@internal/chat-stateful-client';\nimport { CallClientState } from '@internal/calling-stateful-client';\nimport { Common } from '@internal/acs-ui-common';\n\n/**\n * Centralized state for {@link @azure/communication-calling#CallClient} or {@link @azure/communication-chat#ChatClient}.\n *\n * See also: {@link CallClientState}, {@link ChatClientState}.\n * @public\n */\nexport type ClientState = CallClientState & ChatClientState;\n\n/**\n * An optimized selector that refines {@link ClientState} updates into props for React Components in this library.\n *\n * @public\n */\nexport type Selector = (state: ClientState, props: any) => any;\n\n/**\n * Hook to obtain a selector for a specified component.\n *\n * Useful when implementing a custom component that utilizes the providers\n * exported from this library.\n *\n * @public\n */\nexport const useSelector = <ParamT extends Selector | undefined>(\n  selector: ParamT,\n  selectorProps?: ParamT extends Selector ? Parameters<ParamT>[1] : undefined,\n  type?: 'calling' | 'chat'\n): ParamT extends Selector ? ReturnType<ParamT> : undefined => {\n  // Because of react hooks rules, hooks can't be conditionally called\n  // We call both call and chat hooks and detect current context\n  // Return undefined and skip execution when not in that context\n  const callingMode = !type || type === 'calling';\n  const chatMode = !type || type === 'chat';\n  const callProps = useCallingSelector(callingMode ? (selector as any) : undefined, selectorProps);\n  const chatProps = useChatSelector(chatMode ? (selector as any) : undefined, selectorProps);\n  return callProps ?? chatProps;\n};\n\n/**\n * Helper type for {@link usePropsFor}.\n *\n * @public\n */\nexport type ChatReturnProps<Component extends (props: any) => JSX.Element> = GetChatSelector<Component> extends (\n  state: ChatClientState,\n  props: any\n) => any\n  ? ReturnType<GetChatSelector<Component>> & Common<ChatHandlers, Parameters<Component>[0]>\n  : never;\n\n/**\n * Helper type for {@link usePropsFor}.\n *\n * @public\n */\nexport type CallingReturnProps<Component extends (props: any) => JSX.Element> = GetCallingSelector<Component> extends (\n  state: CallClientState,\n  props: any\n) => any\n  ? ReturnType<GetCallingSelector<Component>> & Common<CallingHandlers, Parameters<Component>[0]>\n  : never;\n\n/**\n * Helper type for {@link usePropsFor}.\n *\n * @public\n */\nexport type ComponentProps<Component extends (props: any) => JSX.Element> = ChatReturnProps<Component> extends never\n  ? CallingReturnProps<Component> extends never\n    ? undefined\n    : CallingReturnProps<Component>\n  : ChatReturnProps<Component>;\n\n/**\n * Primary hook to get all hooks necessary for a React Component from this library.\n *\n * To call this hook, the component requires to be wrapped under these providers:\n *\n * 1. For chat components: {@link ChatClientProvider} and {@link ChatThreadClientProvider}.\n *\n * 2. For calling components: {@link CallClientProvider}, {@link CallAgentProvider} and {@link CallAgentProvider}.\n *\n * Most straightforward usage of a components looks like:\n *\n * @example\n * ```\n *     import { ParticipantList, usePropsFor } from '@azure/communication-react';\n *\n *     const App = (): JSX.Element => {\n *         // ... code to setup Providers ...\n *\n *         return <ParticipantList {...usePropsFor(ParticipantList)}/>\n *     }\n * ```\n *\n * @public\n */\nexport const usePropsFor = <Component extends (props: any) => JSX.Element>(\n  component: Component,\n  type?: 'calling' | 'chat'\n): ComponentProps<Component> => {\n  const callingSelector = type === 'calling' || !type ? getCallingSelector(component) : undefined;\n  const chatSelector = type === 'chat' || !type ? getChatSelector(component) : undefined;\n  const callProps = useCallingSelector(callingSelector);\n  const chatProps = useChatSelector(chatSelector);\n  const callingHandlers = useCallingHandlers<Parameters<Component>[0]>(component);\n  const chatHandlers = useChatHandlers<Parameters<Component>[0]>(component);\n\n  if (chatProps) {\n    if (!chatHandlers) {\n      throw 'Please initialize chatClient and chatThreadClient first!';\n    }\n    return { ...chatProps, ...chatHandlers } as any;\n  }\n\n  if (callProps) {\n    if (!callingHandlers) {\n      throw 'Please initialize callClient first!';\n    }\n    return { ...callProps, ...callingHandlers } as any;\n  }\n\n  if (!chatSelector && !callingSelector) {\n    throw \"Can't find corresponding selector for this component. Please check the supported components from Azure Communication UI Feature Component List.\";\n  } else {\n    throw 'Could not find props for this component, ensure the component is wrapped by appropriate providers.';\n  }\n};\n\"../../calling-component-bindings/src\"\"../../chat-component-bindings/src\"\"../../chat-stateful-client/src\"\"../../calling-stateful-client/src\"\"../../acs-ui-common/src\""]}

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

@@ -4,10 +4,7 @@
 import React, { useEffect } from 'react';
 import MessageBlock from './MessageBlock';
 /** @private */
-export const EMPTY_MESSAGE = {
-    message: '',
-    id: ''
-};
+export const EMPTY_MESSAGE = { message: '', id: '' };
 /** @private */
 const Announcer = (props) => {
     var _a, _b;
@@ -37,11 +34,11 @@ const Announcer = (props) => {
             alternatePolite.current = !alternatePolite.current;
         }
     }, [newPolite]);
-    return React.createElement("div", null,
+    return (React.createElement("div", null,
         React.createElement(MessageBlock, { ariaLive: "assertive", message: activeAssertive1.message }),
         React.createElement(MessageBlock, { ariaLive: "assertive", message: activeAssertive2.message }),
         React.createElement(MessageBlock, { ariaLive: "polite", message: activePolite1.message }),
-        React.createElement(MessageBlock, { ariaLive: "polite", message: activePolite2.message }));
+        React.createElement(MessageBlock, { ariaLive: "polite", message: activePolite2.message })));
 };
 export default Announcer;
 //# sourceMappingURL=Announcer.js.map

package/dist/dist-esm/react-components/src/components/Announcer/Announcer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Announcer.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/Announcer/Announcer.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\n/// Adapted from: https://github.com/AlmeroSteyn/react-aria-live/blob/master/src/modules/Announcer.js\n\nimport React, { useEffect } from 'react';\nimport MessageBlock from './MessageBlock';\n\n/** @private */\nexport type AnnouncerMessageBag = {\n  message: string;\n  id: string;\n};\n\n/** @private */\nexport type AnnouncerProps = {\n  polite?: AnnouncerMessageBag;\n  assertive?: AnnouncerMessageBag;\n};\n\n/** @private */\nexport const EMPTY_MESSAGE = {\n  message: '',\n  id: ''\n};\n\n/** @private */\nconst Announcer = (props: AnnouncerProps): JSX.Element => {\n  const newAssertive = props.assertive ?? EMPTY_MESSAGE;\n  const oldAssertive = React.useRef<AnnouncerMessageBag>(EMPTY_MESSAGE);\n  const [activeAssertive1, setActiveAssertive1] = React.useState<AnnouncerMessageBag>(EMPTY_MESSAGE);\n  const [activeAssertive2, setActiveAssertive2] = React.useState<AnnouncerMessageBag>(EMPTY_MESSAGE);\n  const alternateAssertive = React.useRef(false);\n  useEffect(() => {\n    if (oldAssertive.current.message !== newAssertive?.message || oldAssertive.current.id !== newAssertive?.id) {\n      setActiveAssertive1(alternateAssertive.current ? EMPTY_MESSAGE : newAssertive);\n      setActiveAssertive2(alternateAssertive.current ? newAssertive : EMPTY_MESSAGE);\n      oldAssertive.current = newAssertive;\n      alternateAssertive.current = !alternateAssertive.current;\n    }\n  }, [newAssertive]);\n  const newPolite = props.polite ?? EMPTY_MESSAGE;\n  const oldPolite = React.useRef<AnnouncerMessageBag>(EMPTY_MESSAGE);\n  const [activePolite1, setActivePolite1] = React.useState<AnnouncerMessageBag>(EMPTY_MESSAGE);\n  const [activePolite2, setActivePolite2] = React.useState<AnnouncerMessageBag>(EMPTY_MESSAGE);\n  const alternatePolite = React.useRef(false);\n  useEffect(() => {\n    if (oldPolite.current.message !== newPolite?.message || oldPolite.current.id !== newPolite?.id) {\n      setActivePolite1(alternatePolite.current ? EMPTY_MESSAGE : newPolite);\n      setActivePolite2(alternatePolite.current ? newPolite : EMPTY_MESSAGE);\n      oldPolite.current = newPolite;\n      alternatePolite.current = !alternatePolite.current;\n    }\n  }, [newPolite]);\n  return <div>\n      <MessageBlock ariaLive=\"assertive\" message={activeAssertive1.message} />\n      <MessageBlock ariaLive=\"assertive\" message={activeAssertive2.message} />\n      <MessageBlock ariaLive=\"polite\" message={activePolite1.message} />\n      <MessageBlock ariaLive=\"polite\" message={activePolite2.message} />\n    </div>;\n};\nexport default Announcer;"]}
+{"version":3,"file":"Announcer.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/Announcer/Announcer.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\n/// Adapted from: https://github.com/AlmeroSteyn/react-aria-live/blob/master/src/modules/Announcer.js\n\nimport React, { useEffect } from 'react';\nimport MessageBlock from './MessageBlock';\n\n/** @private */\nexport type AnnouncerMessageBag = {\n  message: string;\n  id: string;\n};\n\n/** @private */\nexport type AnnouncerProps = {\n  polite?: AnnouncerMessageBag;\n  assertive?: AnnouncerMessageBag;\n};\n\n/** @private */\nexport const EMPTY_MESSAGE = { message: '', id: '' };\n\n/** @private */\nconst Announcer = (props: AnnouncerProps): JSX.Element => {\n  const newAssertive = props.assertive ?? EMPTY_MESSAGE;\n  const oldAssertive = React.useRef<AnnouncerMessageBag>(EMPTY_MESSAGE);\n  const [activeAssertive1, setActiveAssertive1] = React.useState<AnnouncerMessageBag>(EMPTY_MESSAGE);\n  const [activeAssertive2, setActiveAssertive2] = React.useState<AnnouncerMessageBag>(EMPTY_MESSAGE);\n  const alternateAssertive = React.useRef(false);\n\n  useEffect(() => {\n    if (oldAssertive.current.message !== newAssertive?.message || oldAssertive.current.id !== newAssertive?.id) {\n      setActiveAssertive1(alternateAssertive.current ? EMPTY_MESSAGE : newAssertive);\n      setActiveAssertive2(alternateAssertive.current ? newAssertive : EMPTY_MESSAGE);\n      oldAssertive.current = newAssertive;\n      alternateAssertive.current = !alternateAssertive.current;\n    }\n  }, [newAssertive]);\n\n  const newPolite = props.polite ?? EMPTY_MESSAGE;\n  const oldPolite = React.useRef<AnnouncerMessageBag>(EMPTY_MESSAGE);\n  const [activePolite1, setActivePolite1] = React.useState<AnnouncerMessageBag>(EMPTY_MESSAGE);\n  const [activePolite2, setActivePolite2] = React.useState<AnnouncerMessageBag>(EMPTY_MESSAGE);\n  const alternatePolite = React.useRef(false);\n\n  useEffect(() => {\n    if (oldPolite.current.message !== newPolite?.message || oldPolite.current.id !== newPolite?.id) {\n      setActivePolite1(alternatePolite.current ? EMPTY_MESSAGE : newPolite);\n      setActivePolite2(alternatePolite.current ? newPolite : EMPTY_MESSAGE);\n      oldPolite.current = newPolite;\n      alternatePolite.current = !alternatePolite.current;\n    }\n  }, [newPolite]);\n\n  return (\n    <div>\n      <MessageBlock ariaLive=\"assertive\" message={activeAssertive1.message} />\n      <MessageBlock ariaLive=\"assertive\" message={activeAssertive2.message} />\n      <MessageBlock ariaLive=\"polite\" message={activePolite1.message} />\n      <MessageBlock ariaLive=\"polite\" message={activePolite2.message} />\n    </div>\n  );\n};\n\nexport default Announcer;\n"]}

package/dist/dist-esm/react-components/src/components/Announcer/AnnouncerContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"AnnouncerContext.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/Announcer/AnnouncerContext.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,4GAA4G;AAE5G,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,eAAe;AACf,MAAM,gBAAgB,GAAG,KAAK,CAAC,aAAa,CAAuB;IACjE,iBAAiB,EAAE,iBAAiB;IACpC,cAAc,EAAE,iBAAiB;CAClC,CAAC,CAAC;AACH,SAAS,iBAAiB;IACxB,OAAO,CAAC,IAAI,CAAC,uDAAuD,CAAC,CAAC;AACxE,CAAC;AACD,eAAe,gBAAgB,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\n/// Adapted from: https://github.com/AlmeroSteyn/react-aria-live/blob/master/src/modules/AnnouncerContext.js\n\nimport React from 'react';\n\n/** @private */\nexport type AnnouncerContextType = {\n  announceAssertive: (message: string, id: string) => void;\n  announcePolite: (message: string, id: string) => void;\n};\n\n/** @private */\nconst AnnouncerContext = React.createContext<AnnouncerContextType>({\n  announceAssertive: logContextWarning,\n  announcePolite: logContextWarning\n});\nfunction logContextWarning(): void {\n  console.warn('Announcement failed, LiveAnnouncer context is missing');\n}\nexport default AnnouncerContext;"]}
+{"version":3,"file":"AnnouncerContext.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/Announcer/AnnouncerContext.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,4GAA4G;AAE5G,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,eAAe;AACf,MAAM,gBAAgB,GAAG,KAAK,CAAC,aAAa,CAAuB;IACjE,iBAAiB,EAAE,iBAAiB;IACpC,cAAc,EAAE,iBAAiB;CAClC,CAAC,CAAC;AAEH,SAAS,iBAAiB;IACxB,OAAO,CAAC,IAAI,CAAC,uDAAuD,CAAC,CAAC;AACxE,CAAC;AAED,eAAe,gBAAgB,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\n/// Adapted from: https://github.com/AlmeroSteyn/react-aria-live/blob/master/src/modules/AnnouncerContext.js\n\nimport React from 'react';\n\n/** @private */\nexport type AnnouncerContextType = {\n  announceAssertive: (message: string, id: string) => void;\n  announcePolite: (message: string, id: string) => void;\n};\n\n/** @private */\nconst AnnouncerContext = React.createContext<AnnouncerContextType>({\n  announceAssertive: logContextWarning,\n  announcePolite: logContextWarning\n});\n\nfunction logContextWarning(): void {\n  console.warn('Announcement failed, LiveAnnouncer context is missing');\n}\n\nexport default AnnouncerContext;\n"]}

package/dist/dist-esm/react-components/src/components/Announcer/AnnouncerMessage.js.map

@@ -1 +1 @@
-{"version":3,"file":"AnnouncerMessage.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/Announcer/AnnouncerMessage.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,4GAA4G;AAE5G,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC/C,OAAO,EAAE,EAAE,IAAI,UAAU,EAAE,MAAM,MAAM,CAAC;AAExC,eAAe;AACf,MAAM,gBAAgB,GAAG,CAAC,KAMzB,EAAQ,EAAE;IACT,MAAM,EACJ,OAAO,EACP,QAAQ,EACR,cAAc,EACd,iBAAiB,EACjB,cAAc,EACf,GAAG,KAAK,CAAC;IACV,MAAM,QAAQ,GAAG,WAAW,CAAC,GAAG,EAAE;QAChC,IAAI,QAAQ,KAAK,WAAW,EAAE;YAC5B,iBAAiB,CAAC,OAAO,IAAI,EAAE,EAAE,UAAU,EAAE,CAAC,CAAC;SAChD;QACD,IAAI,QAAQ,KAAK,QAAQ,EAAE;YACzB,cAAc,CAAC,OAAO,IAAI,EAAE,EAAE,UAAU,EAAE,CAAC,CAAC;SAC7C;IACH,CAAC,EAAE,CAAC,iBAAiB,EAAE,cAAc,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC,CAAC;IAC3D,SAAS,CAAC,GAAG,EAAE;QACb,QAAQ,EAAE,CAAC;QACX,OAAO,GAAG,EAAE;YACV,IAAI,cAAc,EAAE;gBAClB,iBAAiB,CAAC,EAAE,EAAE,UAAU,EAAE,CAAC,CAAC;gBACpC,cAAc,CAAC,EAAE,EAAE,UAAU,EAAE,CAAC,CAAC;aAClC;QACH,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,OAAO,EAAE,cAAc,EAAE,QAAQ,EAAE,iBAAiB,EAAE,cAAc,CAAC,CAAC,CAAC;IAC3E,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AACF,eAAe,gBAAgB,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\n/// Adapted from: https://github.com/AlmeroSteyn/react-aria-live/blob/master/src/modules/AnnouncerMessage.js\n\nimport { useCallback, useEffect } from 'react';\nimport { v1 as createGUID } from 'uuid';\n\n/** @private */\nconst AnnouncerMessage = (props: {\n  message: string;\n  ariaLive: string;\n  clearOnUnmount?: boolean;\n  announceAssertive: (message: string, id: string) => void;\n  announcePolite: (message: string, id: string) => void;\n}): null => {\n  const {\n    message,\n    ariaLive,\n    clearOnUnmount,\n    announceAssertive,\n    announcePolite\n  } = props;\n  const announce = useCallback(() => {\n    if (ariaLive === 'assertive') {\n      announceAssertive(message || '', createGUID());\n    }\n    if (ariaLive === 'polite') {\n      announcePolite(message || '', createGUID());\n    }\n  }, [announceAssertive, announcePolite, ariaLive, message]);\n  useEffect(() => {\n    announce();\n    return () => {\n      if (clearOnUnmount) {\n        announceAssertive('', createGUID());\n        announcePolite('', createGUID());\n      }\n    };\n  }, [message, clearOnUnmount, announce, announceAssertive, announcePolite]);\n  return null;\n};\nexport default AnnouncerMessage;"]}
+{"version":3,"file":"AnnouncerMessage.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/Announcer/AnnouncerMessage.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,4GAA4G;AAE5G,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC/C,OAAO,EAAE,EAAE,IAAI,UAAU,EAAE,MAAM,MAAM,CAAC;AAExC,eAAe;AACf,MAAM,gBAAgB,GAAG,CAAC,KAMzB,EAAQ,EAAE;IACT,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,cAAc,EAAE,iBAAiB,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC;IAEvF,MAAM,QAAQ,GAAG,WAAW,CAAC,GAAG,EAAE;QAChC,IAAI,QAAQ,KAAK,WAAW,EAAE;YAC5B,iBAAiB,CAAC,OAAO,IAAI,EAAE,EAAE,UAAU,EAAE,CAAC,CAAC;SAChD;QACD,IAAI,QAAQ,KAAK,QAAQ,EAAE;YACzB,cAAc,CAAC,OAAO,IAAI,EAAE,EAAE,UAAU,EAAE,CAAC,CAAC;SAC7C;IACH,CAAC,EAAE,CAAC,iBAAiB,EAAE,cAAc,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC,CAAC;IAE3D,SAAS,CAAC,GAAG,EAAE;QACb,QAAQ,EAAE,CAAC;QACX,OAAO,GAAG,EAAE;YACV,IAAI,cAAc,EAAE;gBAClB,iBAAiB,CAAC,EAAE,EAAE,UAAU,EAAE,CAAC,CAAC;gBACpC,cAAc,CAAC,EAAE,EAAE,UAAU,EAAE,CAAC,CAAC;aAClC;QACH,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,OAAO,EAAE,cAAc,EAAE,QAAQ,EAAE,iBAAiB,EAAE,cAAc,CAAC,CAAC,CAAC;IAE3E,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AAEF,eAAe,gBAAgB,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\n/// Adapted from: https://github.com/AlmeroSteyn/react-aria-live/blob/master/src/modules/AnnouncerMessage.js\n\nimport { useCallback, useEffect } from 'react';\nimport { v1 as createGUID } from 'uuid';\n\n/** @private */\nconst AnnouncerMessage = (props: {\n  message: string;\n  ariaLive: string;\n  clearOnUnmount?: boolean;\n  announceAssertive: (message: string, id: string) => void;\n  announcePolite: (message: string, id: string) => void;\n}): null => {\n  const { message, ariaLive, clearOnUnmount, announceAssertive, announcePolite } = props;\n\n  const announce = useCallback(() => {\n    if (ariaLive === 'assertive') {\n      announceAssertive(message || '', createGUID());\n    }\n    if (ariaLive === 'polite') {\n      announcePolite(message || '', createGUID());\n    }\n  }, [announceAssertive, announcePolite, ariaLive, message]);\n\n  useEffect(() => {\n    announce();\n    return () => {\n      if (clearOnUnmount) {\n        announceAssertive('', createGUID());\n        announcePolite('', createGUID());\n      }\n    };\n  }, [message, clearOnUnmount, announce, announceAssertive, announcePolite]);\n\n  return null;\n};\n\nexport default AnnouncerMessage;\n"]}

package/dist/dist-esm/react-components/src/components/Announcer/LiveAnnouncer.js

@@ -9,24 +9,18 @@ const LiveAnnouncer = (props) => {
     const [politeMessage, setPoliteMessage] = React.useState(EMPTY_MESSAGE);
     const [assertiveMessage, setAssertiveMessage] = React.useState(EMPTY_MESSAGE);
     const announcePolite = useCallback((message, id) => {
-        setPoliteMessage({
-            message,
-            id
-        });
+        setPoliteMessage({ message, id });
     }, []);
     const announceAssertive = useCallback((message, id) => {
-        setAssertiveMessage({
-            message,
-            id
-        });
+        setAssertiveMessage({ message, id });
     }, []);
     const updateFunctions = useMemo(() => ({
         announcePolite,
         announceAssertive
     }), [announceAssertive, announcePolite]);
-    return React.createElement(AnnouncerContext.Provider, { value: updateFunctions },
+    return (React.createElement(AnnouncerContext.Provider, { value: updateFunctions },
         props.children,
-        React.createElement(Announcer, { assertive: assertiveMessage, polite: politeMessage }));
+        React.createElement(Announcer, { assertive: assertiveMessage, polite: politeMessage })));
 };
 export default LiveAnnouncer;
 //# sourceMappingURL=LiveAnnouncer.js.map

package/dist/dist-esm/react-components/src/components/Announcer/LiveAnnouncer.js.map

@@ -1 +1 @@
-{"version":3,"file":"LiveAnnouncer.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/Announcer/LiveAnnouncer.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,yGAAyG;AAEzG,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACpD,OAAO,SAAS,EAAE,EAAuB,aAAa,EAAE,MAAM,aAAa,CAAC;AAC5E,OAAO,gBAAgB,MAAM,oBAAoB,CAAC;AAElD,eAAe;AACf,MAAM,aAAa,GAAG,CAAC,KAEtB,EAAe,EAAE;IAChB,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAsB,aAAa,CAAC,CAAC;IAC7F,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAsB,aAAa,CAAC,CAAC;IACnG,MAAM,cAAc,GAAG,WAAW,CAAC,CAAC,OAAe,EAAE,EAAU,EAAE,EAAE;QACjE,gBAAgB,CAAC;YACf,OAAO;YACP,EAAE;SACH,CAAC,CAAC;IACL,CAAC,EAAE,EAAE,CAAC,CAAC;IACP,MAAM,iBAAiB,GAAG,WAAW,CAAC,CAAC,OAAe,EAAE,EAAU,EAAE,EAAE;QACpE,mBAAmB,CAAC;YAClB,OAAO;YACP,EAAE;SACH,CAAC,CAAC;IACL,CAAC,EAAE,EAAE,CAAC,CAAC;IACP,MAAM,eAAe,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC;QACrC,cAAc;QACd,iBAAiB;KAClB,CAAC,EAAE,CAAC,iBAAiB,EAAE,cAAc,CAAC,CAAC,CAAC;IACzC,OAAO,oBAAC,gBAAgB,CAAC,QAAQ,IAAC,KAAK,EAAE,eAAe;QACnD,KAAK,CAAC,QAAQ;QACf,oBAAC,SAAS,IAAC,SAAS,EAAE,gBAAgB,EAAE,MAAM,EAAE,aAAa,GAAI,CACvC,CAAC;AACjC,CAAC,CAAC;AACF,eAAe,aAAa,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\n/// Adapted from: https://github.com/AlmeroSteyn/react-aria-live/blob/master/src/modules/LiveAnnouncer.js\n\nimport React, { useCallback, useMemo } from 'react';\nimport Announcer, { AnnouncerMessageBag, EMPTY_MESSAGE } from './Announcer';\nimport AnnouncerContext from './AnnouncerContext';\n\n/** @private */\nconst LiveAnnouncer = (props: {\n  children: React.ReactChild;\n}): JSX.Element => {\n  const [politeMessage, setPoliteMessage] = React.useState<AnnouncerMessageBag>(EMPTY_MESSAGE);\n  const [assertiveMessage, setAssertiveMessage] = React.useState<AnnouncerMessageBag>(EMPTY_MESSAGE);\n  const announcePolite = useCallback((message: string, id: string) => {\n    setPoliteMessage({\n      message,\n      id\n    });\n  }, []);\n  const announceAssertive = useCallback((message: string, id: string) => {\n    setAssertiveMessage({\n      message,\n      id\n    });\n  }, []);\n  const updateFunctions = useMemo(() => ({\n    announcePolite,\n    announceAssertive\n  }), [announceAssertive, announcePolite]);\n  return <AnnouncerContext.Provider value={updateFunctions}>\n      {props.children}\n      <Announcer assertive={assertiveMessage} polite={politeMessage} />\n    </AnnouncerContext.Provider>;\n};\nexport default LiveAnnouncer;"]}
+{"version":3,"file":"LiveAnnouncer.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/Announcer/LiveAnnouncer.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,yGAAyG;AAEzG,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACpD,OAAO,SAAS,EAAE,EAAuB,aAAa,EAAE,MAAM,aAAa,CAAC;AAC5E,OAAO,gBAAgB,MAAM,oBAAoB,CAAC;AAElD,eAAe;AACf,MAAM,aAAa,GAAG,CAAC,KAAqC,EAAe,EAAE;IAC3E,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAsB,aAAa,CAAC,CAAC;IAC7F,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAsB,aAAa,CAAC,CAAC;IAEnG,MAAM,cAAc,GAAG,WAAW,CAAC,CAAC,OAAe,EAAE,EAAU,EAAE,EAAE;QACjE,gBAAgB,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,CAAC;IACpC,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,iBAAiB,GAAG,WAAW,CAAC,CAAC,OAAe,EAAE,EAAU,EAAE,EAAE;QACpE,mBAAmB,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,CAAC;IACvC,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,eAAe,GAAG,OAAO,CAC7B,GAAG,EAAE,CAAC,CAAC;QACL,cAAc;QACd,iBAAiB;KAClB,CAAC,EACF,CAAC,iBAAiB,EAAE,cAAc,CAAC,CACpC,CAAC;IAEF,OAAO,CACL,oBAAC,gBAAgB,CAAC,QAAQ,IAAC,KAAK,EAAE,eAAe;QAC9C,KAAK,CAAC,QAAQ;QACf,oBAAC,SAAS,IAAC,SAAS,EAAE,gBAAgB,EAAE,MAAM,EAAE,aAAa,GAAI,CACvC,CAC7B,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\n/// Adapted from: https://github.com/AlmeroSteyn/react-aria-live/blob/master/src/modules/LiveAnnouncer.js\n\nimport React, { useCallback, useMemo } from 'react';\nimport Announcer, { AnnouncerMessageBag, EMPTY_MESSAGE } from './Announcer';\nimport AnnouncerContext from './AnnouncerContext';\n\n/** @private */\nconst LiveAnnouncer = (props: { children: React.ReactChild }): JSX.Element => {\n  const [politeMessage, setPoliteMessage] = React.useState<AnnouncerMessageBag>(EMPTY_MESSAGE);\n  const [assertiveMessage, setAssertiveMessage] = React.useState<AnnouncerMessageBag>(EMPTY_MESSAGE);\n\n  const announcePolite = useCallback((message: string, id: string) => {\n    setPoliteMessage({ message, id });\n  }, []);\n\n  const announceAssertive = useCallback((message: string, id: string) => {\n    setAssertiveMessage({ message, id });\n  }, []);\n\n  const updateFunctions = useMemo(\n    () => ({\n      announcePolite,\n      announceAssertive\n    }),\n    [announceAssertive, announcePolite]\n  );\n\n  return (\n    <AnnouncerContext.Provider value={updateFunctions}>\n      {props.children}\n      <Announcer assertive={assertiveMessage} polite={politeMessage} />\n    </AnnouncerContext.Provider>\n  );\n};\n\nexport default LiveAnnouncer;\n"]}

package/dist/dist-esm/react-components/src/components/Announcer/LiveMessage.js

@@ -5,6 +5,6 @@ import React from 'react';
 import AnnouncerContext from './AnnouncerContext';
 import AnnouncerMessage from './AnnouncerMessage';
 /** @private */
-const LiveMessage = (props) => React.createElement(AnnouncerContext.Consumer, null, contextProps => React.createElement(AnnouncerMessage, Object.assign({}, contextProps, props)));
+const LiveMessage = (props) => (React.createElement(AnnouncerContext.Consumer, null, (contextProps) => React.createElement(AnnouncerMessage, Object.assign({}, contextProps, props))));
 export default LiveMessage;
 //# sourceMappingURL=LiveMessage.js.map

package/dist/dist-esm/react-components/src/components/Announcer/LiveMessage.js.map

@@ -1 +1 @@
-{"version":3,"file":"LiveMessage.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/Announcer/LiveMessage.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,uGAAuG;AAEvG,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,gBAAgB,MAAM,oBAAoB,CAAC;AAClD,OAAO,gBAAgB,MAAM,oBAAoB,CAAC;AAElD,eAAe;AACf,MAAM,WAAW,GAAG,CAAC,KAIpB,EAAe,EAAE,CAAC,oBAAC,gBAAgB,CAAC,QAAQ,QACxC,YAAY,CAAC,EAAE,CAAC,oBAAC,gBAAgB,oBAAK,YAAY,EAAM,KAAK,EAAI,CACxC,CAAC;AAC/B,eAAe,WAAW,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\n/// Adapted from: https://github.com/AlmeroSteyn/react-aria-live/blob/master/src/modules/LiveMessage.js\n\nimport React from 'react';\nimport AnnouncerContext from './AnnouncerContext';\nimport AnnouncerMessage from './AnnouncerMessage';\n\n/** @private */\nconst LiveMessage = (props: {\n  message: string;\n  ariaLive: string;\n  clearOnUnmount?: boolean;\n}): JSX.Element => <AnnouncerContext.Consumer>\n    {contextProps => <AnnouncerMessage {...contextProps} {...props} />}\n  </AnnouncerContext.Consumer>;\nexport default LiveMessage;"]}
+{"version":3,"file":"LiveMessage.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/Announcer/LiveMessage.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,uGAAuG;AAEvG,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,gBAAgB,MAAM,oBAAoB,CAAC;AAClD,OAAO,gBAAgB,MAAM,oBAAoB,CAAC;AAElD,eAAe;AACf,MAAM,WAAW,GAAG,CAAC,KAAsE,EAAe,EAAE,CAAC,CAC3G,oBAAC,gBAAgB,CAAC,QAAQ,QACvB,CAAC,YAAY,EAAE,EAAE,CAAC,oBAAC,gBAAgB,oBAAK,YAAY,EAAM,KAAK,EAAI,CAC1C,CAC7B,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\n/// Adapted from: https://github.com/AlmeroSteyn/react-aria-live/blob/master/src/modules/LiveMessage.js\n\nimport React from 'react';\nimport AnnouncerContext from './AnnouncerContext';\nimport AnnouncerMessage from './AnnouncerMessage';\n\n/** @private */\nconst LiveMessage = (props: { message: string; ariaLive: string; clearOnUnmount?: boolean }): JSX.Element => (\n  <AnnouncerContext.Consumer>\n    {(contextProps) => <AnnouncerMessage {...contextProps} {...props} />}\n  </AnnouncerContext.Consumer>\n);\n\nexport default LiveMessage;\n"]}

package/dist/dist-esm/react-components/src/components/Announcer/MessageBlock.js

@@ -14,6 +14,6 @@ const offScreenStyle = {
     position: 'absolute'
 };
 /** @private */
-const MessageBlock = (props) => React.createElement("div", { style: offScreenStyle, role: "log", "aria-live": props.ariaLive }, props.message ? props.message : '');
+const MessageBlock = (props) => (React.createElement("div", { style: offScreenStyle, role: "log", "aria-live": props.ariaLive }, props.message ? props.message : ''));
 export default MessageBlock;
 //# sourceMappingURL=MessageBlock.js.map

package/dist/dist-esm/react-components/src/components/Announcer/MessageBlock.js.map

@@ -1 +1 @@
-{"version":3,"file":"MessageBlock.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/Announcer/MessageBlock.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,wGAAwG;AAExG,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,MAAM,cAAc,GAAwB;IAC1C,MAAM,EAAE,CAAC;IACT,IAAI,EAAE,eAAe;IACrB,MAAM,EAAE,KAAK;IACb,MAAM,EAAE,MAAM;IACd,QAAQ,EAAE,QAAQ;IAClB,UAAU,EAAE,QAAQ;IACpB,OAAO,EAAE,CAAC;IACV,KAAK,EAAE,KAAK;IACZ,QAAQ,EAAE,UAAU;CACrB,CAAC;AAEF,eAAe;AACf,MAAM,YAAY,GAAG,CAAC,KAGrB,EAAe,EAAE,CAAC,6BAAK,KAAK,EAAE,cAAc,EAAE,IAAI,EAAC,KAAK,eAAY,KAAK,CAAC,QAAQ,IAC9E,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAC/B,CAAC;AACT,eAAe,YAAY,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\n/// Adapted from: https://github.com/AlmeroSteyn/react-aria-live/blob/master/src/modules/MessageBlock.js\n\nimport React from 'react';\nconst offScreenStyle: React.CSSProperties = {\n  border: 0,\n  clip: 'rect(0 0 0 0)',\n  height: '1px',\n  margin: '-1px',\n  overflow: 'hidden',\n  whiteSpace: 'nowrap',\n  padding: 0,\n  width: '1px',\n  position: 'absolute'\n};\n\n/** @private */\nconst MessageBlock = (props: {\n  message: string;\n  ariaLive: 'assertive' | 'polite' | 'off' | undefined;\n}): JSX.Element => <div style={offScreenStyle} role=\"log\" aria-live={props.ariaLive}>\n    {props.message ? props.message : ''}\n  </div>;\nexport default MessageBlock;"]}
+{"version":3,"file":"MessageBlock.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/Announcer/MessageBlock.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,wGAAwG;AAExG,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,cAAc,GAAwB;IAC1C,MAAM,EAAE,CAAC;IACT,IAAI,EAAE,eAAe;IACrB,MAAM,EAAE,KAAK;IACb,MAAM,EAAE,MAAM;IACd,QAAQ,EAAE,QAAQ;IAClB,UAAU,EAAE,QAAQ;IACpB,OAAO,EAAE,CAAC;IACV,KAAK,EAAE,KAAK;IACZ,QAAQ,EAAE,UAAU;CACrB,CAAC;AAEF,eAAe;AACf,MAAM,YAAY,GAAG,CAAC,KAGrB,EAAe,EAAE,CAAC,CACjB,6BAAK,KAAK,EAAE,cAAc,EAAE,IAAI,EAAC,KAAK,eAAY,KAAK,CAAC,QAAQ,IAC7D,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAC/B,CACP,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\n/// Adapted from: https://github.com/AlmeroSteyn/react-aria-live/blob/master/src/modules/MessageBlock.js\n\nimport React from 'react';\n\nconst offScreenStyle: React.CSSProperties = {\n  border: 0,\n  clip: 'rect(0 0 0 0)',\n  height: '1px',\n  margin: '-1px',\n  overflow: 'hidden',\n  whiteSpace: 'nowrap',\n  padding: 0,\n  width: '1px',\n  position: 'absolute'\n};\n\n/** @private */\nconst MessageBlock = (props: {\n  message: string;\n  ariaLive: 'assertive' | 'polite' | 'off' | undefined;\n}): JSX.Element => (\n  <div style={offScreenStyle} role=\"log\" aria-live={props.ariaLive}>\n    {props.message ? props.message : ''}\n  </div>\n);\n\nexport default MessageBlock;\n"]}

package/dist/dist-esm/react-components/src/components/Announcer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Announcer.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/Announcer.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAgB,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAO,KAAK,MAAM,OAAO,CAAC;AAW1B;;;GAGG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,KAAqB,EAAe,EAAE;IAC9D,MAAM,EACJ,kBAAkB,EAClB,QAAQ,EACT,GAAG,KAAK,CAAC;IACV,OAAO,oBAAC,KAAK,kBAAa,kBAAkB,eAAa,QAAQ,EAAE,MAAM,EAAE,eAAe,GAAU,CAAC;AACvG,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,eAAe,GAAiB;IACpC,IAAI,EAAE;QACJ,QAAQ,EAAE,UAAU;QACpB,KAAK,EAAE,KAAK;QACZ,MAAM,EAAE,KAAK;QACb,OAAO,EAAE,CAAC;QACV,MAAM,EAAE,MAAM;QACd,QAAQ,EAAE,QAAQ;QAClB,IAAI,EAAE,eAAe;QACrB,UAAU,EAAE,QAAQ;QACpB,MAAM,EAAE,CAAC;KACV;CACF,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { IStackStyles, Stack } from '@fluentui/react';\nimport React from 'react';\n\n/**\n * @internal\n *  aria props for this hidden component.\n */\nexport type AnnouncerProps = {\n  announcementString?: string;\n  ariaLive: 'off' | 'polite' | 'assertive' | undefined;\n};\n\n/**\n * @internal\n * Announcer component to maker aria announcements on actions\n */\nexport const Announcer = (props: AnnouncerProps): JSX.Element => {\n  const {\n    announcementString,\n    ariaLive\n  } = props;\n  return <Stack aria-label={announcementString} aria-live={ariaLive} styles={announcerStyles}></Stack>;\n};\n\n/**\n * Styles to hide the announcer from view but still existing on the DOM tree it so that narration can happen.\n */\nconst announcerStyles: IStackStyles = {\n  root: {\n    position: 'absolute',\n    width: '1px',\n    height: '1px',\n    padding: 0,\n    margin: '-1px',\n    overflow: 'hidden',\n    clip: 'rect(0,0,0,0)',\n    whiteSpace: 'nowrap',\n    border: 0\n  }\n};"]}
+{"version":3,"file":"Announcer.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/Announcer.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAgB,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAO,KAAK,MAAM,OAAO,CAAC;AAW1B;;;GAGG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,KAAqB,EAAe,EAAE;IAC9D,MAAM,EAAE,kBAAkB,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAE/C,OAAO,oBAAC,KAAK,kBAAa,kBAAkB,eAAa,QAAQ,EAAE,MAAM,EAAE,eAAe,GAAU,CAAC;AACvG,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,eAAe,GAAiB;IACpC,IAAI,EAAE;QACJ,QAAQ,EAAE,UAAU;QACpB,KAAK,EAAE,KAAK;QACZ,MAAM,EAAE,KAAK;QACb,OAAO,EAAE,CAAC;QACV,MAAM,EAAE,MAAM;QACd,QAAQ,EAAE,QAAQ;QAClB,IAAI,EAAE,eAAe;QACrB,UAAU,EAAE,QAAQ;QACpB,MAAM,EAAE,CAAC;KACV;CACF,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { IStackStyles, Stack } from '@fluentui/react';\nimport React from 'react';\n\n/**\n * @internal\n *  aria props for this hidden component.\n */\nexport type AnnouncerProps = {\n  announcementString?: string;\n  ariaLive: 'off' | 'polite' | 'assertive' | undefined;\n};\n\n/**\n * @internal\n * Announcer component to maker aria announcements on actions\n */\nexport const Announcer = (props: AnnouncerProps): JSX.Element => {\n  const { announcementString, ariaLive } = props;\n\n  return <Stack aria-label={announcementString} aria-live={ariaLive} styles={announcerStyles}></Stack>;\n};\n\n/**\n * Styles to hide the announcer from view but still existing on the DOM tree it so that narration can happen.\n */\nconst announcerStyles: IStackStyles = {\n  root: {\n    position: 'absolute',\n    width: '1px',\n    height: '1px',\n    padding: 0,\n    margin: '-1px',\n    overflow: 'hidden',\n    clip: 'rect(0,0,0,0)',\n    whiteSpace: 'nowrap',\n    border: 0\n  }\n};\n"]}

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

@@ -35,8 +35,8 @@ export const CameraButton = (props) => {
     const strings = Object.assign(Object.assign({}, localeStrings), props.strings);
     const [announcerString, setAnnouncerString] = useState(undefined);
     const disabled = props.disabled || waitForCamera;
-    const onRenderCameraOnIcon = () => React.createElement(_HighContrastAwareIcon, { disabled: disabled, iconName: "ControlButtonCameraOn" });
-    const onRenderCameraOffIcon = () => React.createElement(_HighContrastAwareIcon, { disabled: disabled, iconName: "ControlButtonCameraOff" });
+    const onRenderCameraOnIcon = () => (React.createElement(_HighContrastAwareIcon, { disabled: disabled, iconName: "ControlButtonCameraOn" }));
+    const onRenderCameraOffIcon = () => (React.createElement(_HighContrastAwareIcon, { disabled: disabled, iconName: "ControlButtonCameraOff" }));
     if (waitForCamera && strings.tooltipVideoLoadingContent) {
         strings.tooltipDisabledContent = strings.tooltipVideoLoadingContent;
     }
@@ -66,14 +66,7 @@ export const CameraButton = (props) => {
             key: 'effects',
             'data-ui-id': 'camera-split-button-video-effects',
             text: strings.videoEffectsMenuItemTitle,
-            iconProps: {
-                iconName: 'ControlButtonVideoEffectsOption',
-                styles: {
-                    root: {
-                        lineHeight: 0
-                    }
-                }
-            },
+            iconProps: { iconName: 'ControlButtonVideoEffectsOption', styles: { root: { lineHeight: 0 } } },
             onClick: () => {
                 if (props.onShowVideoEffectsPicker) {
                     props.onShowVideoEffectsPicker(true);
@@ -89,11 +82,7 @@ export const CameraButton = (props) => {
         },
         iconProps: {
             iconName: props.checked ? 'SplitButtonPrimaryActionCameraOn' : 'SplitButtonPrimaryActionCameraOff',
-            styles: {
-                root: {
-                    lineHeight: 0
-                }
-            }
+            styles: { root: { lineHeight: 0 } }
         }
     });
     const splitButtonPrimaryAction = {
@@ -106,10 +95,10 @@ export const CameraButton = (props) => {
         }
     };
     const splitButtonMenuProps = useMemo(() => (Object.assign(Object.assign({}, props.splitButtonMenuProps), { className: 'camera-split-button' })), [props.splitButtonMenuProps]);
-    return React.createElement(React.Fragment, null,
+    return (React.createElement(React.Fragment, null,
         React.createElement(Announcer, { announcementString: announcerString, ariaLive: 'polite' }),
-        React.createElement(ControlBarButton, Object.assign({}, props, { disabled: disabled, onClick: onToggleCamera ? onToggleClick : props.onClick, onRenderOnIcon: (_a = props.onRenderOnIcon) !== null && _a !== void 0 ? _a : onRenderCameraOnIcon, onRenderOffIcon: (_b = props.onRenderOffIcon) !== null && _b !== void 0 ? _b : onRenderCameraOffIcon, strings: strings, labelKey: (_c = props.labelKey) !== null && _c !== void 0 ? _c : 'cameraButtonLabel', menuProps: (_d = props.menuProps) !== null && _d !== void 0 ? _d : (props.enableDeviceSelectionMenu ? generateDefaultDeviceMenuProps(Object.assign(Object.assign({}, props), { styles: (_e = props.styles) === null || _e === void 0 ? void 0 : _e.menuStyles }), strings, splitButtonPrimaryAction) : undefined), menuIconProps: ((_f = props.menuIconProps) !== null && _f !== void 0 ? _f : !props.enableDeviceSelectionMenu) ? {
-                hidden: true
-            } : undefined, split: (_g = props.split) !== null && _g !== void 0 ? _g : props.enableDeviceSelectionMenu, "aria-roledescription": props.enableDeviceSelectionMenu ? strings.cameraButtonSplitRoleDescription : undefined, splitButtonAriaLabel: props.enableDeviceSelectionMenu ? splitButtonAriaString : undefined, splitButtonMenuProps: splitButtonMenuProps })));
+        React.createElement(ControlBarButton, Object.assign({}, props, { disabled: disabled, onClick: onToggleCamera ? onToggleClick : props.onClick, onRenderOnIcon: (_a = props.onRenderOnIcon) !== null && _a !== void 0 ? _a : onRenderCameraOnIcon, onRenderOffIcon: (_b = props.onRenderOffIcon) !== null && _b !== void 0 ? _b : onRenderCameraOffIcon, strings: strings, labelKey: (_c = props.labelKey) !== null && _c !== void 0 ? _c : 'cameraButtonLabel', menuProps: (_d = props.menuProps) !== null && _d !== void 0 ? _d : (props.enableDeviceSelectionMenu
+                ? generateDefaultDeviceMenuProps(Object.assign(Object.assign({}, props), { styles: (_e = props.styles) === null || _e === void 0 ? void 0 : _e.menuStyles }), strings, splitButtonPrimaryAction)
+                : undefined), menuIconProps: ((_f = props.menuIconProps) !== null && _f !== void 0 ? _f : !props.enableDeviceSelectionMenu) ? { hidden: true } : undefined, split: (_g = props.split) !== null && _g !== void 0 ? _g : props.enableDeviceSelectionMenu, "aria-roledescription": props.enableDeviceSelectionMenu ? strings.cameraButtonSplitRoleDescription : undefined, splitButtonAriaLabel: props.enableDeviceSelectionMenu ? splitButtonAriaString : undefined, splitButtonMenuProps: splitButtonMenuProps }))));
 };
 //# sourceMappingURL=CameraButton.js.map

package/dist/dist-esm/react-components/src/components/CameraButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"CameraButton.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/CameraButton.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport React, { useCallback, useState, useMemo } from 'react';\nimport { useLocale } from '../localization';\nimport { VideoStreamOptions } from '../types';\nimport { ControlBarButton, ControlBarButtonProps } from './ControlBarButton';\nimport { _HighContrastAwareIcon } from './HighContrastAwareIcon';\nimport { ContextualMenuItemType, IButtonProps, IContextualMenuItem, IContextualMenuItemStyles, IContextualMenuStyles } from '@fluentui/react';\nimport { ControlBarButtonStyles } from './ControlBarButton';\nimport { OptionsDevice, generateDefaultDeviceMenuProps } from './DevicesButton';\nimport { Announcer } from './Announcer';\nconst defaultLocalVideoViewOptions = ({\n  scalingMode: 'Crop',\n  isMirrored: true\n} as VideoStreamOptions);\n\n/**\n * Strings of CameraButton that can be overridden.\n *\n * @public\n */\nexport interface CameraButtonStrings {\n  /** Label when button is on. */\n  onLabel: string;\n  /** Label when button is off. */\n  offLabel: string;\n  /** Tooltip content when the button is disabled. */\n  tooltipDisabledContent?: string;\n  /** Tooltip content when the button is on. */\n  tooltipOnContent?: string;\n  /** Tooltip content when the button is off. */\n  tooltipOffContent?: string;\n  /** Tooltip content when the button is disabled due to video loading. */\n  tooltipVideoLoadingContent?: string;\n  /**\n   * Title of camera menu\n   */\n  cameraMenuTitle: string;\n  /**\n   * Tooltip of camera menu\n   */\n  cameraMenuTooltip: string;\n  /**\n   * description of camera button split button role\n   */\n  cameraButtonSplitRoleDescription?: string;\n  /**\n   * Camera split button aria label for when button is enabled.\n   */\n  onSplitButtonAriaLabel?: string;\n  /**\n   * Camera split button aria label for when button is disabled.\n   */\n  offSplitButtonAriaLabel?: string;\n  /**\n   * Camera action turned on string for announcer\n   */\n  cameraActionTurnedOnAnnouncement?: string;\n  /**\n   * Camera action turned off string for announcer\n   */\n  cameraActionTurnedOffAnnouncement?: string;\n  /**\n   * Primary action for when the camera is turned off\n   */\n  offSplitButtonPrimaryActionCamera?: string;\n  /**\n   * Primary action for when the camera is on\n   */\n  onSplitButtonPrimaryActionCamera?: string;\n  /**\n   * Title for primary action section of split button\n   */\n  cameraPrimaryActionSplitButtonTitle?: string;\n  /* @conditional-compile-remove(video-background-effects) */\n  /**\n   * Title for video effects menu item\n   */\n  videoEffectsMenuItemTitle?: string;\n}\n\n/**\n * Styles for {@link CameraButton}\n *\n * @public\n */\nexport interface CameraButtonStyles extends ControlBarButtonStyles {\n  /**\n   * Styles for the {@link CameraButton} menu.\n   */\n  menuStyles?: Partial<CameraButtonContextualMenuStyles>;\n}\n\n/**\n * Styles for the {@link CameraButton} menu.\n *\n * @public\n */\nexport interface CameraButtonContextualMenuStyles extends IContextualMenuStyles {\n  /**\n   * Styles for the items inside the {@link CameraButton} button menu.\n   */\n  menuItemStyles?: IContextualMenuItemStyles;\n}\n/**\n * Props for {@link CameraButton} component.\n *\n * @public\n */\nexport interface CameraButtonProps extends ControlBarButtonProps {\n  /**\n   * Utility property for using this component with `communication react eventHandlers`.\n   * Maps directly to the `onClick` property.\n   */\n  onToggleCamera?: (options?: VideoStreamOptions) => Promise<void>;\n\n  /**\n   * Options for rendering local video view.\n   */\n  localVideoViewOptions?: VideoStreamOptions;\n  /**\n   * Available cameras for selection\n   */\n  cameras?: OptionsDevice[];\n  /**\n   * Camera that is shown as currently selected\n   */\n  selectedCamera?: OptionsDevice;\n  /**\n   * Callback when a camera is selected\n   */\n  onSelectCamera?: (device: OptionsDevice) => Promise<void>;\n  /**\n   * Whether to use a {@link SplitButton} with a {@link IContextualMenu} for device selection.\n   *\n   * default: false\n   */\n  enableDeviceSelectionMenu?: boolean;\n  /**\n   * Optional strings to override in component\n   */\n  strings?: Partial<CameraButtonStrings>;\n  /**\n   * Styles for {@link CameraButton} and the device selection flyout.\n   */\n  styles?: Partial<CameraButtonStyles>;\n  /* @conditional-compile-remove(video-background-effects) */\n  /**\n   * Callback when a effects is clicked\n   */\n  onShowVideoEffectsPicker?: (showVideoEffectsOptions: boolean) => void;\n}\n\n/**\n * A button to turn camera on / off.\n *\n * Can be used with {@link ControlBar}.\n *\n * @public\n */\nexport const CameraButton = (props: CameraButtonProps): JSX.Element => {\n  const {\n    localVideoViewOptions,\n    onToggleCamera\n  } = props;\n  const [waitForCamera, setWaitForCamera] = useState(false);\n  const localeStrings = useLocale().strings.cameraButton;\n  const strings = {\n    ...localeStrings,\n    ...props.strings\n  };\n  const [announcerString, setAnnouncerString] = useState<string | undefined>(undefined);\n  const disabled = props.disabled || waitForCamera;\n  const onRenderCameraOnIcon = (): JSX.Element => <_HighContrastAwareIcon disabled={disabled} iconName=\"ControlButtonCameraOn\" />;\n  const onRenderCameraOffIcon = (): JSX.Element => <_HighContrastAwareIcon disabled={disabled} iconName=\"ControlButtonCameraOff\" />;\n  if (waitForCamera && strings.tooltipVideoLoadingContent) {\n    strings.tooltipDisabledContent = strings.tooltipVideoLoadingContent;\n  }\n  const cameraOn = props.checked;\n  const splitButtonAriaString = cameraOn ? strings.onSplitButtonAriaLabel : strings.offSplitButtonAriaLabel;\n  const toggleAnnouncerString = useCallback((isCameraOn: boolean) => {\n    setAnnouncerString(!isCameraOn ? strings.cameraActionTurnedOffAnnouncement : strings.cameraActionTurnedOnAnnouncement);\n  }, [strings.cameraActionTurnedOffAnnouncement, strings.cameraActionTurnedOnAnnouncement]);\n  const onToggleClick = useCallback(async () => {\n    // Throttle click on camera, need to await onToggleCamera then allow another click\n    if (onToggleCamera) {\n      setWaitForCamera(true);\n      try {\n        await onToggleCamera(localVideoViewOptions ?? defaultLocalVideoViewOptions);\n        // allows for the setting of narrator strings triggering the announcer when camera is turned on or off.\n        toggleAnnouncerString(!cameraOn);\n      } finally {\n        setWaitForCamera(false);\n      }\n    }\n  }, [cameraOn, localVideoViewOptions, onToggleCamera, toggleAnnouncerString]);\n  const splitButtonMenuItems: IContextualMenuItem[] = [];\n  /* @conditional-compile-remove(video-background-effects) */\n  if (props.onShowVideoEffectsPicker) {\n    splitButtonMenuItems.push({\n      key: 'effects',\n      'data-ui-id': 'camera-split-button-video-effects',\n      text: strings.videoEffectsMenuItemTitle,\n      iconProps: {\n        iconName: 'ControlButtonVideoEffectsOption',\n        styles: {\n          root: {\n            lineHeight: 0\n          }\n        }\n      },\n      onClick: () => {\n        if (props.onShowVideoEffectsPicker) {\n          props.onShowVideoEffectsPicker(true);\n        }\n      }\n    });\n  }\n  splitButtonMenuItems.push({\n    key: 'cameraPrimaryAction',\n    text: props.checked ? strings.onSplitButtonPrimaryActionCamera : strings.offSplitButtonPrimaryActionCamera,\n    onClick: () => {\n      onToggleClick();\n    },\n    iconProps: {\n      iconName: props.checked ? 'SplitButtonPrimaryActionCameraOn' : 'SplitButtonPrimaryActionCameraOff',\n      styles: {\n        root: {\n          lineHeight: 0\n        }\n      }\n    }\n  });\n  const splitButtonPrimaryAction: IContextualMenuItem = {\n    key: 'primaryAction',\n    title: 'toggle camera',\n    itemType: ContextualMenuItemType.Section,\n    sectionProps: {\n      topDivider: true,\n      items: splitButtonMenuItems\n    }\n  };\n  const splitButtonMenuProps: IButtonProps = useMemo(() => ({\n    ...props.splitButtonMenuProps,\n    className: 'camera-split-button'\n  }), [props.splitButtonMenuProps]);\n  return <>\n      <Announcer announcementString={announcerString} ariaLive={'polite'} />\n      <ControlBarButton {...props} disabled={disabled} onClick={onToggleCamera ? onToggleClick : props.onClick} onRenderOnIcon={props.onRenderOnIcon ?? onRenderCameraOnIcon} onRenderOffIcon={props.onRenderOffIcon ?? onRenderCameraOffIcon} strings={strings} labelKey={props.labelKey ?? 'cameraButtonLabel'} menuProps={props.menuProps ?? (props.enableDeviceSelectionMenu ? generateDefaultDeviceMenuProps({\n      ...props,\n      styles: props.styles?.menuStyles\n    }, strings, splitButtonPrimaryAction) : undefined)} menuIconProps={props.menuIconProps ?? !props.enableDeviceSelectionMenu ? {\n      hidden: true\n    } : undefined} split={props.split ?? props.enableDeviceSelectionMenu} aria-roledescription={props.enableDeviceSelectionMenu ? strings.cameraButtonSplitRoleDescription : undefined} splitButtonAriaLabel={props.enableDeviceSelectionMenu ? splitButtonAriaString : undefined} splitButtonMenuProps={splitButtonMenuProps} />\n    </>;\n};"]}
+{"version":3,"file":"CameraButton.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/CameraButton.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport React, { useCallback, useState, useMemo } from 'react';\nimport { useLocale } from '../localization';\nimport { VideoStreamOptions } from '../types';\nimport { ControlBarButton, ControlBarButtonProps } from './ControlBarButton';\nimport { _HighContrastAwareIcon } from './HighContrastAwareIcon';\n\nimport {\n  ContextualMenuItemType,\n  IButtonProps,\n  IContextualMenuItem,\n  IContextualMenuItemStyles,\n  IContextualMenuStyles\n} from '@fluentui/react';\nimport { ControlBarButtonStyles } from './ControlBarButton';\nimport { OptionsDevice, generateDefaultDeviceMenuProps } from './DevicesButton';\nimport { Announcer } from './Announcer';\n\nconst defaultLocalVideoViewOptions = {\n  scalingMode: 'Crop',\n  isMirrored: true\n} as VideoStreamOptions;\n\n/**\n * Strings of CameraButton that can be overridden.\n *\n * @public\n */\nexport interface CameraButtonStrings {\n  /** Label when button is on. */\n  onLabel: string;\n  /** Label when button is off. */\n  offLabel: string;\n  /** Tooltip content when the button is disabled. */\n  tooltipDisabledContent?: string;\n  /** Tooltip content when the button is on. */\n  tooltipOnContent?: string;\n  /** Tooltip content when the button is off. */\n  tooltipOffContent?: string;\n  /** Tooltip content when the button is disabled due to video loading. */\n  tooltipVideoLoadingContent?: string;\n  /**\n   * Title of camera menu\n   */\n  cameraMenuTitle: string;\n  /**\n   * Tooltip of camera menu\n   */\n  cameraMenuTooltip: string;\n  /**\n   * description of camera button split button role\n   */\n  cameraButtonSplitRoleDescription?: string;\n  /**\n   * Camera split button aria label for when button is enabled.\n   */\n  onSplitButtonAriaLabel?: string;\n  /**\n   * Camera split button aria label for when button is disabled.\n   */\n  offSplitButtonAriaLabel?: string;\n  /**\n   * Camera action turned on string for announcer\n   */\n  cameraActionTurnedOnAnnouncement?: string;\n  /**\n   * Camera action turned off string for announcer\n   */\n  cameraActionTurnedOffAnnouncement?: string;\n  /**\n   * Primary action for when the camera is turned off\n   */\n  offSplitButtonPrimaryActionCamera?: string;\n  /**\n   * Primary action for when the camera is on\n   */\n  onSplitButtonPrimaryActionCamera?: string;\n  /**\n   * Title for primary action section of split button\n   */\n  cameraPrimaryActionSplitButtonTitle?: string;\n  /* @conditional-compile-remove(video-background-effects) */\n  /**\n   * Title for video effects menu item\n   */\n  videoEffectsMenuItemTitle?: string;\n}\n\n/**\n * Styles for {@link CameraButton}\n *\n * @public\n */\nexport interface CameraButtonStyles extends ControlBarButtonStyles {\n  /**\n   * Styles for the {@link CameraButton} menu.\n   */\n  menuStyles?: Partial<CameraButtonContextualMenuStyles>;\n}\n\n/**\n * Styles for the {@link CameraButton} menu.\n *\n * @public\n */\nexport interface CameraButtonContextualMenuStyles extends IContextualMenuStyles {\n  /**\n   * Styles for the items inside the {@link CameraButton} button menu.\n   */\n  menuItemStyles?: IContextualMenuItemStyles;\n}\n/**\n * Props for {@link CameraButton} component.\n *\n * @public\n */\nexport interface CameraButtonProps extends ControlBarButtonProps {\n  /**\n   * Utility property for using this component with `communication react eventHandlers`.\n   * Maps directly to the `onClick` property.\n   */\n  onToggleCamera?: (options?: VideoStreamOptions) => Promise<void>;\n\n  /**\n   * Options for rendering local video view.\n   */\n  localVideoViewOptions?: VideoStreamOptions;\n  /**\n   * Available cameras for selection\n   */\n  cameras?: OptionsDevice[];\n  /**\n   * Camera that is shown as currently selected\n   */\n  selectedCamera?: OptionsDevice;\n  /**\n   * Callback when a camera is selected\n   */\n  onSelectCamera?: (device: OptionsDevice) => Promise<void>;\n  /**\n   * Whether to use a {@link SplitButton} with a {@link IContextualMenu} for device selection.\n   *\n   * default: false\n   */\n  enableDeviceSelectionMenu?: boolean;\n  /**\n   * Optional strings to override in component\n   */\n  strings?: Partial<CameraButtonStrings>;\n  /**\n   * Styles for {@link CameraButton} and the device selection flyout.\n   */\n  styles?: Partial<CameraButtonStyles>;\n  /* @conditional-compile-remove(video-background-effects) */\n  /**\n   * Callback when a effects is clicked\n   */\n  onShowVideoEffectsPicker?: (showVideoEffectsOptions: boolean) => void;\n}\n\n/**\n * A button to turn camera on / off.\n *\n * Can be used with {@link ControlBar}.\n *\n * @public\n */\nexport const CameraButton = (props: CameraButtonProps): JSX.Element => {\n  const { localVideoViewOptions, onToggleCamera } = props;\n  const [waitForCamera, setWaitForCamera] = useState(false);\n  const localeStrings = useLocale().strings.cameraButton;\n  const strings = { ...localeStrings, ...props.strings };\n  const [announcerString, setAnnouncerString] = useState<string | undefined>(undefined);\n\n  const disabled = props.disabled || waitForCamera;\n\n  const onRenderCameraOnIcon = (): JSX.Element => (\n    <_HighContrastAwareIcon disabled={disabled} iconName=\"ControlButtonCameraOn\" />\n  );\n  const onRenderCameraOffIcon = (): JSX.Element => (\n    <_HighContrastAwareIcon disabled={disabled} iconName=\"ControlButtonCameraOff\" />\n  );\n  if (waitForCamera && strings.tooltipVideoLoadingContent) {\n    strings.tooltipDisabledContent = strings.tooltipVideoLoadingContent;\n  }\n\n  const cameraOn = props.checked;\n  const splitButtonAriaString = cameraOn ? strings.onSplitButtonAriaLabel : strings.offSplitButtonAriaLabel;\n\n  const toggleAnnouncerString = useCallback(\n    (isCameraOn: boolean) => {\n      setAnnouncerString(\n        !isCameraOn ? strings.cameraActionTurnedOffAnnouncement : strings.cameraActionTurnedOnAnnouncement\n      );\n    },\n    [strings.cameraActionTurnedOffAnnouncement, strings.cameraActionTurnedOnAnnouncement]\n  );\n\n  const onToggleClick = useCallback(async () => {\n    // Throttle click on camera, need to await onToggleCamera then allow another click\n    if (onToggleCamera) {\n      setWaitForCamera(true);\n      try {\n        await onToggleCamera(localVideoViewOptions ?? defaultLocalVideoViewOptions);\n        // allows for the setting of narrator strings triggering the announcer when camera is turned on or off.\n        toggleAnnouncerString(!cameraOn);\n      } finally {\n        setWaitForCamera(false);\n      }\n    }\n  }, [cameraOn, localVideoViewOptions, onToggleCamera, toggleAnnouncerString]);\n\n  const splitButtonMenuItems: IContextualMenuItem[] = [];\n  /* @conditional-compile-remove(video-background-effects) */\n  if (props.onShowVideoEffectsPicker) {\n    splitButtonMenuItems.push({\n      key: 'effects',\n      'data-ui-id': 'camera-split-button-video-effects',\n      text: strings.videoEffectsMenuItemTitle,\n      iconProps: { iconName: 'ControlButtonVideoEffectsOption', styles: { root: { lineHeight: 0 } } },\n      onClick: () => {\n        if (props.onShowVideoEffectsPicker) {\n          props.onShowVideoEffectsPicker(true);\n        }\n      }\n    });\n  }\n\n  splitButtonMenuItems.push({\n    key: 'cameraPrimaryAction',\n    text: props.checked ? strings.onSplitButtonPrimaryActionCamera : strings.offSplitButtonPrimaryActionCamera,\n    onClick: () => {\n      onToggleClick();\n    },\n    iconProps: {\n      iconName: props.checked ? 'SplitButtonPrimaryActionCameraOn' : 'SplitButtonPrimaryActionCameraOff',\n      styles: { root: { lineHeight: 0 } }\n    }\n  });\n\n  const splitButtonPrimaryAction: IContextualMenuItem = {\n    key: 'primaryAction',\n    title: 'toggle camera',\n    itemType: ContextualMenuItemType.Section,\n    sectionProps: {\n      topDivider: true,\n      items: splitButtonMenuItems\n    }\n  };\n\n  const splitButtonMenuProps: IButtonProps = useMemo(\n    () => ({\n      ...props.splitButtonMenuProps,\n      className: 'camera-split-button'\n    }),\n    [props.splitButtonMenuProps]\n  );\n\n  return (\n    <>\n      <Announcer announcementString={announcerString} ariaLive={'polite'} />\n      <ControlBarButton\n        {...props}\n        disabled={disabled}\n        onClick={onToggleCamera ? onToggleClick : props.onClick}\n        onRenderOnIcon={props.onRenderOnIcon ?? onRenderCameraOnIcon}\n        onRenderOffIcon={props.onRenderOffIcon ?? onRenderCameraOffIcon}\n        strings={strings}\n        labelKey={props.labelKey ?? 'cameraButtonLabel'}\n        menuProps={\n          props.menuProps ??\n          (props.enableDeviceSelectionMenu\n            ? generateDefaultDeviceMenuProps(\n                { ...props, styles: props.styles?.menuStyles },\n                strings,\n                splitButtonPrimaryAction\n              )\n            : undefined)\n        }\n        menuIconProps={props.menuIconProps ?? !props.enableDeviceSelectionMenu ? { hidden: true } : undefined}\n        split={props.split ?? props.enableDeviceSelectionMenu}\n        aria-roledescription={props.enableDeviceSelectionMenu ? strings.cameraButtonSplitRoleDescription : undefined}\n        splitButtonAriaLabel={props.enableDeviceSelectionMenu ? splitButtonAriaString : undefined}\n        splitButtonMenuProps={splitButtonMenuProps}\n      />\n    </>\n  );\n};\n"]}

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

@@ -22,11 +22,11 @@ export const _Caption = (props) => {
         }
     };
     const userIcon = onRenderAvatar ? onRenderAvatar(userId !== null && userId !== void 0 ? userId : '', personaOptions) : React.createElement(Persona, Object.assign({}, personaOptions));
-    return React.createElement(Stack, { horizontal: true, verticalAlign: "start", horizontalAlign: "start" },
+    return (React.createElement(Stack, { horizontal: true, verticalAlign: "start", horizontalAlign: "start" },
         React.createElement(Stack.Item, { className: iconClassName }, userIcon),
         React.createElement(Stack, { verticalAlign: "start", className: captionsContentContainerClassName },
             React.createElement(Stack.Item, { className: displayNameContainerClassName },
                 React.createElement(Text, { className: displayNameClassName }, displayName)),
-            React.createElement(Stack.Item, { className: captionClassName, dir: "auto" }, captionText)));
+            React.createElement(Stack.Item, { className: captionClassName, dir: "auto" }, captionText))));
 };
 //# sourceMappingURL=Caption.js.map

package/dist/dist-esm/react-components/src/components/Caption.js.map

@@ -1 +1 @@
-{"version":3,"file":"Caption.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/Caption.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAClC,OAAO,EAAY,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAC9E,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,gBAAgB,EAAE,iCAAiC,EAAE,oBAAoB,EAAE,6BAA6B,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAgBlK;;;GAGG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,KAAoB,EAAe,EAAE;IAC5D,MAAM,EACJ,WAAW,EACX,MAAM,EACN,WAAW,EACX,cAAc,EACf,GAAG,KAAK,CAAC;IACV,MAAM,cAAc,GAAa;QAC/B,kBAAkB,EAAE,IAAI;QACxB,IAAI,EAAE,WAAW,CAAC,MAAM;QACxB,IAAI,EAAE,WAAW;QACjB,mBAAmB,EAAE,KAAK;QAC1B,iBAAiB,EAAE,OAAO;QAC1B,MAAM,EAAE;YACN,IAAI,EAAE;gBACJ,MAAM,EAAE,SAAS;aAClB;SACF;KACF,CAAC;IACF,MAAM,QAAQ,GAAG,cAAc,CAAC,CAAC,CAAC,cAAc,CAAC,MAAM,aAAN,MAAM,cAAN,MAAM,GAAI,EAAE,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC,oBAAC,OAAO,oBAAK,cAAc,EAAI,CAAC;IACjH,OAAO,oBAAC,KAAK,IAAC,UAAU,QAAC,aAAa,EAAC,OAAO,EAAC,eAAe,EAAC,OAAO;QAClE,oBAAC,KAAK,CAAC,IAAI,IAAC,SAAS,EAAE,aAAa,IAAG,QAAQ,CAAc;QAE7D,oBAAC,KAAK,IAAC,aAAa,EAAC,OAAO,EAAC,SAAS,EAAE,iCAAiC;YACvE,oBAAC,KAAK,CAAC,IAAI,IAAC,SAAS,EAAE,6BAA6B;gBAClD,oBAAC,IAAI,IAAC,SAAS,EAAE,oBAAoB,IAAG,WAAW,CAAQ,CAChD;YACb,oBAAC,KAAK,CAAC,IAAI,IAAC,SAAS,EAAE,gBAAgB,EAAE,GAAG,EAAC,MAAM,IAChD,WAAW,CACD,CACP,CACF,CAAC;AACb,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\nimport { IPersona, Persona, Stack, PersonaSize, Text } from '@fluentui/react';\nimport React from 'react';\nimport { _FileUploadCardsStrings } from './FileUploadCards';\nimport { OnRenderAvatarCallback } from '../types';\nimport { captionClassName, captionsContentContainerClassName, displayNameClassName, displayNameContainerClassName, iconClassName } from './styles/Captions.style';\nimport { _CaptionsInfo } from './CaptionsBanner';\n\n/**\n * @internal\n * Props for a single line of caption.\n */\nexport interface _CaptionProps extends _CaptionsInfo {\n  /**\n   * Optional callback to override render of the avatar.\n   *\n   * @param userId - user Id\n   */\n  onRenderAvatar?: OnRenderAvatarCallback;\n}\n\n/**\n * @internal\n * A component for displaying a single line of caption\n */\nexport const _Caption = (props: _CaptionProps): JSX.Element => {\n  const {\n    displayName,\n    userId,\n    captionText,\n    onRenderAvatar\n  } = props;\n  const personaOptions: IPersona = {\n    hidePersonaDetails: true,\n    size: PersonaSize.size32,\n    text: displayName,\n    showOverflowTooltip: false,\n    initialsTextColor: 'white',\n    styles: {\n      root: {\n        margin: '0.25rem'\n      }\n    }\n  };\n  const userIcon = onRenderAvatar ? onRenderAvatar(userId ?? '', personaOptions) : <Persona {...personaOptions} />;\n  return <Stack horizontal verticalAlign=\"start\" horizontalAlign=\"start\">\n      <Stack.Item className={iconClassName}>{userIcon}</Stack.Item>\n\n      <Stack verticalAlign=\"start\" className={captionsContentContainerClassName}>\n        <Stack.Item className={displayNameContainerClassName}>\n          <Text className={displayNameClassName}>{displayName}</Text>\n        </Stack.Item>\n        <Stack.Item className={captionClassName} dir=\"auto\">\n          {captionText}\n        </Stack.Item>\n      </Stack>\n    </Stack>;\n};"]}
+{"version":3,"file":"Caption.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/Caption.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAClC,OAAO,EAAY,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAC9E,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EACL,gBAAgB,EAChB,iCAAiC,EACjC,oBAAoB,EACpB,6BAA6B,EAC7B,aAAa,EACd,MAAM,yBAAyB,CAAC;AAgBjC;;;GAGG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,KAAoB,EAAe,EAAE;IAC5D,MAAM,EAAE,WAAW,EAAE,MAAM,EAAE,WAAW,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC;IAEnE,MAAM,cAAc,GAAa;QAC/B,kBAAkB,EAAE,IAAI;QACxB,IAAI,EAAE,WAAW,CAAC,MAAM;QACxB,IAAI,EAAE,WAAW;QACjB,mBAAmB,EAAE,KAAK;QAC1B,iBAAiB,EAAE,OAAO;QAC1B,MAAM,EAAE;YACN,IAAI,EAAE;gBACJ,MAAM,EAAE,SAAS;aAClB;SACF;KACF,CAAC;IAEF,MAAM,QAAQ,GAAG,cAAc,CAAC,CAAC,CAAC,cAAc,CAAC,MAAM,aAAN,MAAM,cAAN,MAAM,GAAI,EAAE,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC,oBAAC,OAAO,oBAAK,cAAc,EAAI,CAAC;IAEjH,OAAO,CACL,oBAAC,KAAK,IAAC,UAAU,QAAC,aAAa,EAAC,OAAO,EAAC,eAAe,EAAC,OAAO;QAC7D,oBAAC,KAAK,CAAC,IAAI,IAAC,SAAS,EAAE,aAAa,IAAG,QAAQ,CAAc;QAE7D,oBAAC,KAAK,IAAC,aAAa,EAAC,OAAO,EAAC,SAAS,EAAE,iCAAiC;YACvE,oBAAC,KAAK,CAAC,IAAI,IAAC,SAAS,EAAE,6BAA6B;gBAClD,oBAAC,IAAI,IAAC,SAAS,EAAE,oBAAoB,IAAG,WAAW,CAAQ,CAChD;YACb,oBAAC,KAAK,CAAC,IAAI,IAAC,SAAS,EAAE,gBAAgB,EAAE,GAAG,EAAC,MAAM,IAChD,WAAW,CACD,CACP,CACF,CACT,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\nimport { IPersona, Persona, Stack, PersonaSize, Text } from '@fluentui/react';\nimport React from 'react';\nimport { _FileUploadCardsStrings } from './FileUploadCards';\nimport { OnRenderAvatarCallback } from '../types';\nimport {\n  captionClassName,\n  captionsContentContainerClassName,\n  displayNameClassName,\n  displayNameContainerClassName,\n  iconClassName\n} from './styles/Captions.style';\nimport { _CaptionsInfo } from './CaptionsBanner';\n\n/**\n * @internal\n * Props for a single line of caption.\n */\nexport interface _CaptionProps extends _CaptionsInfo {\n  /**\n   * Optional callback to override render of the avatar.\n   *\n   * @param userId - user Id\n   */\n  onRenderAvatar?: OnRenderAvatarCallback;\n}\n\n/**\n * @internal\n * A component for displaying a single line of caption\n */\nexport const _Caption = (props: _CaptionProps): JSX.Element => {\n  const { displayName, userId, captionText, onRenderAvatar } = props;\n\n  const personaOptions: IPersona = {\n    hidePersonaDetails: true,\n    size: PersonaSize.size32,\n    text: displayName,\n    showOverflowTooltip: false,\n    initialsTextColor: 'white',\n    styles: {\n      root: {\n        margin: '0.25rem'\n      }\n    }\n  };\n\n  const userIcon = onRenderAvatar ? onRenderAvatar(userId ?? '', personaOptions) : <Persona {...personaOptions} />;\n\n  return (\n    <Stack horizontal verticalAlign=\"start\" horizontalAlign=\"start\">\n      <Stack.Item className={iconClassName}>{userIcon}</Stack.Item>\n\n      <Stack verticalAlign=\"start\" className={captionsContentContainerClassName}>\n        <Stack.Item className={displayNameContainerClassName}>\n          <Text className={displayNameClassName}>{displayName}</Text>\n        </Stack.Item>\n        <Stack.Item className={captionClassName} dir=\"auto\">\n          {captionText}\n        </Stack.Item>\n      </Stack>\n    </Stack>\n  );\n};\n"]}

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

@@ -4,7 +4,7 @@ import { Stack, FocusZone, Spinner } from '@fluentui/react';
 import React, { useEffect, useRef, useState, useCallback } from 'react';
 import { Ref } from "../../../northstar-wrapper/src";
 import { _Caption } from './Caption';
-import { captionContainerClassName, captionsBannerClassName, captionsContainerClassName, loadingBannerClassName } from './styles/Captions.style';
+import { captionContainerClassName, captionsBannerStyles, captionsContainerClassName, loadingBannerStyles } from './styles/Captions.style';
 /**
  * @internal
  * A component for displaying a CaptionsBanner with user icon, displayName and captions text.
@@ -22,7 +22,8 @@ export const _CaptionsBanner = (props) => {
         if (!captionsScrollDivRef.current) {
             return;
         }
-        const atBottom = Math.ceil(captionsScrollDivRef.current.scrollTop) >= captionsScrollDivRef.current.scrollHeight - captionsScrollDivRef.current.clientHeight;
+        const atBottom = Math.ceil(captionsScrollDivRef.current.scrollTop) >=
+            captionsScrollDivRef.current.scrollHeight - captionsScrollDivRef.current.clientHeight;
         setIsAtBottomOfScroll(atBottom);
     }, []);
     useEffect(() => {
@@ -38,13 +39,13 @@ export const _CaptionsBanner = (props) => {
             scrollToBottom();
         }
     }, [captions, isAtBottomOfScroll]);
-    return React.createElement(React.Fragment, null, startCaptionsInProgress && React.createElement(FocusZone, { as: "ul", className: captionsContainerClassName },
-        isCaptionsOn && React.createElement(Ref, { innerRef: captionsScrollDivRef },
-            React.createElement(Stack, { verticalAlign: "start", styles: captionsBannerClassName(formFactor) }, captions.map(caption => {
-                return React.createElement("div", { key: caption.id, className: captionContainerClassName, "data-is-focusable": true },
-                    React.createElement(_Caption, Object.assign({}, caption, { onRenderAvatar: onRenderAvatar })));
-            }))),
-        !isCaptionsOn && React.createElement(Stack, { verticalAlign: "center", className: loadingBannerClassName, "data-is-focusable": true },
-            React.createElement(Spinner, { label: strings === null || strings === void 0 ? void 0 : strings.captionsBannerSpinnerText, ariaLive: "assertive", labelPosition: "right" }))));
+    return (React.createElement(React.Fragment, null, startCaptionsInProgress && (React.createElement(FocusZone, { as: "ul", className: captionsContainerClassName },
+        isCaptionsOn && (React.createElement(Ref, { innerRef: captionsScrollDivRef },
+            React.createElement(Stack, { verticalAlign: "start", styles: captionsBannerStyles(formFactor) }, captions.map((caption) => {
+                return (React.createElement("div", { key: caption.id, className: captionContainerClassName, "data-is-focusable": true },
+                    React.createElement(_Caption, Object.assign({}, caption, { onRenderAvatar: onRenderAvatar }))));
+            })))),
+        !isCaptionsOn && (React.createElement(Stack, { verticalAlign: "center", styles: loadingBannerStyles(formFactor), "data-is-focusable": true },
+            React.createElement(Spinner, { label: strings === null || strings === void 0 ? void 0 : strings.captionsBannerSpinnerText, ariaLive: "assertive", labelPosition: "right" })))))));
 };
 //# sourceMappingURL=CaptionsBanner.js.map

package/dist/dist-esm/react-components/src/components/CaptionsBanner.js.map

@@ -1 +1 @@
-{"version":3,"file":"CaptionsBanner.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/CaptionsBanner.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\nimport { Stack, FocusZone, Spinner } from '@fluentui/react';\nimport React, { useEffect, useRef, useState, useCallback } from 'react';\nimport { _FileUploadCardsStrings } from './FileUploadCards';\nimport { Ref } from '@internal/northstar-wrapper';\nimport { _Caption } from './Caption';\nimport { captionContainerClassName, captionsBannerClassName, captionsContainerClassName, loadingBannerClassName } from './styles/Captions.style';\nimport { OnRenderAvatarCallback } from '../types';\n\n/**\n * @internal\n * information required for each line of caption\n */\nexport type _CaptionsInfo = {\n  id: string;\n  displayName: string;\n  captionText: string;\n  userId?: string;\n};\n\n/**\n * @internal\n * strings for captions banner\n */\nexport interface _CaptionsBannerStrings {\n  captionsBannerSpinnerText?: string;\n}\n\n/**\n * @internal\n * _CaptionsBanner Component Props.\n */\nexport interface _CaptionsBannerProps {\n  captions: _CaptionsInfo[];\n  isCaptionsOn?: boolean;\n  startCaptionsInProgress?: boolean;\n  /**\n   * Optional callback to override render of the avatar.\n   *\n   * @param userId - user Id\n   */\n  onRenderAvatar?: OnRenderAvatarCallback;\n  strings?: _CaptionsBannerStrings;\n  /**\n   * Optional form factor for the component.\n   * @defaultValue 'default'\n   */\n  formFactor?: 'default' | 'compact';\n}\n\n/**\n * @internal\n * A component for displaying a CaptionsBanner with user icon, displayName and captions text.\n */\nexport const _CaptionsBanner = (props: _CaptionsBannerProps): JSX.Element => {\n  const {\n    captions,\n    isCaptionsOn,\n    startCaptionsInProgress,\n    onRenderAvatar,\n    strings,\n    formFactor = 'default'\n  } = props;\n  const captionsScrollDivRef = useRef<HTMLElement>(null);\n  const [isAtBottomOfScroll, setIsAtBottomOfScroll] = useState<boolean>(true);\n  const scrollToBottom = (): void => {\n    if (captionsScrollDivRef.current) {\n      captionsScrollDivRef.current.scrollTop = captionsScrollDivRef.current.scrollHeight;\n    }\n  };\n  const handleScrollToTheBottom = useCallback((): void => {\n    if (!captionsScrollDivRef.current) {\n      return;\n    }\n    const atBottom = Math.ceil(captionsScrollDivRef.current.scrollTop) >= captionsScrollDivRef.current.scrollHeight - captionsScrollDivRef.current.clientHeight;\n    setIsAtBottomOfScroll(atBottom);\n  }, []);\n  useEffect(() => {\n    const captionsScrollDiv = captionsScrollDivRef.current;\n    captionsScrollDiv?.addEventListener('scroll', handleScrollToTheBottom);\n    return () => {\n      captionsScrollDiv?.removeEventListener('scroll', handleScrollToTheBottom);\n    };\n  }, [handleScrollToTheBottom, isCaptionsOn]);\n  useEffect(() => {\n    // only auto scroll to bottom is already is at bottom of scroll before new caption comes in\n    if (isAtBottomOfScroll) {\n      scrollToBottom();\n    }\n  }, [captions, isAtBottomOfScroll]);\n  return <>\n      {startCaptionsInProgress && <FocusZone as=\"ul\" className={captionsContainerClassName}>\n          {isCaptionsOn && <Ref innerRef={captionsScrollDivRef}>\n              <Stack verticalAlign=\"start\" styles={captionsBannerClassName(formFactor)}>\n                {captions.map(caption => {\n            return <div key={caption.id} className={captionContainerClassName} data-is-focusable={true}>\n                      <_Caption {...caption} onRenderAvatar={onRenderAvatar} />\n                    </div>;\n          })}\n              </Stack>\n            </Ref>}\n          {!isCaptionsOn && <Stack verticalAlign=\"center\" className={loadingBannerClassName} data-is-focusable={true}>\n              <Spinner label={strings?.captionsBannerSpinnerText} ariaLive=\"assertive\" labelPosition=\"right\" />\n            </Stack>}\n        </FocusZone>}\n    </>;\n};\"../../../northstar-wrapper/src\""]}
+{"version":3,"file":"CaptionsBanner.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/CaptionsBanner.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\nimport { Stack, FocusZone, Spinner } from '@fluentui/react';\nimport React, { useEffect, useRef, useState, useCallback } from 'react';\nimport { _FileUploadCardsStrings } from './FileUploadCards';\nimport { Ref } from '@internal/northstar-wrapper';\nimport { _Caption } from './Caption';\nimport {\n  captionContainerClassName,\n  captionsBannerStyles,\n  captionsContainerClassName,\n  loadingBannerStyles\n} from './styles/Captions.style';\nimport { OnRenderAvatarCallback } from '../types';\n\n/**\n * @internal\n * information required for each line of caption\n */\nexport type _CaptionsInfo = {\n  id: string;\n  displayName: string;\n  captionText: string;\n  userId?: string;\n};\n\n/**\n * @internal\n * strings for captions banner\n */\nexport interface _CaptionsBannerStrings {\n  captionsBannerSpinnerText?: string;\n}\n\n/**\n * @internal\n * _CaptionsBanner Component Props.\n */\nexport interface _CaptionsBannerProps {\n  captions: _CaptionsInfo[];\n  isCaptionsOn?: boolean;\n  startCaptionsInProgress?: boolean;\n  /**\n   * Optional callback to override render of the avatar.\n   *\n   * @param userId - user Id\n   */\n  onRenderAvatar?: OnRenderAvatarCallback;\n  strings?: _CaptionsBannerStrings;\n  /**\n   * Optional form factor for the component.\n   * @defaultValue 'default'\n   */\n  formFactor?: 'default' | 'compact';\n}\n\n/**\n * @internal\n * A component for displaying a CaptionsBanner with user icon, displayName and captions text.\n */\nexport const _CaptionsBanner = (props: _CaptionsBannerProps): JSX.Element => {\n  const { captions, isCaptionsOn, startCaptionsInProgress, onRenderAvatar, strings, formFactor = 'default' } = props;\n  const captionsScrollDivRef = useRef<HTMLElement>(null);\n  const [isAtBottomOfScroll, setIsAtBottomOfScroll] = useState<boolean>(true);\n\n  const scrollToBottom = (): void => {\n    if (captionsScrollDivRef.current) {\n      captionsScrollDivRef.current.scrollTop = captionsScrollDivRef.current.scrollHeight;\n    }\n  };\n\n  const handleScrollToTheBottom = useCallback((): void => {\n    if (!captionsScrollDivRef.current) {\n      return;\n    }\n    const atBottom =\n      Math.ceil(captionsScrollDivRef.current.scrollTop) >=\n      captionsScrollDivRef.current.scrollHeight - captionsScrollDivRef.current.clientHeight;\n\n    setIsAtBottomOfScroll(atBottom);\n  }, []);\n\n  useEffect(() => {\n    const captionsScrollDiv = captionsScrollDivRef.current;\n    captionsScrollDiv?.addEventListener('scroll', handleScrollToTheBottom);\n\n    return () => {\n      captionsScrollDiv?.removeEventListener('scroll', handleScrollToTheBottom);\n    };\n  }, [handleScrollToTheBottom, isCaptionsOn]);\n\n  useEffect(() => {\n    // only auto scroll to bottom is already is at bottom of scroll before new caption comes in\n    if (isAtBottomOfScroll) {\n      scrollToBottom();\n    }\n  }, [captions, isAtBottomOfScroll]);\n\n  return (\n    <>\n      {startCaptionsInProgress && (\n        <FocusZone as=\"ul\" className={captionsContainerClassName}>\n          {isCaptionsOn && (\n            <Ref innerRef={captionsScrollDivRef}>\n              <Stack verticalAlign=\"start\" styles={captionsBannerStyles(formFactor)}>\n                {captions.map((caption) => {\n                  return (\n                    <div key={caption.id} className={captionContainerClassName} data-is-focusable={true}>\n                      <_Caption {...caption} onRenderAvatar={onRenderAvatar} />\n                    </div>\n                  );\n                })}\n              </Stack>\n            </Ref>\n          )}\n          {!isCaptionsOn && (\n            <Stack verticalAlign=\"center\" styles={loadingBannerStyles(formFactor)} data-is-focusable={true}>\n              <Spinner label={strings?.captionsBannerSpinnerText} ariaLive=\"assertive\" labelPosition=\"right\" />\n            </Stack>\n          )}\n        </FocusZone>\n      )}\n    </>\n  );\n};\n\"../../../northstar-wrapper/src\""]}

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

@@ -47,14 +47,12 @@ export const _CaptionsSettingsModal = (props) => {
             onSetSpokenLanguage(languageCode);
         }
         else {
-            yield onStartCaptions({
-                spokenLanguage: languageCode
-            });
+            yield onStartCaptions({ spokenLanguage: languageCode });
         }
         onDismiss();
     }), [onDismiss, isCaptionsFeatureActive, onSetSpokenLanguage, onStartCaptions, selectedItem.key]);
     const dropdownOptions = useMemo(() => {
-        return supportedSpokenLanguages.map(languageCode => {
+        return supportedSpokenLanguages.map((languageCode) => {
             return {
                 key: languageCode,
                 text: captionsAvailableLanguageStrings ? captionsAvailableLanguageStrings[languageCode] : languageCode
@@ -70,24 +68,28 @@ export const _CaptionsSettingsModal = (props) => {
         preventDismissOnEvent: _preventDismissOnEvent
     }), []);
     const CaptionsSettingsComponent = useCallback(() => {
-        return React.createElement(Stack, null,
+        return (React.createElement(Stack, null,
             React.createElement(Dropdown, { label: strings === null || strings === void 0 ? void 0 : strings.captionsSettingsDropdownLabel, selectedKey: selectedItem ? selectedItem.key : undefined, onChange: onChange, calloutProps: calloutProps, placeholder: currentSpokenLanguage !== '' ? currentSpokenLanguage : defaultSpokenLanguage, options: dropdownOptions, styles: dropdownStyles }),
-            React.createElement(Text, { className: dropdownInfoTextStyle(theme) }, strings === null || strings === void 0 ? void 0 : strings.captionsSettingsDropdownInfoText));
-    }, [calloutProps, currentSpokenLanguage, dropdownOptions, selectedItem, strings === null || strings === void 0 ? void 0 : strings.captionsSettingsDropdownInfoText, strings === null || strings === void 0 ? void 0 : strings.captionsSettingsDropdownLabel, theme]);
+            React.createElement(Text, { className: dropdownInfoTextStyle(theme) }, strings === null || strings === void 0 ? void 0 : strings.captionsSettingsDropdownInfoText)));
+    }, [
+        calloutProps,
+        currentSpokenLanguage,
+        dropdownOptions,
+        selectedItem,
+        strings === null || strings === void 0 ? void 0 : strings.captionsSettingsDropdownInfoText,
+        strings === null || strings === void 0 ? void 0 : strings.captionsSettingsDropdownLabel,
+        theme
+    ]);
     const CaptionsSettingsModalStyle = useMemo(() => themedCaptionsSettingsModalStyle(theme), [theme]);
-    return React.createElement(React.Fragment, null, React.createElement(Modal, { titleAriaId: strings === null || strings === void 0 ? void 0 : strings.captionsSettingsModalAriaLabel, isOpen: showModal, onDismiss: onDismiss, isBlocking: true, styles: CaptionsSettingsModalStyle },
+    return (React.createElement(React.Fragment, null, React.createElement(Modal, { titleAriaId: strings === null || strings === void 0 ? void 0 : strings.captionsSettingsModalAriaLabel, isOpen: showModal, onDismiss: onDismiss, isBlocking: true, styles: CaptionsSettingsModalStyle },
         React.createElement(Stack, { horizontal: true, horizontalAlign: "space-between", verticalAlign: "center", className: titleContainerClassName },
             React.createElement(Text, { className: titleClassName }, strings === null || strings === void 0 ? void 0 : strings.captionsSettingsModalTitle),
-            React.createElement(IconButton, { iconProps: {
-                    iconName: 'Cancel'
-                }, ariaLabel: strings === null || strings === void 0 ? void 0 : strings.captionsSettingsCloseModalButtonAriaLabel, onClick: onDismiss, style: {
-                    color: theme.palette.black
-                } })),
+            React.createElement(IconButton, { iconProps: { iconName: 'Cancel' }, ariaLabel: strings === null || strings === void 0 ? void 0 : strings.captionsSettingsCloseModalButtonAriaLabel, onClick: onDismiss, style: { color: theme.palette.black } })),
         React.createElement(Stack, { className: dropdownContainerClassName }, CaptionsSettingsComponent()),
         React.createElement(Stack, { horizontal: true, horizontalAlign: "end", className: buttonsContainerClassName },
             React.createElement(PrimaryButton, { styles: buttonStyles(theme), onClick: onConfirm },
                 React.createElement("span", null, strings === null || strings === void 0 ? void 0 : strings.captionsSettingsConfirmButtonLabel)),
             React.createElement(DefaultButton, { onClick: onDismiss, styles: buttonStyles(theme) },
-                React.createElement("span", null, strings === null || strings === void 0 ? void 0 : strings.captionsSettingsCancelButtonLabel)))));
+                React.createElement("span", null, strings === null || strings === void 0 ? void 0 : strings.captionsSettingsCancelButtonLabel))))));
 };
 //# sourceMappingURL=CaptionsSettingsModal.js.map

package/dist/dist-esm/react-components/src/components/CaptionsSettingsModal.js.map

@@ -1 +1 @@
-{"version":3,"file":"CaptionsSettingsModal.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/CaptionsSettingsModal.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\nimport React, { useCallback, useEffect } from 'react';\nimport { useMemo, useState } from 'react';\nimport { IModalStyles, Modal, Stack, useTheme, Text, IconButton, Dropdown, IDropdownOption, DefaultButton, PrimaryButton } from '@fluentui/react';\nimport { buttonsContainerClassName, buttonStyles, dropdownContainerClassName, dropdownInfoTextStyle, dropdownStyles, themedCaptionsSettingsModalStyle, titleClassName, titleContainerClassName } from './styles/CaptionsSettingsModal.styles';\nimport { _captionsOptions } from './StartCaptionsButton';\nimport { defaultSpokenLanguage } from './utils';\nimport { CaptionsAvailableLanguageStrings } from '../types';\nimport { _preventDismissOnEvent } from '@internal/acs-ui-common';\n\n/**\n * @internal\n * strings for captions setting modal\n */\nexport interface _CaptionsSettingsModalStrings {\n  captionsSettingsModalTitle?: string;\n  captionsSettingsDropdownLabel?: string;\n  captionsSettingsDropdownInfoText?: string;\n  captionsSettingsConfirmButtonLabel?: string;\n  captionsSettingsCancelButtonLabel?: string;\n  captionsSettingsModalAriaLabel?: string;\n  captionsSettingsCloseModalButtonAriaLabel?: string;\n}\n\n/**\n * @internal\n * _CaptionsSettingsModal Component Props.\n */\nexport interface _CaptionsSettingsModalProps {\n  supportedSpokenLanguages: string[];\n  onSetSpokenLanguage: (language: string) => Promise<void>;\n  onStartCaptions: (options?: _captionsOptions) => Promise<void>;\n  currentSpokenLanguage: string;\n  captionsAvailableLanguageStrings?: CaptionsAvailableLanguageStrings;\n  isCaptionsFeatureActive?: boolean;\n  strings?: _CaptionsSettingsModalStrings;\n  showModal?: boolean;\n  onDismissCaptionsSettings?: () => void;\n}\n\n/**\n * @internal\n * a component for setting spoken languages\n */\nexport const _CaptionsSettingsModal = (props: _CaptionsSettingsModalProps): JSX.Element => {\n  const {\n    supportedSpokenLanguages,\n    currentSpokenLanguage,\n    isCaptionsFeatureActive,\n    showModal,\n    onSetSpokenLanguage,\n    onDismissCaptionsSettings,\n    onStartCaptions,\n    strings,\n    captionsAvailableLanguageStrings\n  } = props;\n  const theme = useTheme();\n  const [selectedItem, setSelectedItem] = useState<IDropdownOption>({\n    key: currentSpokenLanguage !== '' ? currentSpokenLanguage : defaultSpokenLanguage,\n    text: currentSpokenLanguage !== '' ? currentSpokenLanguage : defaultSpokenLanguage\n  });\n  const [hasSetSpokenLanguage, setHasSetSpokenLanguage] = useState(false);\n  const onDismiss = useCallback((): void => {\n    if (onDismissCaptionsSettings) {\n      onDismissCaptionsSettings();\n    }\n  }, [onDismissCaptionsSettings]);\n  useEffect(() => {\n    // set spoken language when start captions with a spoken language specified.\n    // this is to fix the bug when a second user starts captions with a new spoken language, captions bot ignore that spoken language\n    if (isCaptionsFeatureActive && !hasSetSpokenLanguage) {\n      onSetSpokenLanguage(selectedItem.key.toString());\n      // we only need to call set spoken language once when first starting captions\n      setHasSetSpokenLanguage(true);\n    }\n  }, [isCaptionsFeatureActive, onSetSpokenLanguage, selectedItem.key, hasSetSpokenLanguage]);\n  const onConfirm = useCallback(async (): Promise<void> => {\n    const languageCode = selectedItem.key.toString();\n    if (isCaptionsFeatureActive) {\n      onSetSpokenLanguage(languageCode);\n    } else {\n      await onStartCaptions({\n        spokenLanguage: languageCode\n      });\n    }\n    onDismiss();\n  }, [onDismiss, isCaptionsFeatureActive, onSetSpokenLanguage, onStartCaptions, selectedItem.key]);\n  const dropdownOptions: IDropdownOption[] = useMemo(() => {\n    return supportedSpokenLanguages.map(languageCode => {\n      return {\n        key: languageCode,\n        text: captionsAvailableLanguageStrings ? captionsAvailableLanguageStrings[languageCode] : languageCode\n      };\n    });\n  }, [supportedSpokenLanguages, captionsAvailableLanguageStrings]);\n  const onChange = (event: React.FormEvent<HTMLDivElement>, option: IDropdownOption | undefined): void => {\n    if (option) {\n      setSelectedItem(option);\n    }\n  };\n  const calloutProps = useMemo(() => ({\n    preventDismissOnEvent: _preventDismissOnEvent\n  }), []);\n  const CaptionsSettingsComponent = useCallback((): JSX.Element => {\n    return <Stack>\n        <Dropdown label={strings?.captionsSettingsDropdownLabel} selectedKey={selectedItem ? selectedItem.key : undefined} onChange={onChange} calloutProps={calloutProps} placeholder={currentSpokenLanguage !== '' ? currentSpokenLanguage : defaultSpokenLanguage} options={dropdownOptions} styles={dropdownStyles} />\n        <Text className={dropdownInfoTextStyle(theme)}>{strings?.captionsSettingsDropdownInfoText}</Text>\n      </Stack>;\n  }, [calloutProps, currentSpokenLanguage, dropdownOptions, selectedItem, strings?.captionsSettingsDropdownInfoText, strings?.captionsSettingsDropdownLabel, theme]);\n  const CaptionsSettingsModalStyle: Partial<IModalStyles> = useMemo(() => themedCaptionsSettingsModalStyle(theme), [theme]);\n  return <>\n      {<Modal titleAriaId={strings?.captionsSettingsModalAriaLabel} isOpen={showModal} onDismiss={onDismiss} isBlocking={true} styles={CaptionsSettingsModalStyle}>\n          <Stack horizontal horizontalAlign=\"space-between\" verticalAlign=\"center\" className={titleContainerClassName}>\n            <Text className={titleClassName}>{strings?.captionsSettingsModalTitle}</Text>\n            <IconButton iconProps={{\n          iconName: 'Cancel'\n        }} ariaLabel={strings?.captionsSettingsCloseModalButtonAriaLabel} onClick={onDismiss} style={{\n          color: theme.palette.black\n        }} />\n          </Stack>\n\n          <Stack className={dropdownContainerClassName}>{CaptionsSettingsComponent()}</Stack>\n          <Stack horizontal horizontalAlign=\"end\" className={buttonsContainerClassName}>\n            <PrimaryButton styles={buttonStyles(theme)} onClick={onConfirm}>\n              <span>{strings?.captionsSettingsConfirmButtonLabel}</span>\n            </PrimaryButton>\n            <DefaultButton onClick={onDismiss} styles={buttonStyles(theme)}>\n              <span>{strings?.captionsSettingsCancelButtonLabel}</span>\n            </DefaultButton>\n          </Stack>\n        </Modal>}\n    </>;\n};\"../../../acs-ui-common/src\""]}
+{"version":3,"file":"CaptionsSettingsModal.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/CaptionsSettingsModal.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\nimport React, { useCallback, useEffect } from 'react';\nimport { useMemo, useState } from 'react';\nimport {\n  IModalStyles,\n  Modal,\n  Stack,\n  useTheme,\n  Text,\n  IconButton,\n  Dropdown,\n  IDropdownOption,\n  DefaultButton,\n  PrimaryButton\n} from '@fluentui/react';\n\nimport {\n  buttonsContainerClassName,\n  buttonStyles,\n  dropdownContainerClassName,\n  dropdownInfoTextStyle,\n  dropdownStyles,\n  themedCaptionsSettingsModalStyle,\n  titleClassName,\n  titleContainerClassName\n} from './styles/CaptionsSettingsModal.styles';\nimport { _captionsOptions } from './StartCaptionsButton';\nimport { defaultSpokenLanguage } from './utils';\nimport { CaptionsAvailableLanguageStrings } from '../types';\nimport { _preventDismissOnEvent } from '@internal/acs-ui-common';\n\n/**\n * @internal\n * strings for captions setting modal\n */\nexport interface _CaptionsSettingsModalStrings {\n  captionsSettingsModalTitle?: string;\n  captionsSettingsDropdownLabel?: string;\n  captionsSettingsDropdownInfoText?: string;\n  captionsSettingsConfirmButtonLabel?: string;\n  captionsSettingsCancelButtonLabel?: string;\n  captionsSettingsModalAriaLabel?: string;\n  captionsSettingsCloseModalButtonAriaLabel?: string;\n}\n\n/**\n * @internal\n * _CaptionsSettingsModal Component Props.\n */\nexport interface _CaptionsSettingsModalProps {\n  supportedSpokenLanguages: string[];\n  onSetSpokenLanguage: (language: string) => Promise<void>;\n  onStartCaptions: (options?: _captionsOptions) => Promise<void>;\n  currentSpokenLanguage: string;\n  captionsAvailableLanguageStrings?: CaptionsAvailableLanguageStrings;\n  isCaptionsFeatureActive?: boolean;\n  strings?: _CaptionsSettingsModalStrings;\n  showModal?: boolean;\n  onDismissCaptionsSettings?: () => void;\n}\n\n/**\n * @internal\n * a component for setting spoken languages\n */\nexport const _CaptionsSettingsModal = (props: _CaptionsSettingsModalProps): JSX.Element => {\n  const {\n    supportedSpokenLanguages,\n    currentSpokenLanguage,\n    isCaptionsFeatureActive,\n    showModal,\n    onSetSpokenLanguage,\n    onDismissCaptionsSettings,\n    onStartCaptions,\n    strings,\n    captionsAvailableLanguageStrings\n  } = props;\n\n  const theme = useTheme();\n\n  const [selectedItem, setSelectedItem] = useState<IDropdownOption>({\n    key: currentSpokenLanguage !== '' ? currentSpokenLanguage : defaultSpokenLanguage,\n    text: currentSpokenLanguage !== '' ? currentSpokenLanguage : defaultSpokenLanguage\n  });\n\n  const [hasSetSpokenLanguage, setHasSetSpokenLanguage] = useState(false);\n\n  const onDismiss = useCallback((): void => {\n    if (onDismissCaptionsSettings) {\n      onDismissCaptionsSettings();\n    }\n  }, [onDismissCaptionsSettings]);\n\n  useEffect(() => {\n    // set spoken language when start captions with a spoken language specified.\n    // this is to fix the bug when a second user starts captions with a new spoken language, captions bot ignore that spoken language\n    if (isCaptionsFeatureActive && !hasSetSpokenLanguage) {\n      onSetSpokenLanguage(selectedItem.key.toString());\n      // we only need to call set spoken language once when first starting captions\n      setHasSetSpokenLanguage(true);\n    }\n  }, [isCaptionsFeatureActive, onSetSpokenLanguage, selectedItem.key, hasSetSpokenLanguage]);\n\n  const onConfirm = useCallback(async (): Promise<void> => {\n    const languageCode = selectedItem.key.toString();\n    if (isCaptionsFeatureActive) {\n      onSetSpokenLanguage(languageCode);\n    } else {\n      await onStartCaptions({ spokenLanguage: languageCode });\n    }\n    onDismiss();\n  }, [onDismiss, isCaptionsFeatureActive, onSetSpokenLanguage, onStartCaptions, selectedItem.key]);\n\n  const dropdownOptions: IDropdownOption[] = useMemo(() => {\n    return supportedSpokenLanguages.map((languageCode) => {\n      return {\n        key: languageCode,\n        text: captionsAvailableLanguageStrings ? captionsAvailableLanguageStrings[languageCode] : languageCode\n      };\n    });\n  }, [supportedSpokenLanguages, captionsAvailableLanguageStrings]);\n\n  const onChange = (event: React.FormEvent<HTMLDivElement>, option: IDropdownOption | undefined): void => {\n    if (option) {\n      setSelectedItem(option);\n    }\n  };\n\n  const calloutProps = useMemo(\n    () => ({\n      preventDismissOnEvent: _preventDismissOnEvent\n    }),\n    []\n  );\n\n  const CaptionsSettingsComponent = useCallback((): JSX.Element => {\n    return (\n      <Stack>\n        <Dropdown\n          label={strings?.captionsSettingsDropdownLabel}\n          selectedKey={selectedItem ? selectedItem.key : undefined}\n          onChange={onChange}\n          calloutProps={calloutProps}\n          placeholder={currentSpokenLanguage !== '' ? currentSpokenLanguage : defaultSpokenLanguage}\n          options={dropdownOptions}\n          styles={dropdownStyles}\n        />\n        <Text className={dropdownInfoTextStyle(theme)}>{strings?.captionsSettingsDropdownInfoText}</Text>\n      </Stack>\n    );\n  }, [\n    calloutProps,\n    currentSpokenLanguage,\n    dropdownOptions,\n    selectedItem,\n    strings?.captionsSettingsDropdownInfoText,\n    strings?.captionsSettingsDropdownLabel,\n    theme\n  ]);\n\n  const CaptionsSettingsModalStyle: Partial<IModalStyles> = useMemo(\n    () => themedCaptionsSettingsModalStyle(theme),\n    [theme]\n  );\n\n  return (\n    <>\n      {\n        <Modal\n          titleAriaId={strings?.captionsSettingsModalAriaLabel}\n          isOpen={showModal}\n          onDismiss={onDismiss}\n          isBlocking={true}\n          styles={CaptionsSettingsModalStyle}\n        >\n          <Stack horizontal horizontalAlign=\"space-between\" verticalAlign=\"center\" className={titleContainerClassName}>\n            <Text className={titleClassName}>{strings?.captionsSettingsModalTitle}</Text>\n            <IconButton\n              iconProps={{ iconName: 'Cancel' }}\n              ariaLabel={strings?.captionsSettingsCloseModalButtonAriaLabel}\n              onClick={onDismiss}\n              style={{ color: theme.palette.black }}\n            />\n          </Stack>\n\n          <Stack className={dropdownContainerClassName}>{CaptionsSettingsComponent()}</Stack>\n          <Stack horizontal horizontalAlign=\"end\" className={buttonsContainerClassName}>\n            <PrimaryButton styles={buttonStyles(theme)} onClick={onConfirm}>\n              <span>{strings?.captionsSettingsConfirmButtonLabel}</span>\n            </PrimaryButton>\n            <DefaultButton onClick={onDismiss} styles={buttonStyles(theme)}>\n              <span>{strings?.captionsSettingsCancelButtonLabel}</span>\n            </DefaultButton>\n          </Stack>\n        </Modal>\n      }\n    </>\n  );\n};\n\"../../../acs-ui-common/src\""]}