@azure/communication-react 1.5.2-alpha-202301190014.0 → 1.6.1-alpha-202306220014

package/dist/dist-esm/northstar-wrapper/src/index.js.LICENSE.txt

@@ -0,0 +1,41 @@
+/*
+ *          __        ___
+ *    _____/ /___  __/ (_)____
+ *   / ___/ __/ / / / / / ___/
+ *  (__  ) /_/ /_/ / / (__  )
+ * /____/\__/\__, /_/_/____/
+ *          /____/
+ *
+ * light - weight css preprocessor @licence MIT
+ */
+
+/*!
+	Copyright (c) 2018 Jed Watson.
+	Licensed under the MIT License (MIT), see
+	http://jedwatson.github.io/classnames
+*/
+
+/*!
+ * isobject <https://github.com/jonschlinkert/isobject>
+ *
+ * Copyright (c) 2014-2017, Jon Schlinkert.
+ * Released under the MIT License.
+ */
+
+/** @license React v0.20.2
+ * scheduler.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/** @license React v16.13.1
+ * react-is.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */

package/dist/dist-esm/react-components/src/components/Announcer/Announcer.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+/** @private */
+export declare type AnnouncerMessageBag = {
+    message: string;
+    id: string;
+};
+/** @private */
+export declare type AnnouncerProps = {
+    polite?: AnnouncerMessageBag;
+    assertive?: AnnouncerMessageBag;
+};
+/** @private */
+export declare const EMPTY_MESSAGE: {
+    message: string;
+    id: string;
+};
+/** @private */
+declare const Announcer: (props: AnnouncerProps) => JSX.Element;
+export default Announcer;
+//# sourceMappingURL=Announcer.d.ts.map

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

@@ -0,0 +1,44 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+/// Adapted from: https://github.com/AlmeroSteyn/react-aria-live/blob/master/src/modules/Announcer.js
+import React, { useEffect } from 'react';
+import MessageBlock from './MessageBlock';
+/** @private */
+export const EMPTY_MESSAGE = { message: '', id: '' };
+/** @private */
+const Announcer = (props) => {
+    var _a, _b;
+    const newAssertive = (_a = props.assertive) !== null && _a !== void 0 ? _a : EMPTY_MESSAGE;
+    const oldAssertive = React.useRef(EMPTY_MESSAGE);
+    const [activeAssertive1, setActiveAssertive1] = React.useState(EMPTY_MESSAGE);
+    const [activeAssertive2, setActiveAssertive2] = React.useState(EMPTY_MESSAGE);
+    const alternateAssertive = React.useRef(false);
+    useEffect(() => {
+        if (oldAssertive.current.message !== (newAssertive === null || newAssertive === void 0 ? void 0 : newAssertive.message) || oldAssertive.current.id !== (newAssertive === null || newAssertive === void 0 ? void 0 : newAssertive.id)) {
+            setActiveAssertive1(alternateAssertive.current ? EMPTY_MESSAGE : newAssertive);
+            setActiveAssertive2(alternateAssertive.current ? newAssertive : EMPTY_MESSAGE);
+            oldAssertive.current = newAssertive;
+            alternateAssertive.current = !alternateAssertive.current;
+        }
+    }, [newAssertive]);
+    const newPolite = (_b = props.polite) !== null && _b !== void 0 ? _b : EMPTY_MESSAGE;
+    const oldPolite = React.useRef(EMPTY_MESSAGE);
+    const [activePolite1, setActivePolite1] = React.useState(EMPTY_MESSAGE);
+    const [activePolite2, setActivePolite2] = React.useState(EMPTY_MESSAGE);
+    const alternatePolite = React.useRef(false);
+    useEffect(() => {
+        if (oldPolite.current.message !== (newPolite === null || newPolite === void 0 ? void 0 : newPolite.message) || oldPolite.current.id !== (newPolite === null || newPolite === void 0 ? void 0 : newPolite.id)) {
+            setActivePolite1(alternatePolite.current ? EMPTY_MESSAGE : newPolite);
+            setActivePolite2(alternatePolite.current ? newPolite : EMPTY_MESSAGE);
+            oldPolite.current = newPolite;
+            alternatePolite.current = !alternatePolite.current;
+        }
+    }, [newPolite]);
+    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 })));
+};
+export default Announcer;
+//# sourceMappingURL=Announcer.js.map

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

