@azure/communication-react 1.0.0-beta.5 → 1.0.0

package/dist/dist-esm/react-components/src/components/ChatMessage/ChatMessageComponentAsMessageBubble.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import { ComponentSlotStyle } from '@fluentui/react-northstar';
+import { ChatMessage } from '../../types/ChatMessage';
+import { MessageThreadStrings } from '../MessageThread';
+declare type ChatMessageComponentAsMessageBubbleProps = {
+    message: ChatMessage;
+    messageContainerStyle?: ComponentSlotStyle;
+    showDate?: boolean;
+    disableEditing?: boolean;
+    onEditClick: () => void;
+    onRemoveClick?: () => void;
+    strings: MessageThreadStrings;
+};
+/** @private */
+export declare const ChatMessageComponentAsMessageBubble: (props: ChatMessageComponentAsMessageBubbleProps) => JSX.Element;
+export {};
+//# sourceMappingURL=ChatMessageComponentAsMessageBubble.d.ts.map

package/dist/dist-esm/react-components/src/components/ChatMessage/ChatMessageComponentAsMessageBubble.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatMessageComponentAsMessageBubble.d.ts","sourceRoot":"","sources":["../../../../../../../react-components/src/components/ChatMessage/ChatMessageComponentAsMessageBubble.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAc,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAS3E,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AACtD,OAAO,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAGxD,aAAK,wCAAwC,GAAG;IAC9C,OAAO,EAAE,WAAW,CAAC;IACrB,qBAAqB,CAAC,EAAE,kBAAkB,CAAC;IAC3C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,OAAO,EAAE,oBAAoB,CAAC;CAC/B,CAAC;AAEF,eAAe;AACf,eAAO,MAAM,mCAAmC,UAAW,wCAAwC,KAAG,WAoFrG,CAAC"}

package/dist/dist-esm/react-components/src/components/ChatMessage/ChatMessageComponentAsMessageBubble.js

@@ -0,0 +1,55 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+import { mergeStyles } from '@fluentui/react';
+import { Chat, Text } from '@fluentui/react-northstar';
+import React, { useCallback, useRef, useState } from 'react';
+import { chatMessageEditedTagStyle, chatMessageDateStyle } from '../styles/ChatMessageComponent.styles';
+import { formatTimeForChatMessage, formatTimestampForChatMessage } from '../utils/Datetime';
+import { useIdentifiers } from '../../identifiers/IdentifierProvider';
+import { useTheme } from '../../theming';
+import { ChatMessageActionFlyout } from './ChatMessageActionsFlyout';
+import { ChatMessageContent } from './ChatMessageContent';
+import { chatMessageActionMenuProps } from './ChatMessageActionMenu';
+/** @private */
+export const ChatMessageComponentAsMessageBubble = (props) => {
+    const ids = useIdentifiers();
+    const theme = useTheme();
+    const { message, onRemoveClick, disableEditing, showDate, messageContainerStyle, strings, onEditClick } = props;
+    // Track if the action menu was opened by touch - if so we increase the touch targets for the items
+    const [wasInteractionByTouch, setWasInteractionByTouch] = useState(false);
+    // The chat message action flyout should target the Chat.Message action menu if clicked,
+    // or target the chat message if opened via touch press.
+    // Undefined indicates the flyout menu should not be being shown.
+    const messageRef = useRef(null);
+    const messageActionButtonRef = useRef(null);
+    const [chatMessageActionFlyoutTarget, setChatMessageActionFlyoutTarget] = useState(undefined);
+    const chatActionsEnabled = !disableEditing && message.status !== 'sending' && !!message.mine;
+    const actionMenuProps = wasInteractionByTouch
+        ? undefined
+        : chatMessageActionMenuProps({
+            enabled: chatActionsEnabled,
+            menuButtonRef: messageActionButtonRef,
+            // Force show the action button while the flyout is open (otherwise this will dismiss when the pointer is hovered over the flyout)
+            forceShow: chatMessageActionFlyoutTarget === messageActionButtonRef,
+            onActionButtonClick: () => {
+                // Open chat action flyout, and set the context menu to target the chat message action button
+                setChatMessageActionFlyoutTarget(messageActionButtonRef);
+            },
+            theme
+        });
+    const onActionFlyoutDismiss = useCallback(() => {
+        // When the flyout dismiss is called, since we control if the action flyout is visible
+        // or not we need to set the target to undefined here to actually hide the action flyout
+        setChatMessageActionFlyoutTarget(undefined);
+    }, [setChatMessageActionFlyoutTarget]);
+    const chatMessage = (React.createElement(React.Fragment, null,
+        React.createElement("div", { ref: messageRef },
+            React.createElement(Chat.Message, { className: mergeStyles(messageContainerStyle), styles: messageContainerStyle, content: React.createElement(ChatMessageContent, { message: message, liveAuthorIntro: strings.liveAuthorIntro }), author: React.createElement(Text, { className: chatMessageDateStyle }, message.senderDisplayName), mine: message.mine, timestamp: React.createElement(Text, { "data-ui-id": ids.messageTimestamp }, message.createdOn
+                    ? showDate
+                        ? formatTimestampForChatMessage(message.createdOn, new Date(), strings)
+                        : formatTimeForChatMessage(message.createdOn)
+                    : undefined), details: message.editedOn ? React.createElement("div", { className: chatMessageEditedTagStyle(theme) }, strings.editedTag) : undefined, positionActionMenu: false, actionMenu: actionMenuProps, onTouchStart: () => setWasInteractionByTouch(true), onPointerDown: () => setWasInteractionByTouch(false), onKeyDown: () => setWasInteractionByTouch(false), onClick: () => wasInteractionByTouch && setChatMessageActionFlyoutTarget(messageRef) })),
+        chatActionsEnabled && (React.createElement(ChatMessageActionFlyout, { hidden: !chatMessageActionFlyoutTarget, target: chatMessageActionFlyoutTarget, increaseFlyoutItemSize: wasInteractionByTouch, onDismiss: onActionFlyoutDismiss, onEditClick: onEditClick, onRemoveClick: onRemoveClick, strings: strings }))));
+    return chatMessage;
+};
+//# sourceMappingURL=ChatMessageComponentAsMessageBubble.js.map

package/dist/dist-esm/react-components/src/components/ChatMessage/ChatMessageComponentAsMessageBubble.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatMessageComponentAsMessageBubble.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/ChatMessage/ChatMessageComponentAsMessageBubble.tsx"],"names":[],"mappings":"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"}

package/dist/dist-esm/react-components/src/components/ChatMessage/ChatMessageContent.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { ChatMessage } from '../../types/ChatMessage';
+/** @private */
+export declare const ChatMessageContent: (props: {
+    message: ChatMessage;
+    liveAuthorIntro: string;
+}) => JSX.Element;
+//# sourceMappingURL=ChatMessageContent.d.ts.map

package/dist/dist-esm/react-components/src/components/ChatMessage/ChatMessageContent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatMessageContent.d.ts","sourceRoot":"","sources":["../../../../../../../react-components/src/components/ChatMessage/ChatMessageContent.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAItD,eAAe;AACf,eAAO,MAAM,kBAAkB,UAAW;IAAE,OAAO,EAAE,WAAW,CAAC;IAAC,eAAe,EAAE,MAAM,CAAA;CAAE,KAAG,WAY7F,CAAC"}

package/dist/dist-esm/react-components/src/components/ChatMessage/ChatMessageContent.js

@@ -0,0 +1,44 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+import React from 'react';
+import { _formatString } from "../../../../acs-ui-common/src";
+import { Parser } from 'html-to-react';
+import Linkify from 'react-linkify';
+import { LiveMessage } from 'react-aria-live';
+import { Link } from '@fluentui/react';
+/** @private */
+export const ChatMessageContent = (props) => {
+    switch (props.message.contentType) {
+        case 'text':
+            return MessageContentAsText(props.message, props.liveAuthorIntro);
+        case 'html':
+            return MessageContentAsRichTextHTML(props.message, props.liveAuthorIntro);
+        case 'richtext/html':
+            return MessageContentAsRichTextHTML(props.message, props.liveAuthorIntro);
+        default:
+            console.warn('unknown message content type');
+            return React.createElement(React.Fragment, null);
+    }
+};
+const MessageContentAsRichTextHTML = (message, liveAuthorIntro) => {
+    const htmlToReactParser = new Parser();
+    const liveAuthor = _formatString(liveAuthorIntro, { author: `${message.senderDisplayName}` });
+    return (React.createElement("div", { "data-ui-status": message.status },
+        React.createElement(LiveMessage, { message: `${message.mine ? '' : liveAuthor} ${extractContent(message.content || '')}`, "aria-live": "polite" }),
+        htmlToReactParser.parse(message.content)));
+};
+const MessageContentAsText = (message, liveAuthorIntro) => {
+    const liveAuthor = _formatString(liveAuthorIntro, { author: `${message.senderDisplayName}` });
+    return (React.createElement("div", { "data-ui-status": message.status },
+        React.createElement(LiveMessage, { message: `${message.mine ? '' : liveAuthor} ${message.content}`, "aria-live": "polite" }),
+        React.createElement(Linkify, { componentDecorator: (decoratedHref, decoratedText, key) => {
+                return (React.createElement(Link, { target: "_blank", href: decoratedHref, key: key }, decoratedText));
+            } }, message.content)));
+};
+// https://stackoverflow.com/questions/28899298/extract-the-text-out-of-html-string-using-javascript
+const extractContent = (s) => {
+    const span = document.createElement('span');
+    span.innerHTML = s;
+    return span.textContent || span.innerText;
+};
+//# sourceMappingURL=ChatMessageContent.js.map

package/dist/dist-esm/react-components/src/components/ChatMessage/ChatMessageContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatMessageContent.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/ChatMessage/ChatMessageContent.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,aAAa,EAAE,sCAAgC;AACxD,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AACvC,OAAO,OAAO,MAAM,eAAe,CAAC;AAEpC,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAEvC,eAAe;AACf,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,KAAwD,EAAe,EAAE;IAC1G,QAAQ,KAAK,CAAC,OAAO,CAAC,WAAW,EAAE;QACjC,KAAK,MAAM;YACT,OAAO,oBAAoB,CAAC,KAAK,CAAC,OAAO,EAAE,KAAK,CAAC,eAAe,CAAC,CAAC;QACpE,KAAK,MAAM;YACT,OAAO,4BAA4B,CAAC,KAAK,CAAC,OAAO,EAAE,KAAK,CAAC,eAAe,CAAC,CAAC;QAC5E,KAAK,eAAe;YAClB,OAAO,4BAA4B,CAAC,KAAK,CAAC,OAAO,EAAE,KAAK,CAAC,eAAe,CAAC,CAAC;QAC5E;YACE,OAAO,CAAC,IAAI,CAAC,8BAA8B,CAAC,CAAC;YAC7C,OAAO,yCAAK,CAAC;KAChB;AACH,CAAC,CAAC;AAEF,MAAM,4BAA4B,GAAG,CAAC,OAAoB,EAAE,eAAuB,EAAe,EAAE;IAClG,MAAM,iBAAiB,GAAG,IAAI,MAAM,EAAE,CAAC;IACvC,MAAM,UAAU,GAAG,aAAa,CAAC,eAAe,EAAE,EAAE,MAAM,EAAE,GAAG,OAAO,CAAC,iBAAiB,EAAE,EAAE,CAAC,CAAC;IAC9F,OAAO,CACL,+CAAqB,OAAO,CAAC,MAAM;QACjC,oBAAC,WAAW,IACV,OAAO,EAAE,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU,IAAI,cAAc,CAAC,OAAO,CAAC,OAAO,IAAI,EAAE,CAAC,EAAE,eAC3E,QAAQ,GAClB;QACD,iBAAiB,CAAC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,CACrC,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,oBAAoB,GAAG,CAAC,OAAoB,EAAE,eAAuB,EAAe,EAAE;IAC1F,MAAM,UAAU,GAAG,aAAa,CAAC,eAAe,EAAE,EAAE,MAAM,EAAE,GAAG,OAAO,CAAC,iBAAiB,EAAE,EAAE,CAAC,CAAC;IAC9F,OAAO,CACL,+CAAqB,OAAO,CAAC,MAAM;QACjC,oBAAC,WAAW,IAAC,OAAO,EAAE,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU,IAAI,OAAO,CAAC,OAAO,EAAE,eAAY,QAAQ,GAAG;QACnG,oBAAC,OAAO,IACN,kBAAkB,EAAE,CAAC,aAAqB,EAAE,aAAqB,EAAE,GAAW,EAAE,EAAE;gBAChF,OAAO,CACL,oBAAC,IAAI,IAAC,MAAM,EAAC,QAAQ,EAAC,IAAI,EAAE,aAAa,EAAE,GAAG,EAAE,GAAG,IAChD,aAAa,CACT,CACR,CAAC;YACJ,CAAC,IAEA,OAAO,CAAC,OAAO,CACR,CACN,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,oGAAoG;AACpG,MAAM,cAAc,GAAG,CAAC,CAAS,EAAU,EAAE;IAC3C,MAAM,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;IAC5C,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC;IACnB,OAAO,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,SAAS,CAAC;AAC5C,CAAC,CAAC"}

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