@@ -0,0 +1 @@
+{"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.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+/** @private */
+export declare type AnnouncerContextType = {
+    announceAssertive: (message: string, id: string) => void;
+    announcePolite: (message: string, id: string) => void;
+};
+/** @private */
+declare const AnnouncerContext: React.Context<AnnouncerContextType>;
+export default AnnouncerContext;
+//# sourceMappingURL=AnnouncerContext.d.ts.map

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

@@ -0,0 +1,14 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+/// Adapted from: https://github.com/AlmeroSteyn/react-aria-live/blob/master/src/modules/AnnouncerContext.js
+import React from 'react';
+/** @private */
+const AnnouncerContext = React.createContext({
+    announceAssertive: logContextWarning,
+    announcePolite: logContextWarning
+});
+function logContextWarning() {
+    console.warn('Announcement failed, LiveAnnouncer context is missing');
+}
+export default AnnouncerContext;
+//# sourceMappingURL=AnnouncerContext.js.map

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

@@ -0,0 +1 @@
+{"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.d.ts

@@ -0,0 +1,10 @@
+/** @private */
+declare const AnnouncerMessage: (props: {
+    message: string;
+    ariaLive: string;
+    clearOnUnmount?: boolean | undefined;
+    announceAssertive: (message: string, id: string) => void;
+    announcePolite: (message: string, id: string) => void;
+}) => null;
+export default AnnouncerMessage;
+//# sourceMappingURL=AnnouncerMessage.d.ts.map

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

@@ -0,0 +1,29 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+/// Adapted from: https://github.com/AlmeroSteyn/react-aria-live/blob/master/src/modules/AnnouncerMessage.js
+import { useCallback, useEffect } from 'react';
+import { v1 as createGUID } from 'uuid';
+/** @private */
+const AnnouncerMessage = (props) => {
+    const { message, ariaLive, clearOnUnmount, announceAssertive, announcePolite } = props;
+    const announce = useCallback(() => {
+        if (ariaLive === 'assertive') {
+            announceAssertive(message || '', createGUID());
+        }
+        if (ariaLive === 'polite') {
+            announcePolite(message || '', createGUID());
+        }
+    }, [announceAssertive, announcePolite, ariaLive, message]);
+    useEffect(() => {
+        announce();
+        return () => {
+            if (clearOnUnmount) {
+                announceAssertive('', createGUID());
+                announcePolite('', createGUID());
+            }
+        };
+    }, [message, clearOnUnmount, announce, announceAssertive, announcePolite]);
+    return null;
+};
+export default AnnouncerMessage;
+//# sourceMappingURL=AnnouncerMessage.js.map

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

@@ -0,0 +1 @@
+{"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.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+/** @private */
+declare const LiveAnnouncer: (props: {
+    children: React.ReactChild;
+}) => JSX.Element;
+export default LiveAnnouncer;
+//# sourceMappingURL=LiveAnnouncer.d.ts.map

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

@@ -0,0 +1,26 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+/// Adapted from: https://github.com/AlmeroSteyn/react-aria-live/blob/master/src/modules/LiveAnnouncer.js
+import React, { useCallback, useMemo } from 'react';
+import Announcer, { EMPTY_MESSAGE } from './Announcer';
+import AnnouncerContext from './AnnouncerContext';
+/** @private */
+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 });
+    }, []);
+    const announceAssertive = useCallback((message, id) => {
+        setAssertiveMessage({ message, id });
+    }, []);
+    const updateFunctions = useMemo(() => ({
+        announcePolite,
+        announceAssertive
+    }), [announceAssertive, announcePolite]);
+    return (React.createElement(AnnouncerContext.Provider, { value: updateFunctions },
+        props.children,
+        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

@@ -0,0 +1 @@
+{"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.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+/** @private */
+declare const LiveMessage: (props: {
+    message: string;
+    ariaLive: string;
+    clearOnUnmount?: boolean;
+}) => JSX.Element;
+export default LiveMessage;
+//# sourceMappingURL=LiveMessage.d.ts.map

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

@@ -0,0 +1,10 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+/// Adapted from: https://github.com/AlmeroSteyn/react-aria-live/blob/master/src/modules/LiveMessage.js
+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))));
+export default LiveMessage;
+//# sourceMappingURL=LiveMessage.js.map

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

@@ -0,0 +1 @@
+{"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.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+/** @private */
+declare const MessageBlock: (props: {
+    message: string;
+    ariaLive: 'assertive' | 'polite' | 'off' | undefined;
+}) => JSX.Element;
+export default MessageBlock;
+//# sourceMappingURL=MessageBlock.d.ts.map

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

@@ -0,0 +1,19 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+/// Adapted from: https://github.com/AlmeroSteyn/react-aria-live/blob/master/src/modules/MessageBlock.js
+import React from 'react';
+const offScreenStyle = {
+    border: 0,
+    clip: 'rect(0 0 0 0)',
+    height: '1px',
+    margin: '-1px',
+    overflow: 'hidden',
+    whiteSpace: 'nowrap',
+    padding: 0,
+    width: '1px',
+    position: 'absolute'
+};
+/** @private */
+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

@@ -0,0 +1 @@
+{"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/CameraButton.d.ts

@@ -50,6 +50,22 @@ export interface CameraButtonStrings {
      * Camera action turned off string for announcer
      */
     cameraActionTurnedOffAnnouncement?: string;
+    /**
+     * Primary action for when the camera is turned off
+     */
+    offSplitButtonPrimaryActionCamera?: string;
+    /**
+     * Primary action for when the camera is on
+     */
+    onSplitButtonPrimaryActionCamera?: string;
+    /**
+     * Title for primary action section of split button
+     */
+    cameraPrimaryActionSplitButtonTitle?: string;
+    /**
+     * Title for video effects menu item
+     */
+    videoEffectsMenuItemTitle?: string;
 }
 /**
  * Styles for {@link CameraButton}
@@ -114,6 +130,10 @@ export interface CameraButtonProps extends ControlBarButtonProps {
      * Styles for {@link CameraButton} and the device selection flyout.
      */
     styles?: Partial<CameraButtonStyles>;
+    /**
+     * Callback when a effects is clicked
+     */
+    onShowVideoEffectsPicker?: (showVideoEffectsOptions: boolean) => void;
 }
 /**
  * A button to turn camera on / off.

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

@@ -9,10 +9,11 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useState, useMemo } from 'react';
 import { useLocale } from '../localization';
 import { ControlBarButton } from './ControlBarButton';
 import { _HighContrastAwareIcon } from './HighContrastAwareIcon';
+import { ContextualMenuItemType } from '@fluentui/react';
 import { generateDefaultDeviceMenuProps } from './DevicesButton';
 import { Announcer } from './Announcer';
 const defaultLocalVideoViewOptions = {
@@ -58,10 +59,47 @@ export const CameraButton = (props) => {
             }
         }
     }), [cameraOn, localVideoViewOptions, onToggleCamera, toggleAnnouncerString]);
+    const splitButtonMenuItems = [
+        {
+            key: 'cameraPrimaryAction',
+            text: props.checked ? strings.onSplitButtonPrimaryActionCamera : strings.offSplitButtonPrimaryActionCamera,
+            onClick: () => {
+                onToggleClick();
+            },
+            iconProps: {
+                iconName: props.checked ? 'SplitButtonPrimaryActionCameraOn' : 'SplitButtonPrimaryActionCameraOff',
+                styles: { root: { lineHeight: 0 } }
+            }
+        }
+    ];
+    /* @conditional-compile-remove(video-background-effects) */
+    if (props.onShowVideoEffectsPicker) {
+        splitButtonMenuItems.push({
+            key: 'effects',
+            'data-ui-id': 'camera-split-button-video-effects',
+            text: strings.videoEffectsMenuItemTitle,
+            iconProps: { iconName: 'ControlButtonVideoEffectsOption', styles: { root: { lineHeight: 0 } } },
+            onClick: () => {
+                if (props.onShowVideoEffectsPicker) {
+                    props.onShowVideoEffectsPicker(true);
+                }
+            }
+        });
+    }
+    const splitButtonPrimaryAction = {
+        key: 'primaryAction',
+        title: 'toggle camera',
+        itemType: ContextualMenuItemType.Section,
+        sectionProps: {
+            topDivider: true,
+            items: splitButtonMenuItems
+        }
+    };
+    const splitButtonMenuProps = useMemo(() => (Object.assign(Object.assign({}, props.splitButtonMenuProps), { className: 'camera-split-button' })), [props.splitButtonMenuProps]);
     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)