@@ -1,8 +1,15 @@
 import React from 'react';
-import { BaseCustomStylesProps } from '../types';
-export declare type ControlBarLayoutType = 'horizontal' | 'vertical' | 'dockedTop' | 'dockedBottom' | 'dockedLeft' | 'dockedRight' | 'floatingTop' | 'floatingBottom' | 'floatingLeft' | 'floatingRight';
+import { BaseCustomStyles } from '../types';
 /**
- * Props for ControlBar component.
+ * Present layouts for the {@link ControlBar}.
+ *
+ * @public
+ */
+export declare type ControlBarLayout = 'horizontal' | 'vertical' | 'dockedTop' | 'dockedBottom' | 'dockedLeft' | 'dockedRight' | 'floatingTop' | 'floatingBottom' | 'floatingLeft' | 'floatingRight';
+/**
+ * Props for {@link ControlBar}.
+ *
+ * @public
  */
 export interface ControlBarProps {
     /** React Child components. */
@@ -14,7 +21,7 @@ export interface ControlBarProps {
      * <ControlBar styles={{ root: { background: 'blue' } }} />
      * ```
      */
-    styles?: BaseCustomStylesProps;
+    styles?: BaseCustomStyles;
     /**
      * Changes the layout of the control bar.
      * Available layouts are `horizontal`, `vertical`, `dockedTop`, `dockedBottom`,
@@ -22,13 +29,15 @@ export interface ControlBarProps {
      * `floatingRight`
      * Defaults to a `horizontal` layout.
      */
-    layout?: ControlBarLayoutType;
+    layout?: ControlBarLayout;
 }
 /**
- * `ControlBar` allows you to easily create a component for call controls using
- * [Button](https://developer.microsoft.com/en-us/fluentui#/controls/web/button) component from
- * Fluent UI. Users will need to provide methods to Button components used inside `ControlBar`
- * for altering call behavior.
+ * A container for various buttons for call controls.
+ *
+ * Use with various call control buttons in this library, e.g., {@link CameraButton}, or your own instances of
+ * {@link ControlBarButton} directly.
+ *
+ * @public
  */
 export declare const ControlBar: (props: ControlBarProps) => JSX.Element;
 //# sourceMappingURL=ControlBar.d.ts.map

package/dist/dist-esm/react-components/src/components/ControlBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ControlBar.d.ts","sourceRoot":"","sources":["../../../../../../react-components/src/components/ControlBar.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAkB,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,qBAAqB,EAAE,MAAM,UAAU,CAAC;AAOjD,oBAAY,oBAAoB,GAC5B,YAAY,GACZ,UAAU,GACV,WAAW,GACX,cAAc,GACd,YAAY,GACZ,aAAa,GACb,aAAa,GACb,gBAAgB,GAChB,cAAc,GACd,eAAe,CAAC;AAEpB;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B,8BAA8B;IAC9B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,qBAAqB,CAAC;IAC/B;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,oBAAoB,CAAC;CAC/B;AAED;;;;;GAKG;AACH,eAAO,MAAM,UAAU,UAAW,eAAe,KAAG,WAqBnD,CAAC"}
+{"version":3,"file":"ControlBar.d.ts","sourceRoot":"","sources":["../../../../../../react-components/src/components/ControlBar.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAkB,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAO5C;;;;GAIG;AACH,oBAAY,gBAAgB,GACxB,YAAY,GACZ,UAAU,GACV,WAAW,GACX,cAAc,GACd,YAAY,GACZ,aAAa,GACb,aAAa,GACb,gBAAgB,GAChB,cAAc,GACd,eAAe,CAAC;AAEpB;;;;GAIG;AACH,MAAM,WAAW,eAAe;IAC9B,8BAA8B;IAC9B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAC1B;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,gBAAgB,CAAC;CAC3B;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,UAAU,UAAW,eAAe,KAAG,WA2BnD,CAAC"}

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

@@ -7,10 +7,12 @@ import { useTheme } from '../theming';
 import { isDarkThemed } from '../theming/themeUtils';
 const mainDivStyle = { position: 'relative', height: '100%', width: '100%' };
 /**
- * `ControlBar` allows you to easily create a component for call controls using
- * [Button](https://developer.microsoft.com/en-us/fluentui#/controls/web/button) component from
- * Fluent UI. Users will need to provide methods to Button components used inside `ControlBar`
- * for altering call behavior.
+ * A container for various buttons for call controls.
+ *
+ * Use with various call control buttons in this library, e.g., {@link CameraButton}, or your own instances of
+ * {@link ControlBarButton} directly.
+ *
+ * @public
  */
 export const ControlBar = (props) => {
     const { styles, layout } = props;
@@ -21,10 +23,16 @@ export const ControlBar = (props) => {
         const backgroundStyle = {
             background: isDarkThemed(theme) && (layout === null || layout === void 0 ? void 0 : layout.startsWith('floating')) ? theme.palette.neutralQuaternaryAlt : theme.palette.white
         };
+        const borderAndBoxShadowStyle = (layout === null || layout === void 0 ? void 0 : layout.startsWith('floating'))
+            ? {
+                boxShadow: theme.effects.elevation16,
+                borderRadius: theme.effects.roundedCorner6
+            }
+            : {};
         // if rtl is true and layout is either floatingTop or floatingBottom then we need to override the transform-style property
         // to translate 50% to right instead of the left
         const transformOverrideStyle = theme.rtl && (layout === 'floatingTop' || layout === 'floatingBottom') ? { transform: 'translateX(50%)' } : {};
-        return mergeStyles(controlBarStyle, backgroundStyle, transformOverrideStyle, styles === null || styles === void 0 ? void 0 : styles.root);
+        return mergeStyles(controlBarStyle, backgroundStyle, borderAndBoxShadowStyle, transformOverrideStyle, styles === null || styles === void 0 ? void 0 : styles.root);
     }, [layout, styles === null || styles === void 0 ? void 0 : styles.root, theme]);
     return (React.createElement("div", { className: mergeStyles(mainDivStyle) },
         React.createElement(Stack, { className: controlBarClassName }, props.children)));

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

@@ -1 +1 @@
-{"version":3,"file":"ControlBar.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/ControlBar.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAU,WAAW,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAC7D,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAC9D,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAErD,MAAM,YAAY,GAAW,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC;AAsCrF;;;;;GAKG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,KAAsB,EAAe,EAAE;IAChE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC;IACjC,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,mBAAmB,GAAG,OAAO,CAAC,GAAG,EAAE;QACvC,MAAM,eAAe,GAAG,gBAAgB,CAAC,MAAM,aAAN,MAAM,cAAN,MAAM,GAAI,YAAY,CAAC,CAAC;QACjE,2HAA2H;QAC3H,MAAM,eAAe,GAAG;YACtB,UAAU,EACR,YAAY,CAAC,KAAK,CAAC,KAAI,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,UAAU,CAAC,UAAU,CAAC,CAAA,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,oBAAoB,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK;SACnH,CAAC;QACF,0HAA0H;QAC1H,gDAAgD;QAChD,MAAM,sBAAsB,GAC1B,KAAK,CAAC,GAAG,IAAI,CAAC,MAAM,KAAK,aAAa,IAAI,MAAM,KAAK,gBAAgB,CAAC,CAAC,CAAC,CAAC,EAAE,SAAS,EAAE,iBAAiB,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;QACjH,OAAO,WAAW,CAAC,eAAe,EAAE,eAAe,EAAE,sBAAsB,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,CAAC,CAAC;IAC7F,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC;IAClC,OAAO,CACL,6BAAK,SAAS,EAAE,WAAW,CAAC,YAAY,CAAC;QACvC,oBAAC,KAAK,IAAC,SAAS,EAAE,mBAAmB,IAAG,KAAK,CAAC,QAAQ,CAAS,CAC3D,CACP,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"ControlBar.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/ControlBar.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAU,WAAW,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAC7D,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAC9D,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAErD,MAAM,YAAY,GAAW,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC;AA6CrF;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,KAAsB,EAAe,EAAE;IAChE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC;IACjC,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,mBAAmB,GAAG,OAAO,CAAC,GAAG,EAAE;QACvC,MAAM,eAAe,GAAG,gBAAgB,CAAC,MAAM,aAAN,MAAM,cAAN,MAAM,GAAI,YAAY,CAAC,CAAC;QACjE,2HAA2H;QAC3H,MAAM,eAAe,GAAG;YACtB,UAAU,EACR,YAAY,CAAC,KAAK,CAAC,KAAI,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,UAAU,CAAC,UAAU,CAAC,CAAA,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,oBAAoB,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK;SACnH,CAAC;QACF,MAAM,uBAAuB,GAAG,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,UAAU,CAAC,UAAU,CAAC;YAC5D,CAAC,CAAC;gBACE,SAAS,EAAE,KAAK,CAAC,OAAO,CAAC,WAAW;gBACpC,YAAY,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc;aAC3C;YACH,CAAC,CAAC,EAAE,CAAC;QACP,0HAA0H;QAC1H,gDAAgD;QAChD,MAAM,sBAAsB,GAC1B,KAAK,CAAC,GAAG,IAAI,CAAC,MAAM,KAAK,aAAa,IAAI,MAAM,KAAK,gBAAgB,CAAC,CAAC,CAAC,CAAC,EAAE,SAAS,EAAE,iBAAiB,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;QACjH,OAAO,WAAW,CAAC,eAAe,EAAE,eAAe,EAAE,uBAAuB,EAAE,sBAAsB,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,CAAC,CAAC;IACtH,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC;IAClC,OAAO,CACL,6BAAK,SAAS,EAAE,WAAW,CAAC,YAAY,CAAC;QACvC,oBAAC,KAAK,IAAC,SAAS,EAAE,mBAAmB,IAAG,KAAK,CAAC,QAAQ,CAAS,CAC3D,CACP,CAAC;AACJ,CAAC,CAAC"}

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

@@ -1,7 +1,9 @@
 /// <reference types="react" />
-import { IButtonProps, IRenderFunction } from '@fluentui/react';
+import { IButtonProps, IRenderFunction, IButtonStyles } from '@fluentui/react';
 /**
- * Strings of ControlBarButton that can be overridden
+ * Strings of {@link ControlBarButton} that can be overridden.
+ *
+ * @public
  */
 export interface ControlBarButtonStrings {
     /**
@@ -16,9 +18,33 @@ export interface ControlBarButtonStrings {
      * Label of the button shown when the button is not checked.
      */
     offLabel?: string;
+    /**
+     * Tooltip content of the button. This supersedes tooltipDisabledContent, tooltipOnContent and tooltipOffContent if used.
+     */
+    tooltipContent?: string;
+    /**
+     * Tooltip content when the button is disabled.
+     */
+    tooltipDisabledContent?: string;
+    /**
+     * Tooltip content when the button is in the checked state.
+     */
+    tooltipOnContent?: string;
+    /**
+     * Tooltip content when the button is in the unchecked state.
+     */
+    tooltipOffContent?: string;
 }
 /**
- * Props for ControlBarButton component
+ * Styles for all {@link ControlBarButton} implementations.
+ *
+ * @public
+ */
+export declare type ControlBarButtonStyles = IButtonStyles;
+/**
+ * Props for {@link ControlBarButton}.
+ *
+ * @public
  */
 export interface ControlBarButtonProps extends IButtonProps {
     /**
@@ -31,6 +57,12 @@ export interface ControlBarButtonProps extends IButtonProps {
      * Key to use for the Label component
      */
     labelKey?: string;
+    /**
+     * Id to use for the tooltip host.
+     *
+     * @defaultValue This uses the labelKey and appends -tooltip by default
+     */
+    tooltipId?: string;
     /**
      * Optional strings to override in component.
      */
@@ -43,9 +75,17 @@ export interface ControlBarButtonProps extends IButtonProps {
      * Icon to render when the button is not checked.
      */
     onRenderOffIcon?: IRenderFunction<IButtonProps>;
+    /**
+     * Fluent styles, including extensions common to all {@link ControlBarButton}s.
+     */
+    styles?: ControlBarButtonStyles;
 }
 /**
- * Default button styled for the Control Bar. This can be used to create custom buttons that are styled the same as other buttons provided by the UI Library.
+ * Default button styled for the {@link ControlBar}.
+ *
+ * Use this component create custom buttons that are styled the same as other buttons provided by the UI Library.
+ *
+ * @public
  */
 export declare const ControlBarButton: (props: ControlBarButtonProps) => JSX.Element;
 //# sourceMappingURL=ControlBarButton.d.ts.map

package/dist/dist-esm/react-components/src/components/ControlBarButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ControlBarButton.d.ts","sourceRoot":"","sources":["../../../../../../react-components/src/components/ControlBarButton.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAiB,YAAY,EAAE,eAAe,EAAuC,MAAM,iBAAiB,CAAC;AAGpH;;GAEG;AACH,MAAM,WAAW,uBAAuB;IACtC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED;;GAEG;AACH,MAAM,WAAW,qBAAsB,SAAQ,YAAY;IACzD;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;OAEG;IACH,OAAO,CAAC,EAAE,uBAAuB,CAAC;IAElC;;OAEG;IACH,cAAc,CAAC,EAAE,eAAe,CAAC,YAAY,CAAC,CAAC;IAE/C;;OAEG;IACH,eAAe,CAAC,EAAE,eAAe,CAAC,YAAY,CAAC,CAAC;CACjD;AAsBD;;GAEG;AACH,eAAO,MAAM,gBAAgB,UAAW,qBAAqB,KAAG,WAU/D,CAAC"}
+{"version":3,"file":"ControlBarButton.d.ts","sourceRoot":"","sources":["../../../../../../react-components/src/components/ControlBarButton.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAiB,YAAY,EAAE,eAAe,EAAmB,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAI/G;;;;GAIG;AACH,MAAM,WAAW,uBAAuB;IACtC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED;;;;GAIG;AACH,oBAAY,sBAAsB,GAAG,aAAa,CAAC;AAEnD;;;;GAIG;AACH,MAAM,WAAW,qBAAsB,SAAQ,YAAY;IACzD;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,OAAO,CAAC,EAAE,uBAAuB,CAAC;IAElC;;OAEG;IACH,cAAc,CAAC,EAAE,eAAe,CAAC,YAAY,CAAC,CAAC;IAE/C;;OAEG;IACH,eAAe,CAAC,EAAE,eAAe,CAAC,YAAY,CAAC,CAAC;IAEhD;;OAEG;IACH,MAAM,CAAC,EAAE,sBAAsB,CAAC;CACjC;AAYD;;;;;;GAMG;AACH,eAAO,MAAM,gBAAgB,UAAW,qBAAqB,KAAG,WA6B/D,CAAC"}

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

@@ -1,13 +1,9 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 import React from 'react';
-import { DefaultButton, Label, concatStyleSets, mergeStyles } from '@fluentui/react';
-import { controlButtonLabelStyles, controlButtonStyles } from './styles/ControlBar.styles';
-const DefaultRenderText = (props) => {
-    var _a, _b, _c, _d, _e, _f;
-    const labelText = (_c = (_a = props === null || props === void 0 ? void 0 : props.text) !== null && _a !== void 0 ? _a : (_b = props === null || props === void 0 ? void 0 : props.strings) === null || _b === void 0 ? void 0 : _b.label) !== null && _c !== void 0 ? _c : ((props === null || props === void 0 ? void 0 : props.checked) ? (_d = props === null || props === void 0 ? void 0 : props.strings) === null || _d === void 0 ? void 0 : _d.onLabel : (_e = props === null || props === void 0 ? void 0 : props.strings) === null || _e === void 0 ? void 0 : _e.offLabel);
-    return (React.createElement(Label, { key: props === null || props === void 0 ? void 0 : props.labelKey, className: mergeStyles(controlButtonLabelStyles, (_f = props === null || props === void 0 ? void 0 : props.styles) === null || _f === void 0 ? void 0 : _f.label) }, labelText));
-};
+import { DefaultButton, concatStyleSets } from '@fluentui/react';
+import { controlButtonStyles } from './styles/ControlBar.styles';
+import { ControlButtonTooltip } from './ControlButtonTooltip';
 const DefaultRenderIcon = (props) => {
     return (props === null || props === void 0 ? void 0 : props.checked)
         ? (props === null || props === void 0 ? void 0 : props.onRenderOnIcon)
@@ -18,11 +14,23 @@ const DefaultRenderIcon = (props) => {
             : null;
 };
 /**
- * Default button styled for the Control Bar. This can be used to create custom buttons that are styled the same as other buttons provided by the UI Library.
+ * Default button styled for the {@link ControlBar}.
+ *
+ * Use this component create custom buttons that are styled the same as other buttons provided by the UI Library.
+ *
+ * @public
  */
 export const ControlBarButton = (props) => {
-    var _a, _b, _c;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
     const componentStyles = concatStyleSets(controlButtonStyles, (_a = props.styles) !== null && _a !== void 0 ? _a : {});
-    return (React.createElement(DefaultButton, Object.assign({}, props, { styles: componentStyles, onRenderText: props.showLabel ? (_b = props.onRenderText) !== null && _b !== void 0 ? _b : DefaultRenderText : undefined, onRenderIcon: (_c = props.onRenderIcon) !== null && _c !== void 0 ? _c : DefaultRenderIcon })));
+    const labelText = (_d = (_b = props === null || props === void 0 ? void 0 : props.text) !== null && _b !== void 0 ? _b : (_c = props === null || props === void 0 ? void 0 : props.strings) === null || _c === void 0 ? void 0 : _c.label) !== null && _d !== void 0 ? _d : ((props === null || props === void 0 ? void 0 : props.checked) ? (_e = props === null || props === void 0 ? void 0 : props.strings) === null || _e === void 0 ? void 0 : _e.onLabel : (_f = props === null || props === void 0 ? void 0 : props.strings) === null || _f === void 0 ? void 0 : _f.offLabel);
+    const tooltipContent = (_h = (_g = props === null || props === void 0 ? void 0 : props.strings) === null || _g === void 0 ? void 0 : _g.tooltipContent) !== null && _h !== void 0 ? _h : ((props === null || props === void 0 ? void 0 : props.disabled)
+        ? (_j = props === null || props === void 0 ? void 0 : props.strings) === null || _j === void 0 ? void 0 : _j.tooltipDisabledContent
+        : (props === null || props === void 0 ? void 0 : props.checked)
+            ? (_k = props === null || props === void 0 ? void 0 : props.strings) === null || _k === void 0 ? void 0 : _k.tooltipOnContent
+            : (_l = props === null || props === void 0 ? void 0 : props.strings) === null || _l === void 0 ? void 0 : _l.tooltipOffContent);
+    const tooltipId = ((_m = props.tooltipId) !== null && _m !== void 0 ? _m : props.labelKey) ? props.labelKey + '-tooltip' : undefined;
+    return (React.createElement(ControlButtonTooltip, { content: tooltipContent, id: tooltipId },
+        React.createElement(DefaultButton, Object.assign({}, props, { styles: componentStyles, onRenderText: props.showLabel && props.onRenderText ? props.onRenderText : undefined, onRenderIcon: (_o = props.onRenderIcon) !== null && _o !== void 0 ? _o : DefaultRenderIcon, ariaLabel: tooltipContent }), props.showLabel ? labelText : React.createElement(React.Fragment, null))));
 };
 //# sourceMappingURL=ControlBarButton.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ControlBarButton.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/ControlBarButton.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,aAAa,EAAiC,KAAK,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AACpH,OAAO,EAAE,wBAAwB,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AAoD3F,MAAM,iBAAiB,GAAG,CAAC,KAA6B,EAAe,EAAE;;IACvE,MAAM,SAAS,GACb,MAAA,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,IAAI,mCAAI,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,OAAO,0CAAE,KAAK,mCAAI,CAAC,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,OAAO,EAAC,CAAC,CAAC,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,OAAO,0CAAE,OAAO,CAAC,CAAC,CAAC,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,OAAO,0CAAE,QAAQ,CAAC,CAAC;IAChH,OAAO,CACL,oBAAC,KAAK,IAAC,GAAG,EAAE,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,QAAQ,EAAE,SAAS,EAAE,WAAW,CAAC,wBAAwB,EAAE,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,MAAM,0CAAE,KAAK,CAAC,IAChG,SAAS,CACJ,CACT,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,iBAAiB,GAAG,CAAC,KAA6B,EAAsB,EAAE;IAC9E,OAAO,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,OAAO;QACnB,CAAC,CAAC,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,cAAc;YACrB,CAAC,CAAC,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,cAAc,EAAE;YACzB,CAAC,CAAC,IAAI;QACR,CAAC,CAAC,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,eAAe;YACxB,CAAC,CAAC,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,eAAe,EAAE;YAC1B,CAAC,CAAC,IAAI,CAAC;AACX,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,KAA4B,EAAe,EAAE;;IAC5E,MAAM,eAAe,GAAG,eAAe,CAAC,mBAAmB,EAAE,MAAA,KAAK,CAAC,MAAM,mCAAI,EAAE,CAAC,CAAC;IACjF,OAAO,CACL,oBAAC,aAAa,oBACR,KAAK,IACT,MAAM,EAAE,eAAe,EACvB,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,MAAA,KAAK,CAAC,YAAY,mCAAI,iBAAiB,CAAC,CAAC,CAAC,SAAS,EACnF,YAAY,EAAE,MAAA,KAAK,CAAC,YAAY,mCAAI,iBAAiB,IACrD,CACH,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"ControlBarButton.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/ControlBarButton.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,aAAa,EAAiC,eAAe,EAAiB,MAAM,iBAAiB,CAAC;AAC/G,OAAO,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AACjE,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AA2F9D,MAAM,iBAAiB,GAAG,CAAC,KAA6B,EAAsB,EAAE;IAC9E,OAAO,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,OAAO;QACnB,CAAC,CAAC,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,cAAc;YACrB,CAAC,CAAC,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,cAAc,EAAE;YACzB,CAAC,CAAC,IAAI;QACR,CAAC,CAAC,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,eAAe;YACxB,CAAC,CAAC,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,eAAe,EAAE;YAC1B,CAAC,CAAC,IAAI,CAAC;AACX,CAAC,CAAC;AAEF;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,KAA4B,EAAe,EAAE;;IAC5E,MAAM,eAAe,GAAG,eAAe,CAAC,mBAAmB,EAAE,MAAA,KAAK,CAAC,MAAM,mCAAI,EAAE,CAAC,CAAC;IAEjF,MAAM,SAAS,GACb,MAAA,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,IAAI,mCAAI,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,OAAO,0CAAE,KAAK,mCAAI,CAAC,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,OAAO,EAAC,CAAC,CAAC,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,OAAO,0CAAE,OAAO,CAAC,CAAC,CAAC,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,OAAO,0CAAE,QAAQ,CAAC,CAAC;IAEhH,MAAM,cAAc,GAClB,MAAA,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,OAAO,0CAAE,cAAc,mCAC9B,CAAC,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,QAAQ;QACd,CAAC,CAAC,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,OAAO,0CAAE,sBAAsB;QACxC,CAAC,CAAC,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,OAAO;YAChB,CAAC,CAAC,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,OAAO,0CAAE,gBAAgB;YAClC,CAAC,CAAC,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,OAAO,0CAAE,iBAAiB,CAAC,CAAC;IAEzC,MAAM,SAAS,GAAG,CAAA,MAAA,KAAK,CAAC,SAAS,mCAAI,KAAK,CAAC,QAAQ,EAAC,CAAC,CAAC,KAAK,CAAC,QAAQ,GAAG,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC;IAE9F,OAAO,CACL,oBAAC,oBAAoB,IAAC,OAAO,EAAE,cAAc,EAAE,EAAE,EAAE,SAAS;QAC1D,oBAAC,aAAa,oBACR,KAAK,IACT,MAAM,EAAE,eAAe,EACvB,YAAY,EAAE,KAAK,CAAC,SAAS,IAAI,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,SAAS,EACpF,YAAY,EAAE,MAAA,KAAK,CAAC,YAAY,mCAAI,iBAAiB,EACrD,SAAS,EAAE,cAAc,KAExB,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,yCAAK,CACtB,CACK,CACxB,CAAC;AACJ,CAAC,CAAC"}

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

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { ITooltipHostProps } from '@fluentui/react';
+/**
+ * Tooltip that should wrap control bar buttons.
+ *
+ * @private
+ */
+export declare const ControlButtonTooltip: (props: ITooltipHostProps) => JSX.Element;
+//# sourceMappingURL=ControlButtonTooltip.d.ts.map

package/dist/dist-esm/react-components/src/components/ControlButtonTooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ControlButtonTooltip.d.ts","sourceRoot":"","sources":["../../../../../../react-components/src/components/ControlButtonTooltip.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAmC,iBAAiB,EAAkB,MAAM,iBAAiB,CAAC;AAUrG;;;;GAIG;AACH,eAAO,MAAM,oBAAoB,UAAW,iBAAiB,KAAG,WAW/D,CAAC"}

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

@@ -0,0 +1,19 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+import React from 'react';
+import { TooltipHost, mergeStyleSets } from '@fluentui/react';
+// Place callout with no gap between it and the button.
+const calloutProps = { gapSpace: 0 };
+// The TooltipHost root uses display: inline by default.
+// To prevent sizing issues or tooltip positioning issues, we override to inline-block.
+// For more details see "Icon Button with Tooltip" on https://developer.microsoft.com/en-us/fluentui#/controls/web/button
+const hostStyles = { root: { display: 'inline-block' } };
+/**
+ * Tooltip that should wrap control bar buttons.
+ *
+ * @private
+ */
+export const ControlButtonTooltip = (props) => {
+    return (React.createElement(TooltipHost, Object.assign({}, props, { "data-ui-id": props.id, calloutProps: Object.assign(Object.assign({}, calloutProps), props.calloutProps), styles: mergeStyleSets(hostStyles, props.styles) }), props.children));
+};
+//# sourceMappingURL=ControlButtonTooltip.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ControlButtonTooltip.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/ControlButtonTooltip.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,WAAW,EAAyC,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAErG,uDAAuD;AACvD,MAAM,YAAY,GAAG,EAAE,QAAQ,EAAE,CAAC,EAAE,CAAC;AAErC,wDAAwD;AACxD,uFAAuF;AACvF,yHAAyH;AACzH,MAAM,UAAU,GAAgC,EAAE,IAAI,EAAE,EAAE,OAAO,EAAE,cAAc,EAAE,EAAE,CAAC;AAEtF;;;;GAIG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,KAAwB,EAAe,EAAE;IAC5E,OAAO,CACL,oBAAC,WAAW,oBACN,KAAK,kBACG,KAAK,CAAC,EAAE,EACpB,YAAY,kCAAO,YAAY,GAAK,KAAK,CAAC,YAAY,GACtD,MAAM,EAAE,cAAc,CAAC,UAAU,EAAE,KAAK,CAAC,MAAM,CAAC,KAE/C,KAAK,CAAC,QAAQ,CACH,CACf,CAAC;AACJ,CAAC,CAAC"}

package/dist/dist-esm/react-components/src/components/{OptionsButton.d.ts → DevicesButton.d.ts}

@@ -1,7 +1,32 @@
 /// <reference types="react" />
-import { ControlBarButtonProps } from './ControlBarButton';
+import { IContextualMenuItemStyles, IContextualMenuStyles } from '@fluentui/react';
+import { ControlBarButtonProps, ControlBarButtonStyles } from './ControlBarButton';
 /**
- * Device to represent a camera, microphone, or speaker for component OptionsButton component
+ * Styles for the {@link DevicesButton} menu.
+ *
+ * @public
+ */
+export interface DevicesButtonContextualMenuStyles extends IContextualMenuStyles {
+    /**
+     * Styles for the items inside the {@link DevicesButton} button menu.
+     */
+    menuItemStyles?: IContextualMenuItemStyles;
+}
+/**
+ * Styles for the Devices button menu items.
+ *
+ * @public
+ */
+export interface DevicesButtonStyles extends ControlBarButtonStyles {
+    /**
+     * Styles for the {@link DevicesButton} menu.
+     */
+    menuStyles?: Partial<DevicesButtonContextualMenuStyles>;
+}
+/**
+ * A device, e.g. camera, microphone, or speaker, in the {@link DevicesButton} flyout.
+ *
+ * @public
  */
 export interface OptionsDevice {
     /**
@@ -14,13 +39,19 @@ export interface OptionsDevice {
     name: string;
 }
 /**
- * Strings of OptionsButton that can be overridden
+ * Strings of {@link DevicesButton} that can be overridden.
+ *
+ * @public
  */
-export interface OptionsButtonStrings {
+export interface DevicesButtonStrings {
     /**
      * Label of button
      */
     label: string;
+    /**
+     * Button tooltip content.
+     */
+    tooltipContent?: string;
     /**
      * Title of camera menu
      */
@@ -47,9 +78,11 @@ export interface OptionsButtonStrings {
     speakerMenuTooltip: string;
 }
 /**
- * Props for OptionsButton component
+ * Props for {@link DevicesButton}.
+ *
+ * @public
  */
-export interface OptionsButtonProps extends ControlBarButtonProps {
+export interface DevicesButtonProps extends ControlBarButtonProps {
     /**
      * Available microphones for selection
      */
@@ -89,14 +122,19 @@ export interface OptionsButtonProps extends ControlBarButtonProps {
     /**
      * Optional strings to override in component
      */
-    strings?: Partial<OptionsButtonStrings>;
+    strings?: Partial<DevicesButtonStrings>;
+    /**
+     * Option to increase the touch targets of the button flyout menu items from 36px to 48px.
+     * Recommended for mobile devices.
+     */
+    styles?: DevicesButtonStyles;
 }
 /**
- * `OptionsButton` allows you to easily create a component for rendering an options button. It can be used in your ControlBar component for example.
- * This button should contain dropdown menu items you can define through its property `menuProps`.
- * This `menuProps` property is of type [IContextualMenuProps](https://developer.microsoft.com/en-us/fluentui#/controls/web/contextualmenu#IContextualMenuProps).
+ * A button to open a menu that controls device options.
+ *
+ * Can be used with {@link ControlBar}.
  *
- * @param props - of type OptionsButtonProps
+ * @public
  */
-export declare const OptionsButton: (props: OptionsButtonProps) => JSX.Element;
-//# sourceMappingURL=OptionsButton.d.ts.map
+export declare const DevicesButton: (props: DevicesButtonProps) => JSX.Element;
+//# sourceMappingURL=DevicesButton.d.ts.map

package/dist/dist-esm/react-components/src/components/DevicesButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DevicesButton.d.ts","sourceRoot":"","sources":["../../../../../../react-components/src/components/DevicesButton.tsx"],"names":[],"mappings":";AAGA,OAAO,EAIL,yBAAyB,EAEzB,qBAAqB,EAEtB,MAAM,iBAAiB,CAAC;AAGzB,OAAO,EAAoB,qBAAqB,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAGrG;;;;GAIG;AACH,MAAM,WAAW,iCAAkC,SAAQ,qBAAqB;IAC9E;;OAEG;IACH,cAAc,CAAC,EAAE,yBAAyB,CAAC;CAC5C;AAED;;;;GAIG;AACH,MAAM,WAAW,mBAAoB,SAAQ,sBAAsB;IACjE;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC,iCAAiC,CAAC,CAAC;CACzD;AAED;;;;GAIG;AACH,MAAM,WAAW,aAAa;IAC5B;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IACX;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;CACd;AAED;;;;GAIG;AACH,MAAM,WAAW,oBAAoB;IACnC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,eAAe,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,mBAAmB,EAAE,MAAM,CAAC;IAC5B;;OAEG;IACH,gBAAgB,EAAE,MAAM,CAAC;IACzB;;OAEG;IACH,iBAAiB,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,qBAAqB,EAAE,MAAM,CAAC;IAC9B;;OAEG;IACH,kBAAkB,EAAE,MAAM,CAAC;CAC5B;AAED;;;;GAIG;AACH,MAAM,WAAW,kBAAmB,SAAQ,qBAAqB;IAC/D;;OAEG;IACH,WAAW,CAAC,EAAE,aAAa,EAAE,CAAC;IAC9B;;OAEG;IACH,QAAQ,CAAC,EAAE,aAAa,EAAE,CAAC;IAC3B;;OAEG;IACH,OAAO,CAAC,EAAE,aAAa,EAAE,CAAC;IAC1B;;OAEG;IACH,kBAAkB,CAAC,EAAE,aAAa,CAAC;IACnC;;OAEG;IACH,eAAe,CAAC,EAAE,aAAa,CAAC;IAChC;;OAEG;IACH,cAAc,CAAC,EAAE,aAAa,CAAC;IAC/B;;OAEG;IACH,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,aAAa,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC1D;;OAEG;IACH,kBAAkB,CAAC,EAAE,CAAC,MAAM,EAAE,aAAa,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC9D;;OAEG;IACH,eAAe,CAAC,EAAE,CAAC,MAAM,EAAE,aAAa,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC3D;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC,oBAAoB,CAAC,CAAC;IACxC;;;OAGG;IACH,MAAM,CAAC,EAAE,mBAAmB,CAAC;CAC9B;AA+ID;;;;;;GAMG;AACH,eAAO,MAAM,aAAa,UAAW,kBAAkB,KAAG,WAkBzD,CAAC"}