-                : 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 }))));
+                ? 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":["../../../../../../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 } from 'react';\nimport { useLocale } from '../localization';\nimport { VideoStreamOptions } from '../types';\nimport { ControlBarButton, ControlBarButtonProps } from './ControlBarButton';\nimport { _HighContrastAwareIcon } from './HighContrastAwareIcon';\n\nimport { IContextualMenuItemStyles, IContextualMenuStyles } 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\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}\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  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({ ...props, styles: props.styles?.menuStyles }, strings)\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      />\n    </>\n  );\n};\n"]}
+{"version":3,"file":"CameraButton.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/CameraButton.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;;;;;;;;;;AAElC,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAC9D,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAE5C,OAAO,EAAE,gBAAgB,EAAyB,MAAM,oBAAoB,CAAC;AAC7E,OAAO,EAAE,sBAAsB,EAAE,MAAM,yBAAyB,CAAC;AAEjE,OAAO,EACL,sBAAsB,EAKvB,MAAM,iBAAiB,CAAC;AAEzB,OAAO,EAAiB,8BAA8B,EAAE,MAAM,iBAAiB,CAAC;AAChF,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAExC,MAAM,4BAA4B,GAAG;IACnC,WAAW,EAAE,MAAM;IACnB,UAAU,EAAE,IAAI;CACK,CAAC;AA2IxB;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,KAAwB,EAAe,EAAE;;IACpE,MAAM,EAAE,qBAAqB,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC;IACxD,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC1D,MAAM,aAAa,GAAG,SAAS,EAAE,CAAC,OAAO,CAAC,YAAY,CAAC;IACvD,MAAM,OAAO,mCAAQ,aAAa,GAAK,KAAK,CAAC,OAAO,CAAE,CAAC;IACvD,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAqB,SAAS,CAAC,CAAC;IAEtF,MAAM,QAAQ,GAAG,KAAK,CAAC,QAAQ,IAAI,aAAa,CAAC;IAEjD,MAAM,oBAAoB,GAAG,GAAgB,EAAE,CAAC,CAC9C,oBAAC,sBAAsB,IAAC,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAC,uBAAuB,GAAG,CAChF,CAAC;IACF,MAAM,qBAAqB,GAAG,GAAgB,EAAE,CAAC,CAC/C,oBAAC,sBAAsB,IAAC,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAC,wBAAwB,GAAG,CACjF,CAAC;IACF,IAAI,aAAa,IAAI,OAAO,CAAC,0BAA0B,EAAE;QACvD,OAAO,CAAC,sBAAsB,GAAG,OAAO,CAAC,0BAA0B,CAAC;KACrE;IAED,MAAM,QAAQ,GAAG,KAAK,CAAC,OAAO,CAAC;IAC/B,MAAM,qBAAqB,GAAG,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,sBAAsB,CAAC,CAAC,CAAC,OAAO,CAAC,uBAAuB,CAAC;IAE1G,MAAM,qBAAqB,GAAG,WAAW,CACvC,CAAC,UAAmB,EAAE,EAAE;QACtB,kBAAkB,CAChB,CAAC,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,iCAAiC,CAAC,CAAC,CAAC,OAAO,CAAC,gCAAgC,CACnG,CAAC;IACJ,CAAC,EACD,CAAC,OAAO,CAAC,iCAAiC,EAAE,OAAO,CAAC,gCAAgC,CAAC,CACtF,CAAC;IAEF,MAAM,aAAa,GAAG,WAAW,CAAC,GAAS,EAAE;QAC3C,kFAAkF;QAClF,IAAI,cAAc,EAAE;YAClB,gBAAgB,CAAC,IAAI,CAAC,CAAC;YACvB,IAAI;gBACF,MAAM,cAAc,CAAC,qBAAqB,aAArB,qBAAqB,cAArB,qBAAqB,GAAI,4BAA4B,CAAC,CAAC;gBAC5E,uGAAuG;gBACvG,qBAAqB,CAAC,CAAC,QAAQ,CAAC,CAAC;aAClC;oBAAS;gBACR,gBAAgB,CAAC,KAAK,CAAC,CAAC;aACzB;SACF;IACH,CAAC,CAAA,EAAE,CAAC,QAAQ,EAAE,qBAAqB,EAAE,cAAc,EAAE,qBAAqB,CAAC,CAAC,CAAC;IAE7E,MAAM,oBAAoB,GAA0B;QAClD;YACE,GAAG,EAAE,qBAAqB;YAC1B,IAAI,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,gCAAgC,CAAC,CAAC,CAAC,OAAO,CAAC,iCAAiC;YAC1G,OAAO,EAAE,GAAG,EAAE;gBACZ,aAAa,EAAE,CAAC;YAClB,CAAC;YACD,SAAS,EAAE;gBACT,QAAQ,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,kCAAkC,CAAC,CAAC,CAAC,mCAAmC;gBAClG,MAAM,EAAE,EAAE,IAAI,EAAE,EAAE,UAAU,EAAE,CAAC,EAAE,EAAE;aACpC;SACF;KACF,CAAC;IACF,2DAA2D;IAC3D,IAAI,KAAK,CAAC,wBAAwB,EAAE;QAClC,oBAAoB,CAAC,IAAI,CAAC;YACxB,GAAG,EAAE,SAAS;YACd,YAAY,EAAE,mCAAmC;YACjD,IAAI,EAAE,OAAO,CAAC,yBAAyB;YACvC,SAAS,EAAE,EAAE,QAAQ,EAAE,iCAAiC,EAAE,MAAM,EAAE,EAAE,IAAI,EAAE,EAAE,UAAU,EAAE,CAAC,EAAE,EAAE,EAAE;YAC/F,OAAO,EAAE,GAAG,EAAE;gBACZ,IAAI,KAAK,CAAC,wBAAwB,EAAE;oBAClC,KAAK,CAAC,wBAAwB,CAAC,IAAI,CAAC,CAAC;iBACtC;YACH,CAAC;SACF,CAAC,CAAC;KACJ;IAED,MAAM,wBAAwB,GAAwB;QACpD,GAAG,EAAE,eAAe;QACpB,KAAK,EAAE,eAAe;QACtB,QAAQ,EAAE,sBAAsB,CAAC,OAAO;QACxC,YAAY,EAAE;YACZ,UAAU,EAAE,IAAI;YAChB,KAAK,EAAE,oBAAoB;SAC5B;KACF,CAAC;IAEF,MAAM,oBAAoB,GAAiB,OAAO,CAChD,GAAG,EAAE,CAAC,iCACD,KAAK,CAAC,oBAAoB,KAC7B,SAAS,EAAE,qBAAqB,IAChC,EACF,CAAC,KAAK,CAAC,oBAAoB,CAAC,CAC7B,CAAC;IAEF,OAAO,CACL;QACE,oBAAC,SAAS,IAAC,kBAAkB,EAAE,eAAe,EAAE,QAAQ,EAAE,QAAQ,GAAI;QACtE,oBAAC,gBAAgB,oBACX,KAAK,IACT,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,cAAc,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,EACvD,cAAc,EAAE,MAAA,KAAK,CAAC,cAAc,mCAAI,oBAAoB,EAC5D,eAAe,EAAE,MAAA,KAAK,CAAC,eAAe,mCAAI,qBAAqB,EAC/D,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,MAAA,KAAK,CAAC,QAAQ,mCAAI,mBAAmB,EAC/C,SAAS,EACP,MAAA,KAAK,CAAC,SAAS,mCACf,CAAC,KAAK,CAAC,yBAAyB;gBAC9B,CAAC,CAAC,8BAA8B,iCACvB,KAAK,KAAE,MAAM,EAAE,MAAA,KAAK,CAAC,MAAM,0CAAE,UAAU,KAC5C,OAAO,EACP,wBAAwB,CACzB;gBACH,CAAC,CAAC,SAAS,CAAC,EAEhB,aAAa,EAAE,CAAA,MAAA,KAAK,CAAC,aAAa,mCAAI,CAAC,KAAK,CAAC,yBAAyB,EAAC,CAAC,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,SAAS,EACrG,KAAK,EAAE,MAAA,KAAK,CAAC,KAAK,mCAAI,KAAK,CAAC,yBAAyB,0BAC/B,KAAK,CAAC,yBAAyB,CAAC,CAAC,CAAC,OAAO,CAAC,gCAAgC,CAAC,CAAC,CAAC,SAAS,EAC5G,oBAAoB,EAAE,KAAK,CAAC,yBAAyB,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,SAAS,EACzF,oBAAoB,EAAE,oBAAoB,IAC1C,CACD,CACJ,CAAC;AACJ,CAAC,CAAC","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    {\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  /* @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  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.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+import { OnRenderAvatarCallback } from '../types';
+import { _CaptionsInfo } from './CaptionsBanner';
+/**
+ * @internal
+ * Props for a single line of caption.
+ */
+export interface _CaptionProps extends _CaptionsInfo {
+    /**
+     * Optional callback to override render of the avatar.
+     *
+     * @param userId - user Id
+     */
+    onRenderAvatar?: OnRenderAvatarCallback;
+}
+/**
+ * @internal
+ * A component for displaying a single line of caption
+ */
+export declare const _Caption: (props: _CaptionProps) => JSX.Element;
+//# sourceMappingURL=Caption.d.ts.map

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

@@ -0,0 +1,32 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+import { Persona, Stack, PersonaSize, Text } from '@fluentui/react';
+import React from 'react';
+import { captionClassName, captionsContentContainerClassName, displayNameClassName, displayNameContainerClassName, iconClassName } from './styles/Captions.style';
+/**
+ * @internal
+ * A component for displaying a single line of caption
+ */
+export const _Caption = (props) => {
+    const { displayName, userId, captionText, onRenderAvatar } = props;
+    const personaOptions = {
+        hidePersonaDetails: true,
+        size: PersonaSize.size32,
+        text: displayName,
+        showOverflowTooltip: false,
+        initialsTextColor: 'white',
+        styles: {
+            root: {
+                margin: '0.25rem'
+            }
+        }
+    };
+    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" },
+        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))));
+};
+//# sourceMappingURL=Caption.js.map

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

@@ -0,0 +1 @@
+{"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.d.ts

@@ -0,0 +1,41 @@
+/// <reference types="react" />
+import { OnRenderAvatarCallback } from '../types';
+/**
+ * @internal
+ * information required for each line of caption
+ */
+export declare type _CaptionsInfo = {
+    id: string;
+    displayName: string;
+    captionText: string;
+    userId?: string;
+};
+/**
+ * @internal
+ * strings for captions banneer
+ */
+export interface _CaptionsBannerStrings {
+    captionsBannerSpinnerText?: string;
+}
+/**
+ * @internal
+ * _CaptionsBanner Component Props.
+ */
+export interface _CaptionsBannerProps {
+    captions: _CaptionsInfo[];
+    isCaptionsOn?: boolean;
+    startCaptionsInProgress?: boolean;
+    /**
+     * Optional callback to override render of the avatar.
+     *
+     * @param userId - user Id
+     */
+    onRenderAvatar?: OnRenderAvatarCallback;
+    strings?: _CaptionsBannerStrings;
+}
+/**
+ * @internal
+ * A component for displaying a CaptionsBanner with user icon, displayName and captions text.
+ */
+export declare const _CaptionsBanner: (props: _CaptionsBannerProps) => JSX.Element;
+//# sourceMappingURL=CaptionsBanner.d.ts.map