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

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

@@ -1 +1 @@
-{"version":3,"file":"ChatMessageContent.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/ChatMessage/ChatMessageContent.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport React from 'react';\nimport { _formatString } from '@internal/acs-ui-common';\nimport { Parser } from 'html-to-react';\nimport Linkify from 'react-linkify';\nimport { ChatMessage } from '../../types/ChatMessage';\nimport { LiveMessage } from 'react-aria-live';\nimport { Link } from '@fluentui/react';\n\ntype ChatMessageContentProps = {\n  message: ChatMessage;\n  liveAuthorIntro: string;\n  messageContentAriaText?: string;\n};\n\n/** @private */\nexport const ChatMessageContent = (props: ChatMessageContentProps): JSX.Element => {\n  switch (props.message.contentType) {\n    case 'text':\n      return MessageContentAsText(props);\n    case 'html':\n      return MessageContentAsRichTextHTML(props);\n    case 'richtext/html':\n      return MessageContentAsRichTextHTML(props);\n    default:\n      console.warn('unknown message content type');\n      return <></>;\n  }\n};\n\nconst MessageContentAsRichTextHTML = (props: ChatMessageContentProps): JSX.Element => {\n  const htmlToReactParser = new Parser();\n  const liveAuthor = _formatString(props.liveAuthorIntro, { author: `${props.message.senderDisplayName}` });\n  return (\n    <div data-ui-status={props.message.status} role=\"text\" aria-label={props.messageContentAriaText}>\n      <LiveMessage\n        message={`${props.message.mine ? '' : liveAuthor} ${extractContent(props.message.content || '')}`}\n        aria-live=\"polite\"\n      />\n      {htmlToReactParser.parse(props.message.content)}\n    </div>\n  );\n};\n\nconst MessageContentAsText = (props: ChatMessageContentProps): JSX.Element => {\n  const liveAuthor = _formatString(props.liveAuthorIntro, { author: `${props.message.senderDisplayName}` });\n  return (\n    <div data-ui-status={props.message.status} role=\"text\" aria-label={props.messageContentAriaText}>\n      <LiveMessage message={`${props.message.mine ? '' : liveAuthor} ${props.message.content}`} aria-live=\"polite\" />\n      <Linkify\n        componentDecorator={(decoratedHref: string, decoratedText: string, key: number) => {\n          return (\n            <Link target=\"_blank\" href={decoratedHref} key={key}>\n              {decoratedText}\n            </Link>\n          );\n        }}\n      >\n        {props.message.content}\n      </Linkify>\n    </div>\n  );\n};\n\n// https://stackoverflow.com/questions/28899298/extract-the-text-out-of-html-string-using-javascript\nconst extractContent = (s: string): string => {\n  const span = document.createElement('span');\n  span.innerHTML = s;\n  return span.textContent || span.innerText;\n};\n\"../../../../acs-ui-common/src\""]}
+{"version":3,"file":"ChatMessageContent.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/ChatMessage/ChatMessageContent.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport React from 'react';\n/* @conditional-compile-remove(teams-inline-images-and-file-sharing) */\nimport { useEffect } from 'react';\nimport { _formatString } from '@internal/acs-ui-common';\nimport { Parser, ProcessNodeDefinitions, IsValidNodeDefinitions, ProcessingInstructionType } from 'html-to-react';\n\nimport Linkify from 'react-linkify';\nimport { ChatMessage } from '../../types/ChatMessage';\n/* @conditional-compile-remove(data-loss-prevention) */\nimport { BlockedMessage } from '../../types/ChatMessage';\nimport { Link } from '@fluentui/react';\n/* @conditional-compile-remove(mention) */\nimport { MentionDisplayOptions, Mention } from '../MentionPopover';\n\n/* @conditional-compile-remove(data-loss-prevention) */\nimport { FontIcon, Stack } from '@fluentui/react';\nimport { MessageThreadStrings } from '../MessageThread';\n/* @conditional-compile-remove(teams-inline-images-and-file-sharing) */\nimport { FileMetadata } from '../FileDownloadCards';\nimport LiveMessage from '../Announcer/LiveMessage';\n/* @conditional-compile-remove(mention) */\nimport { defaultOnMentionRender } from './MentionRenderer';\nimport DOMPurify from 'dompurify';\n\ntype ChatMessageContentProps = {\n  message: ChatMessage;\n  strings: MessageThreadStrings;\n  /* @conditional-compile-remove(mention) */\n  mentionDisplayOptions?: MentionDisplayOptions;\n  /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */\n  attachmentsMap?: Record<string, string>;\n  /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */\n  onFetchAttachment?: (attachment: FileMetadata) => Promise<void>;\n};\n\n/* @conditional-compile-remove(data-loss-prevention) */\ntype BlockedMessageContentProps = {\n  message: BlockedMessage;\n  strings: MessageThreadStrings;\n};\n\ntype MessageContentWithLiveAriaProps = {\n  message: ChatMessage | /* @conditional-compile-remove(data-loss-prevention) */ BlockedMessage;\n  liveMessage: string;\n  ariaLabel?: string;\n  content: JSX.Element;\n};\n\n/** @private */\nexport const ChatMessageContent = (props: ChatMessageContentProps): JSX.Element => {\n  switch (props.message.contentType) {\n    case 'text':\n      return MessageContentAsText(props);\n    case 'html':\n      return MessageContentAsRichTextHTML(props);\n    case 'richtext/html':\n      return MessageContentAsRichTextHTML(props);\n    default:\n      console.warn('unknown message content type');\n      return <></>;\n  }\n};\n\nconst MessageContentWithLiveAria = (props: MessageContentWithLiveAriaProps): JSX.Element => {\n  return (\n    <div data-ui-status={props.message.status} role=\"text\" aria-label={props.ariaLabel}>\n      <LiveMessage message={props.liveMessage} ariaLive=\"polite\" />\n      {props.content}\n    </div>\n  );\n};\n\nconst MessageContentAsRichTextHTML = (props: ChatMessageContentProps): JSX.Element => {\n  /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */\n  useEffect(() => {\n    props.message.attachedFilesMetadata?.map((fileMetadata) => {\n      if (props.onFetchAttachment && props.attachmentsMap && props.attachmentsMap[fileMetadata.id] === undefined) {\n        props.onFetchAttachment(fileMetadata);\n      }\n    });\n  }, [props]);\n\n  return (\n    <MessageContentWithLiveAria\n      message={props.message}\n      liveMessage={generateLiveMessage(props)}\n      ariaLabel={messageContentAriaText(props)}\n      content={processHtmlToReact(props)}\n    />\n  );\n};\n\nconst MessageContentAsText = (props: ChatMessageContentProps): JSX.Element => {\n  return (\n    <MessageContentWithLiveAria\n      message={props.message}\n      liveMessage={generateLiveMessage(props)}\n      ariaLabel={messageContentAriaText(props)}\n      content={\n        <Linkify\n          componentDecorator={(decoratedHref: string, decoratedText: string, key: number) => {\n            return (\n              <Link target=\"_blank\" href={decoratedHref} key={key}>\n                {decoratedText}\n              </Link>\n            );\n          }}\n        >\n          {props.message.content}\n        </Linkify>\n      }\n    />\n  );\n};\n\n/* @conditional-compile-remove(data-loss-prevention) */\n/**\n * @private\n */\nexport const BlockedMessageContent = (props: BlockedMessageContentProps): JSX.Element => {\n  const Icon: JSX.Element = <FontIcon iconName={'DataLossPreventionProhibited'} />;\n  const blockedMessage =\n    props.message.warningText === undefined ? props.strings.blockedWarningText : props.message.warningText;\n  const blockedMessageLink = props.message.link;\n  const blockedMessageLinkText = blockedMessageLink\n    ? props.message.linkText ?? props.strings.blockedWarningLinkText\n    : '';\n\n  const liveAuthor =\n    props.message.mine || props.message.senderDisplayName === undefined ? '' : props.message.senderDisplayName;\n  const liveBlockedWarningText = `${liveAuthor} ${blockedMessage} ${blockedMessageLinkText}`;\n  return (\n    <MessageContentWithLiveAria\n      message={props.message}\n      liveMessage={liveBlockedWarningText}\n      ariaLabel={liveBlockedWarningText}\n      content={\n        <Stack horizontal wrap>\n          {Icon}\n          {blockedMessage && <p>{blockedMessage}</p>}\n          {blockedMessageLink && (\n            <Link target={'_blank'} href={blockedMessageLink}>\n              {blockedMessageLinkText}\n            </Link>\n          )}\n        </Stack>\n      }\n    />\n  );\n};\n\n// https://stackoverflow.com/questions/28899298/extract-the-text-out-of-html-string-using-javascript\nconst extractContent = (s: string): string => {\n  const span = document.createElement('span');\n  span.innerHTML = s;\n  return span.textContent || span.innerText;\n};\n\nconst generateLiveMessage = (props: ChatMessageContentProps): string => {\n  const liveAuthor = _formatString(props.strings.liveAuthorIntro, { author: `${props.message.senderDisplayName}` });\n\n  return `${props.message.editedOn ? props.strings.editedTag : ''} ${\n    props.message.mine ? '' : liveAuthor\n  } ${extractContent(props.message.content || '')} `;\n};\n\nconst messageContentAriaText = (props: ChatMessageContentProps): string | undefined => {\n  // Strip all html tags from the content for aria.\n\n  return props.message.content\n    ? props.message.mine\n      ? _formatString(props.strings.messageContentMineAriaText, {\n          message: DOMPurify.sanitize(props.message.content, { ALLOWED_TAGS: [] })\n        })\n      : _formatString(props.strings.messageContentAriaText, {\n          author: `${props.message.senderDisplayName}`,\n          message: DOMPurify.sanitize(props.message.content, { ALLOWED_TAGS: [] })\n        })\n    : undefined;\n};\n\nconst processNodeDefinitions = ProcessNodeDefinitions();\nconst htmlToReactParser = Parser();\n\n/* @conditional-compile-remove(teams-inline-images-and-file-sharing) */\nconst processInlineImage = (props: ChatMessageContentProps): ProcessingInstructionType => ({\n  // Custom <img> processing\n  shouldProcessNode: (node): boolean => {\n    // Process img node with id in attachments list\n    return (\n      node.name &&\n      node.name === 'img' &&\n      node.attribs &&\n      node.attribs.id &&\n      props.message.attachedFilesMetadata?.find((f) => f.id === node.attribs.id)\n    );\n  },\n  processNode: (node, children, index): HTMLElement => {\n    // logic to check id in map/list\n    if (props.attachmentsMap && node.attribs.id in props.attachmentsMap) {\n      node.attribs = { ...node.attribs, src: props.attachmentsMap[node.attribs.id] };\n    }\n    return processNodeDefinitions.processDefaultNode(node, children, index);\n  }\n});\n\n/* @conditional-compile-remove(mention) */\nconst processMention = (props: ChatMessageContentProps): ProcessingInstructionType => ({\n  shouldProcessNode: (node) => {\n    if (props.mentionDisplayOptions?.onRenderMention) {\n      // Override the handling of the <msft-mention> tag in the HTML if there's a custom renderer\n      return node.name === 'msft-mention';\n    }\n    return false;\n  },\n  processNode: (node) => {\n    if (props.mentionDisplayOptions?.onRenderMention) {\n      const { id } = node.attribs;\n      const mention: Mention = {\n        id: id,\n        displayText: node.children[0]?.data ?? ''\n      };\n      return props.mentionDisplayOptions.onRenderMention(mention, defaultOnMentionRender);\n    }\n    return processNodeDefinitions.processDefaultNode;\n  }\n});\n\nconst processHtmlToReact = (props: ChatMessageContentProps): JSX.Element => {\n  const steps: ProcessingInstructionType[] = [\n    /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */\n    processInlineImage(props),\n    /* @conditional-compile-remove(mention) */\n    processMention(props),\n    {\n      // Process everything else in the default way\n      shouldProcessNode: IsValidNodeDefinitions.alwaysValid,\n      processNode: processNodeDefinitions.processDefaultNode\n    }\n  ];\n\n  return htmlToReactParser.parseWithInstructions(\n    props.message.content ?? '',\n    IsValidNodeDefinitions.alwaysValid,\n    steps\n  );\n};\n\"../../../../acs-ui-common/src\""]}

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

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { Mention } from '../MentionPopover';
+/**
+ * Provides the default implementation for rendering an Mention in a message thread
+ * @param mention - The mention to render
+ *
+ * @private
+ */
+export declare const defaultOnMentionRender: (mention: Mention) => JSX.Element;
+//# sourceMappingURL=MentionRenderer.d.ts.map

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

@@ -0,0 +1,15 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+import React from 'react';
+/**
+ * Provides the default implementation for rendering an Mention in a message thread
+ * @param mention - The mention to render
+ *
+ * @private
+ */
+export const defaultOnMentionRender = (mention) => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const MsftMention = 'msft-mention';
+    return React.createElement(MsftMention, { id: mention.id }, mention.displayText);
+};
+//# sourceMappingURL=MentionRenderer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MentionRenderer.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/ChatMessage/MentionRenderer.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAClC,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B;;;;;GAKG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,OAAgB,EAAe,EAAE;IACtE,8DAA8D;IAC9D,MAAM,WAAW,GAAG,cAAqB,CAAC;IAC1C,OAAO,oBAAC,WAAW,IAAC,EAAE,EAAE,OAAO,CAAC,EAAE,IAAG,OAAO,CAAC,WAAW,CAAe,CAAC;AAC1E,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\nimport React from 'react';\nimport { Mention } from '../MentionPopover';\n\n/**\n * Provides the default implementation for rendering an Mention in a message thread\n * @param mention - The mention to render\n *\n * @private\n */\nexport const defaultOnMentionRender = (mention: Mention): JSX.Element => {\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const MsftMention = 'msft-mention' as any;\n  return <MsftMention id={mention.id}>{mention.displayText}</MsftMention>;\n};\n"]}

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

@@ -31,6 +31,6 @@ export const ControlBarButton = (props) => {
             : (_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: (_r = (_q = (_p = props.splitButtonAriaLabel) !== null && _p !== void 0 ? _p : props.ariaLabel) !== null && _q !== void 0 ? _q : tooltipContent) !== null && _r !== void 0 ? _r : labelText, allowDisabledFocus: (_s = props.allowDisabledFocus) !== null && _s !== void 0 ? _s : true, menuTriggerKeyCode: KeyCodes.down }), props.showLabel ? labelText : React.createElement(React.Fragment, null))));
+        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: (_r = (_q = (_p = props.splitButtonAriaLabel) !== null && _p !== void 0 ? _p : props.ariaLabel) !== null && _q !== void 0 ? _q : tooltipContent) !== null && _r !== void 0 ? _r : labelText, allowDisabledFocus: (_s = props.allowDisabledFocus) !== null && _s !== void 0 ? _s : true, menuTriggerKeyCode: KeyCodes.down, text: undefined }), 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":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport React from 'react';\nimport {\n  DefaultButton,\n  IButtonProps,\n  IRenderFunction,\n  concatStyleSets,\n  IButtonStyles,\n  KeyCodes\n} from '@fluentui/react';\nimport { controlButtonStyles } from './styles/ControlBar.styles';\nimport { ControlButtonTooltip } from './ControlButtonTooltip';\n\n/**\n * Strings of {@link ControlBarButton} that can be overridden.\n *\n * @public\n */\nexport interface ControlBarButtonStrings {\n  /**\n   * Label of the button. This supersedes onLabel or offLabel if used.\n   */\n  label?: string;\n  /**\n   * Label of the button shown when the button is checked.\n   */\n  onLabel?: string;\n  /**\n   * Label of the button shown when the button is not checked.\n   */\n  offLabel?: string;\n  /**\n   * Tooltip content of the button. This supersedes tooltipDisabledContent, tooltipOnContent and tooltipOffContent if used.\n   */\n  tooltipContent?: string;\n  /**\n   * Tooltip content when the button is disabled.\n   */\n  tooltipDisabledContent?: string;\n  /**\n   * Tooltip content when the button is in the checked state.\n   */\n  tooltipOnContent?: string;\n  /**\n   * Tooltip content when the button is in the unchecked state.\n   */\n  tooltipOffContent?: string;\n}\n\n/**\n * Styles for all {@link ControlBarButton} implementations.\n *\n * @public\n */\nexport type ControlBarButtonStyles = IButtonStyles;\n\n/**\n * Props for {@link ControlBarButton}.\n *\n * @public\n */\nexport interface ControlBarButtonProps extends IButtonProps {\n  /**\n   * Whether the label is displayed or not.\n   *\n   * @defaultValue `false`\n   */\n  showLabel?: boolean;\n\n  /**\n   * Key to use for the Label component\n   */\n  labelKey?: string;\n\n  /**\n   * Id to use for the tooltip host.\n   *\n   * @defaultValue This uses the labelKey and appends -tooltip by default\n   */\n  tooltipId?: string;\n\n  /**\n   * Optional strings to override in component.\n   */\n  strings?: ControlBarButtonStrings;\n\n  /**\n   * Icon to render when the button is checked.\n   */\n  onRenderOnIcon?: IRenderFunction<IButtonProps>;\n\n  /**\n   * Icon to render when the button is not checked.\n   */\n  onRenderOffIcon?: IRenderFunction<IButtonProps>;\n\n  /**\n   * Fluent styles, including extensions common to all {@link ControlBarButton}s.\n   */\n  styles?: ControlBarButtonStyles;\n}\n\nconst DefaultRenderIcon = (props?: ControlBarButtonProps): JSX.Element | null => {\n  return props?.checked\n    ? props?.onRenderOnIcon\n      ? props?.onRenderOnIcon()\n      : null\n    : props?.onRenderOffIcon\n    ? props?.onRenderOffIcon()\n    : null;\n};\n\n/**\n * Default button styled for the {@link ControlBar}.\n *\n * Use this component create custom buttons that are styled the same as other buttons provided by the UI Library.\n *\n * @public\n */\nexport const ControlBarButton = (props: ControlBarButtonProps): JSX.Element => {\n  const componentStyles = concatStyleSets(controlButtonStyles, props.styles ?? {});\n\n  const labelText =\n    props?.text ?? props?.strings?.label ?? (props?.checked ? props?.strings?.onLabel : props?.strings?.offLabel);\n\n  const tooltipContent =\n    props?.strings?.tooltipContent ??\n    (props?.disabled\n      ? props?.strings?.tooltipDisabledContent\n      : props?.checked\n      ? props?.strings?.tooltipOnContent\n      : props?.strings?.tooltipOffContent);\n\n  const tooltipId = props.tooltipId ?? props.labelKey ? props.labelKey + '-tooltip' : undefined;\n\n  return (\n    <ControlButtonTooltip content={tooltipContent} id={tooltipId}>\n      <DefaultButton\n        {...props}\n        styles={componentStyles}\n        onRenderText={props.showLabel && props.onRenderText ? props.onRenderText : undefined}\n        onRenderIcon={props.onRenderIcon ?? DefaultRenderIcon}\n        ariaLabel={props.splitButtonAriaLabel ?? props.ariaLabel ?? tooltipContent ?? labelText}\n        allowDisabledFocus={props.allowDisabledFocus ?? true}\n        menuTriggerKeyCode={KeyCodes.down} // explicitly sets the keypress to activiate the split button drop down.\n      >\n        {props.showLabel ? labelText : <></>}\n      </DefaultButton>\n    </ControlButtonTooltip>\n  );\n};\n"]}
+{"version":3,"file":"ControlBarButton.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/ControlBarButton.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport React from 'react';\nimport {\n  DefaultButton,\n  IButtonProps,\n  IRenderFunction,\n  concatStyleSets,\n  IButtonStyles,\n  KeyCodes\n} from '@fluentui/react';\nimport { controlButtonStyles } from './styles/ControlBar.styles';\nimport { ControlButtonTooltip } from './ControlButtonTooltip';\n\n/**\n * Strings of {@link ControlBarButton} that can be overridden.\n *\n * @public\n */\nexport interface ControlBarButtonStrings {\n  /**\n   * Label of the button. This supersedes onLabel or offLabel if used.\n   */\n  label?: string;\n  /**\n   * Label of the button shown when the button is checked.\n   */\n  onLabel?: string;\n  /**\n   * Label of the button shown when the button is not checked.\n   */\n  offLabel?: string;\n  /**\n   * Tooltip content of the button. This supersedes tooltipDisabledContent, tooltipOnContent and tooltipOffContent if used.\n   */\n  tooltipContent?: string;\n  /**\n   * Tooltip content when the button is disabled.\n   */\n  tooltipDisabledContent?: string;\n  /**\n   * Tooltip content when the button is in the checked state.\n   */\n  tooltipOnContent?: string;\n  /**\n   * Tooltip content when the button is in the unchecked state.\n   */\n  tooltipOffContent?: string;\n}\n\n/**\n * Styles for all {@link ControlBarButton} implementations.\n *\n * @public\n */\nexport type ControlBarButtonStyles = IButtonStyles;\n\n/**\n * Props for {@link ControlBarButton}.\n *\n * @public\n */\nexport interface ControlBarButtonProps extends IButtonProps {\n  /**\n   * Whether the label is displayed or not.\n   *\n   * @defaultValue `false`\n   */\n  showLabel?: boolean;\n\n  /**\n   * Key to use for the Label component\n   */\n  labelKey?: string;\n\n  /**\n   * Id to use for the tooltip host.\n   *\n   * @defaultValue This uses the labelKey and appends -tooltip by default\n   */\n  tooltipId?: string;\n\n  /**\n   * Optional strings to override in component.\n   */\n  strings?: ControlBarButtonStrings;\n\n  /**\n   * Icon to render when the button is checked.\n   */\n  onRenderOnIcon?: IRenderFunction<IButtonProps>;\n\n  /**\n   * Icon to render when the button is not checked.\n   */\n  onRenderOffIcon?: IRenderFunction<IButtonProps>;\n\n  /**\n   * Fluent styles, including extensions common to all {@link ControlBarButton}s.\n   */\n  styles?: ControlBarButtonStyles;\n}\n\nconst DefaultRenderIcon = (props?: ControlBarButtonProps): JSX.Element | null => {\n  return props?.checked\n    ? props?.onRenderOnIcon\n      ? props?.onRenderOnIcon()\n      : null\n    : props?.onRenderOffIcon\n    ? props?.onRenderOffIcon()\n    : null;\n};\n\n/**\n * Default button styled for the {@link ControlBar}.\n *\n * Use this component create custom buttons that are styled the same as other buttons provided by the UI Library.\n *\n * @public\n */\nexport const ControlBarButton = (props: ControlBarButtonProps): JSX.Element => {\n  const componentStyles = concatStyleSets(controlButtonStyles, props.styles ?? {});\n\n  const labelText =\n    props?.text ?? props?.strings?.label ?? (props?.checked ? props?.strings?.onLabel : props?.strings?.offLabel);\n\n  const tooltipContent =\n    props?.strings?.tooltipContent ??\n    (props?.disabled\n      ? props?.strings?.tooltipDisabledContent\n      : props?.checked\n      ? props?.strings?.tooltipOnContent\n      : props?.strings?.tooltipOffContent);\n\n  const tooltipId = props.tooltipId ?? props.labelKey ? props.labelKey + '-tooltip' : undefined;\n\n  return (\n    <ControlButtonTooltip content={tooltipContent} id={tooltipId}>\n      <DefaultButton\n        {...props}\n        styles={componentStyles}\n        onRenderText={props.showLabel && props.onRenderText ? props.onRenderText : undefined}\n        onRenderIcon={props.onRenderIcon ?? DefaultRenderIcon}\n        ariaLabel={props.splitButtonAriaLabel ?? props.ariaLabel ?? tooltipContent ?? labelText}\n        allowDisabledFocus={props.allowDisabledFocus ?? true}\n        menuTriggerKeyCode={KeyCodes.down} // explicitly sets the keypress to activiate the split button drop down.\n        text={undefined} // this is handled as a child of the button, without this the `showLabel` prop may be ignored.\n      >\n        {props.showLabel ? labelText : <></>}\n      </DefaultButton>\n    </ControlButtonTooltip>\n  );\n};\n"]}

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

@@ -10,9 +10,9 @@ export interface CommonSitePermissionsProps {
      */
     appName: string;
     /**
-     * Type of the Site Permissions component.
+     * Kind of the Site Permissions component.
      */
-    type: 'request' | 'denied' | 'check';
+    kind: 'request' | 'denied' | 'check';
     /**
      * Type of the browser used, the Site permission component will show different guidance text based on the browser type
      */

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

@@ -18,17 +18,17 @@ export const CameraAndMicrophoneSitePermissions = (props) => {
     /* @conditional-compile-remove(call-readiness) */
     const locale = useLocale().strings;
     /* @conditional-compile-remove(call-readiness) */
-    const strings = useShallowMerge(props.type === 'denied'
+    const strings = useShallowMerge(props.kind === 'denied'
         ? props.browserHint === 'safari'
             ? locale.CameraAndMicrophoneSitePermissionsDeniedSafari
             : locale.CameraAndMicrophoneSitePermissionsDenied
-        : props.type === 'request'
+        : props.kind === 'request'
             ? locale.CameraAndMicrophoneSitePermissionsRequest
             : locale.CameraAndMicrophoneSitePermissionsCheck, props.strings);
     /* @conditional-compile-remove(call-readiness) */
-    const cameraIconName = ((_a = props.microphoneIconName) !== null && _a !== void 0 ? _a : props.type === 'denied') ? 'SitePermissionCameraDenied' : 'SitePermissionCamera';
+    const cameraIconName = ((_a = props.microphoneIconName) !== null && _a !== void 0 ? _a : props.kind === 'denied') ? 'SitePermissionCameraDenied' : 'SitePermissionCamera';
     /* @conditional-compile-remove(call-readiness) */
-    const microphoneIconName = ((_b = props.microphoneIconName) !== null && _b !== void 0 ? _b : props.type === 'denied') ? 'SitePermissionMicDenied' : 'SitePermissionMic';
+    const microphoneIconName = ((_b = props.microphoneIconName) !== null && _b !== void 0 ? _b : props.kind === 'denied') ? 'SitePermissionMicDenied' : 'SitePermissionMic';
     /* @conditional-compile-remove(call-readiness) */
     const connectorIconName = (_c = props.microphoneIconName) !== null && _c !== void 0 ? _c : 'SitePermissionsSparkle';
     /* @conditional-compile-remove(call-readiness) */
@@ -46,15 +46,15 @@ export const MicrophoneSitePermissions = (props) => {
     /* @conditional-compile-remove(call-readiness) */
     const locale = useLocale().strings;
     /* @conditional-compile-remove(call-readiness) */
-    const strings = useShallowMerge(props.type === 'denied'
+    const strings = useShallowMerge(props.kind === 'denied'
         ? props.browserHint === 'safari'
             ? locale.MicrophoneSitePermissionsDeniedSafari
             : locale.MicrophoneSitePermissionsDenied
-        : props.type === 'request'
+        : props.kind === 'request'
             ? locale.MicrophoneSitePermissionsRequest
             : locale.MicrophoneSitePermissionsCheck, props.strings);
     /* @conditional-compile-remove(call-readiness) */
-    const iconName = ((_a = props.microphoneIconName) !== null && _a !== void 0 ? _a : props.type === 'denied') ? 'SitePermissionMicDenied' : 'SitePermissionMic';
+    const iconName = ((_a = props.microphoneIconName) !== null && _a !== void 0 ? _a : props.kind === 'denied') ? 'SitePermissionMicDenied' : 'SitePermissionMic';
     /* @conditional-compile-remove(call-readiness) */
     return (React.createElement(SitePermissionsContainer, Object.assign({}, props, { strings: strings, cameraIconName: iconName, onPrimaryButtonClick: props.onContinueAnywayClick })));
     return React.createElement(React.Fragment, null);
@@ -70,15 +70,15 @@ export const CameraSitePermissions = (props) => {
     /* @conditional-compile-remove(call-readiness) */
     const locale = useLocale().strings;
     /* @conditional-compile-remove(call-readiness) */
-    const strings = useShallowMerge(props.type === 'denied'
+    const strings = useShallowMerge(props.kind === 'denied'
         ? props.browserHint === 'safari'
             ? locale.CameraSitePermissionsDeniedSafari
             : locale.CameraSitePermissionsDenied
-        : props.type === 'request'
+        : props.kind === 'request'
             ? locale.CameraSitePermissionsRequest
             : locale.CameraSitePermissionsCheck, props.strings);
     /* @conditional-compile-remove(call-readiness) */
-    const iconName = ((_a = props.cameraIconName) !== null && _a !== void 0 ? _a : props.type === 'denied') ? 'SitePermissionCameraDenied' : 'SitePermissionCamera';
+    const iconName = ((_a = props.cameraIconName) !== null && _a !== void 0 ? _a : props.kind === 'denied') ? 'SitePermissionCameraDenied' : 'SitePermissionCamera';
     /* @conditional-compile-remove(call-readiness) */
     return (React.createElement(SitePermissionsContainer, Object.assign({}, props, { strings: strings, microphoneIconName: iconName, onPrimaryButtonClick: props.onContinueAnywayClick })));
     return React.createElement(React.Fragment, null);

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

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

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

@@ -207,7 +207,7 @@ export interface DeviceMenuStyles extends IContextualMenuStyles {
  *
  * @private
  */
-export declare const generateDefaultDeviceMenuProps: (props: DeviceMenuProps, strings: DeviceMenuStrings, isSelectCamAllowed?: boolean, isSelectMicAllowed?: boolean) => {
+export declare const generateDefaultDeviceMenuProps: (props: DeviceMenuProps, strings: DeviceMenuStrings, primaryActionItem?: IContextualMenuItem | undefined, isSelectCamAllowed?: boolean, isSelectMicAllowed?: boolean) => {
     items: IContextualMenuItem[];
 } | undefined;
 /**

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

@@ -13,7 +13,7 @@ import { _preventDismissOnEvent as preventDismissOnEvent } from "../../../acs-ui
  *
  * @private
  */
-export const generateDefaultDeviceMenuProps = (props, strings, isSelectCamAllowed = true, isSelectMicAllowed = true) => {
+export const generateDefaultDeviceMenuProps = (props, strings, primaryActionItem, isSelectCamAllowed = true, isSelectMicAllowed = true) => {
     var _a, _b;
     const { microphones, speakers, cameras, selectedMicrophone, selectedSpeaker, selectedCamera, onSelectCamera, onSelectMicrophone, onSelectSpeaker } = props;
     const defaultMenuProps = {
@@ -34,88 +34,121 @@ export const generateDefaultDeviceMenuProps = (props, strings, isSelectCamAllowe
     const menuItemStyles = merge(buttonFlyoutItemStyles, (_b = (_a = props.styles) === null || _a === void 0 ? void 0 : _a.menuItemStyles) !== null && _b !== void 0 ? _b : {});
     if (cameras && selectedCamera && onSelectCamera && isSelectCamAllowed) {
         defaultMenuProps.items.push({
-            key: 'sectionCamera',
-            title: strings.cameraMenuTooltip,
+            key: 'cameras',
             itemType: ContextualMenuItemType.Section,
             sectionProps: {
                 title: strings.cameraMenuTitle,
-                items: cameras.map((camera) => ({
-                    key: camera.id,
-                    text: camera.name,
-                    title: camera.name,
-                    iconProps: { iconName: 'OptionsCamera', styles: { root: { lineHeight: 0 } } },
-                    itemProps: {
-                        styles: menuItemStyles
-                    },
-                    canCheck: true,
-                    isChecked: camera.id === (selectedCamera === null || selectedCamera === void 0 ? void 0 : selectedCamera.id),
-                    onClick: () => {
-                        if (camera.id !== (selectedCamera === null || selectedCamera === void 0 ? void 0 : selectedCamera.id)) {
-                            onSelectCamera(camera);
-                        }
+                items: [
+                    {
+                        key: 'sectionCamera',
+                        title: strings.cameraMenuTooltip,
+                        subMenuProps: {
+                            calloutProps: {
+                                preventDismissOnEvent
+                            },
+                            items: cameras.map((camera) => ({
+                                key: camera.id,
+                                text: camera.name,
+                                title: camera.name,
+                                itemProps: {
+                                    styles: menuItemStyles
+                                },
+                                canCheck: true,
+                                isChecked: camera.id === (selectedCamera === null || selectedCamera === void 0 ? void 0 : selectedCamera.id),
+                                onClick: () => {
+                                    if (camera.id !== (selectedCamera === null || selectedCamera === void 0 ? void 0 : selectedCamera.id)) {
+                                        onSelectCamera(camera);
+                                    }
+                                }
+                            }))
+                        },
+                        text: selectedCamera.name
                     }
-                }))
+                ]
             }
         });
+        if (primaryActionItem) {
+            defaultMenuProps.items.push(primaryActionItem);
+        }
     }
     if (microphones && selectedMicrophone && onSelectMicrophone && isSelectMicAllowed) {
         // Set props as Microphone if speakers can be enumerated else set as Audio Device
         const speakersAvailable = speakers && speakers.length > 0;
         const key = speakersAvailable ? 'sectionMicrophone' : 'sectionAudioDevice';
         const title = speakersAvailable ? strings.microphoneMenuTooltip : strings.audioDeviceMenuTooltip;
-        const sectionPropsTitle = speakersAvailable ? strings.microphoneMenuTitle : strings.audioDeviceMenuTitle;
-        const iconName = speakersAvailable ? 'OptionsMic' : 'OptionsSpeaker';
         defaultMenuProps.items.push({
-            key: key,
-            title: title,
+            key: 'microphones',
             itemType: ContextualMenuItemType.Section,
             sectionProps: {
-                title: sectionPropsTitle,
-                items: microphones.map((microphone) => ({
-                    key: microphone.id,
-                    text: microphone.name,
-                    title: microphone.name,
-                    iconProps: { iconName: iconName, styles: { root: { lineHeight: 0 } } },
-                    itemProps: {
-                        styles: menuItemStyles
-                    },
-                    canCheck: true,
-                    isChecked: microphone.id === (selectedMicrophone === null || selectedMicrophone === void 0 ? void 0 : selectedMicrophone.id),
-                    onClick: () => {
-                        if (microphone.id !== (selectedMicrophone === null || selectedMicrophone === void 0 ? void 0 : selectedMicrophone.id)) {
-                            onSelectMicrophone(microphone);
-                        }
+                title: strings.microphoneMenuTitle,
+                items: [
+                    {
+                        key: key,
+                        title: title,
+                        subMenuProps: {
+                            calloutProps: {
+                                preventDismissOnEvent
+                            },
+                            items: microphones.map((microphone) => ({
+                                key: microphone.id,
+                                text: microphone.name,
+                                title: microphone.name,
+                                itemProps: {
+                                    styles: menuItemStyles
+                                },
+                                canCheck: true,
+                                isChecked: microphone.id === (selectedMicrophone === null || selectedMicrophone === void 0 ? void 0 : selectedMicrophone.id),
+                                onClick: () => {
+                                    if (microphone.id !== (selectedMicrophone === null || selectedMicrophone === void 0 ? void 0 : selectedMicrophone.id)) {
+                                        onSelectMicrophone(microphone);
+                                    }
+                                }
+                            }))
+                        },
+                        text: selectedMicrophone.name
                     }
-                }))
+                ]
             }
         });
     }
     if (speakers && selectedSpeaker && onSelectSpeaker) {
         defaultMenuProps.items.push({
-            key: 'sectionSpeaker',
-            title: strings.speakerMenuTooltip,
+            key: 'speakers',
             itemType: ContextualMenuItemType.Section,
             sectionProps: {
                 title: strings.speakerMenuTitle,
-                items: speakers.map((speaker) => ({
-                    key: speaker.id,
-                    text: speaker.name,
-                    title: speaker.name,
-                    iconProps: { iconName: 'OptionsSpeaker', styles: { root: { lineHeight: 0 } } },
-                    itemProps: {
-                        styles: menuItemStyles
-                    },
-                    canCheck: true,
-                    isChecked: speaker.id === (selectedSpeaker === null || selectedSpeaker === void 0 ? void 0 : selectedSpeaker.id),
-                    onClick: () => {
-                        if (speaker.id !== (selectedSpeaker === null || selectedSpeaker === void 0 ? void 0 : selectedSpeaker.id)) {
-                            onSelectSpeaker(speaker);
-                        }
+                items: [
+                    {
+                        key: 'sectionSpeaker',
+                        subMenuProps: {
+                            calloutProps: {
+                                preventDismissOnEvent
+                            },
+                            items: speakers.map((speaker) => ({
+                                key: speaker.id,
+                                text: speaker.name,
+                                title: speaker.name,
+                                itemProps: {
+                                    styles: menuItemStyles
+                                },
+                                canCheck: true,
+                                isChecked: speaker.id === (selectedSpeaker === null || selectedSpeaker === void 0 ? void 0 : selectedSpeaker.id),
+                                onClick: () => {
+                                    if (speaker.id !== (selectedSpeaker === null || selectedSpeaker === void 0 ? void 0 : selectedSpeaker.id)) {
+                                        onSelectSpeaker(speaker);
+                                    }
+                                }
+                            }))
+                        },
+                        text: selectedSpeaker.name
                     }
-                }))
+                ]
             }
         });
     }
+    if (microphones && selectedMicrophone && onSelectMicrophone && isSelectMicAllowed && primaryActionItem) {
+        defaultMenuProps.items.push(primaryActionItem);
+    }
     if (defaultMenuProps.items.length === 0) {
         // Avoids creating an empty context menu.
         return undefined;

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

@@ -1 +1 @@
-{"version":3,"file":"DevicesButton.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/DevicesButton.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport {\n  ContextualMenuItemType,\n  IContextualMenuItem,\n  IContextualMenuItemStyles,\n  IContextualMenuProps,\n  IContextualMenuStyles,\n  merge\n} from '@fluentui/react';\nimport React from 'react';\nimport { useLocale } from '../localization';\nimport { ControlBarButton, ControlBarButtonProps, ControlBarButtonStyles } from './ControlBarButton';\nimport { _HighContrastAwareIcon } from './HighContrastAwareIcon';\nimport { buttonFlyoutItemStyles } from './styles/ControlBar.styles';\nimport { _preventDismissOnEvent as preventDismissOnEvent } from '@internal/acs-ui-common';\n\n/**\n * Styles for the {@link DevicesButton} menu.\n *\n * @public\n */\nexport interface DevicesButtonContextualMenuStyles extends IContextualMenuStyles {\n  /**\n   * Styles for the items inside the {@link DevicesButton} button menu.\n   */\n  menuItemStyles?: IContextualMenuItemStyles;\n}\n\n/**\n * Styles for the Devices button menu items.\n *\n * @public\n */\nexport interface DevicesButtonStyles extends ControlBarButtonStyles {\n  /**\n   * Styles for the {@link DevicesButton} menu.\n   */\n  menuStyles?: Partial<DevicesButtonContextualMenuStyles>;\n}\n\n/**\n * A device, e.g. camera, microphone, or speaker, in the {@link DevicesButton} flyout.\n *\n * @public\n */\nexport interface OptionsDevice {\n  /**\n   * Device unique identifier\n   */\n  id: string;\n  /**\n   * Device name\n   */\n  name: string;\n}\n\n/**\n * Strings of {@link DevicesButton} that can be overridden.\n *\n * @public\n */\nexport interface DevicesButtonStrings {\n  /**\n   * Label of button\n   */\n  label: string;\n  /**\n   * Button tooltip content.\n   */\n  tooltipContent?: string;\n  /**\n   * Title of camera menu\n   */\n  cameraMenuTitle: string;\n  /**\n   * Title of microphone menu\n   */\n  microphoneMenuTitle: string;\n  /**\n   * Title of speaker menu\n   */\n  speakerMenuTitle: string;\n  /**\n   * Tooltip of camera menu\n   */\n  cameraMenuTooltip: string;\n  /**\n   * Tooltip of microphone menu\n   */\n  microphoneMenuTooltip: string;\n  /**\n   * Tooltip of speaker menu\n   */\n  speakerMenuTooltip: string;\n}\n\n/**\n * Props for {@link DevicesButton}.\n *\n * @public\n */\nexport interface DevicesButtonProps extends ControlBarButtonProps {\n  /**\n   * Available microphones for selection\n   */\n  microphones?: OptionsDevice[];\n  /**\n   * Available speakers for selection\n   */\n  speakers?: OptionsDevice[];\n  /**\n   * Available cameras for selection\n   */\n  cameras?: OptionsDevice[];\n  /**\n   * Microphone that is shown as currently selected\n   */\n  selectedMicrophone?: OptionsDevice;\n  /**\n   * Speaker that is shown as currently selected\n   */\n  selectedSpeaker?: 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   * Callback when a microphone is selected\n   */\n  onSelectMicrophone?: (device: OptionsDevice) => Promise<void>;\n  /**\n   * Speaker when a speaker is selected\n   */\n  onSelectSpeaker?: (device: OptionsDevice) => Promise<void>;\n  /**\n   * Optional strings to override in component\n   */\n  strings?: Partial<DevicesButtonStrings>;\n  /**\n   * Option to increase the touch targets of the button flyout menu items from 36px to 48px.\n   * Recommended for mobile devices.\n   */\n  styles?: DevicesButtonStyles;\n}\n\n/**\n * Subset props for various buttons that show device selection menus.\n *\n * @private\n */\nexport interface DeviceMenuProps {\n  microphones?: OptionsDevice[];\n  speakers?: OptionsDevice[];\n  cameras?: OptionsDevice[];\n  selectedMicrophone?: OptionsDevice;\n  selectedSpeaker?: OptionsDevice;\n  selectedCamera?: OptionsDevice;\n  onSelectCamera?: (device: OptionsDevice) => Promise<void>;\n  onSelectMicrophone?: (device: OptionsDevice) => Promise<void>;\n  onSelectSpeaker?: (device: OptionsDevice) => Promise<void>;\n  styles?: Partial<DeviceMenuStyles>;\n}\n\n/**\n * Subset of strings for various buttons that show device selection menus.\n *\n * @private\n */\nexport interface DeviceMenuStrings {\n  /**\n   * Title for Camera section in the contextual menu\n   */\n  cameraMenuTitle?: string;\n  /**\n   * Title for Audio Device section in the contextual menu\n   *\n   * @remark Used in place of microphoneMenuTitle when speakers can be enumerated\n   */\n  audioDeviceMenuTitle?: string;\n  /**\n   * Title for Microphone section in the contextual menu\n   *\n   * @remark Used when speakers can be enumerated\n   */\n  microphoneMenuTitle?: string;\n  /**\n   * Title for Speaker section in the contextual menu\n   */\n  speakerMenuTitle?: string;\n  /**\n   * Tooltip label for Camera section in the contextual menu\n   */\n  cameraMenuTooltip?: string;\n  /**\n   * Tooltip label for Audio Device section in the contextual menu\n   *\n   * @remark Used in place of microphoneMenuTooltip when speakers can be enumerated\n   */\n  audioDeviceMenuTooltip?: string;\n  /**\n   * Tooltip label for Microphone section in the contextual menu\n   *\n   * @remark Used when speakers can be enumerated\n   */\n  microphoneMenuTooltip?: string;\n  /**\n   * Tooltip label for Speaker section in the contextual menu\n   */\n  speakerMenuTooltip?: string;\n}\n\n/**\n * Styles for flyouts used by various buttons for device selection flyouts.\n *\n * @private\n */\nexport interface DeviceMenuStyles extends IContextualMenuStyles {\n  menuItemStyles?: IContextualMenuItemStyles;\n}\n\n/**\n * Generates default {@link IContextualMenuProps} for buttons that\n * show a drop-down to select devices to use.\n *\n * @private\n */\nexport const generateDefaultDeviceMenuProps = (\n  props: DeviceMenuProps,\n  strings: DeviceMenuStrings,\n  isSelectCamAllowed = true,\n  isSelectMicAllowed = true\n): { items: IContextualMenuItem[] } | undefined => {\n  const {\n    microphones,\n    speakers,\n    cameras,\n    selectedMicrophone,\n    selectedSpeaker,\n    selectedCamera,\n    onSelectCamera,\n    onSelectMicrophone,\n    onSelectSpeaker\n  } = props;\n\n  const defaultMenuProps: IContextualMenuProps = {\n    items: [],\n    styles: props.styles,\n    calloutProps: {\n      styles: {\n        root: {\n          // Confine the menu to the parents bounds.\n          // More info: https://github.com/microsoft/fluentui/issues/18835\n          // NB: 95% to keep some space for margin, drop shadow etc around the Callout.\n          maxWidth: '95%'\n        }\n      },\n      preventDismissOnEvent\n    }\n  };\n\n  const menuItemStyles = merge(buttonFlyoutItemStyles, props.styles?.menuItemStyles ?? {});\n\n  if (cameras && selectedCamera && onSelectCamera && isSelectCamAllowed) {\n    defaultMenuProps.items.push({\n      key: 'sectionCamera',\n      title: strings.cameraMenuTooltip,\n      itemType: ContextualMenuItemType.Section,\n      sectionProps: {\n        title: strings.cameraMenuTitle,\n        items: cameras.map((camera) => ({\n          key: camera.id,\n          text: camera.name,\n          title: camera.name,\n          iconProps: { iconName: 'OptionsCamera', styles: { root: { lineHeight: 0 } } },\n          itemProps: {\n            styles: menuItemStyles\n          },\n          canCheck: true,\n          isChecked: camera.id === selectedCamera?.id,\n          onClick: () => {\n            if (camera.id !== selectedCamera?.id) {\n              onSelectCamera(camera);\n            }\n          }\n        }))\n      }\n    });\n  }\n\n  if (microphones && selectedMicrophone && onSelectMicrophone && isSelectMicAllowed) {\n    // Set props as Microphone if speakers can be enumerated else set as Audio Device\n    const speakersAvailable = speakers && speakers.length > 0;\n    const key = speakersAvailable ? 'sectionMicrophone' : 'sectionAudioDevice';\n    const title = speakersAvailable ? strings.microphoneMenuTooltip : strings.audioDeviceMenuTooltip;\n    const sectionPropsTitle = speakersAvailable ? strings.microphoneMenuTitle : strings.audioDeviceMenuTitle;\n    const iconName = speakersAvailable ? 'OptionsMic' : 'OptionsSpeaker';\n\n    defaultMenuProps.items.push({\n      key: key,\n      title: title,\n      itemType: ContextualMenuItemType.Section,\n      sectionProps: {\n        title: sectionPropsTitle,\n        items: microphones.map((microphone) => ({\n          key: microphone.id,\n          text: microphone.name,\n          title: microphone.name,\n          iconProps: { iconName: iconName, styles: { root: { lineHeight: 0 } } },\n          itemProps: {\n            styles: menuItemStyles\n          },\n          canCheck: true,\n          isChecked: microphone.id === selectedMicrophone?.id,\n          onClick: () => {\n            if (microphone.id !== selectedMicrophone?.id) {\n              onSelectMicrophone(microphone);\n            }\n          }\n        }))\n      }\n    });\n  }\n\n  if (speakers && selectedSpeaker && onSelectSpeaker) {\n    defaultMenuProps.items.push({\n      key: 'sectionSpeaker',\n      title: strings.speakerMenuTooltip,\n      itemType: ContextualMenuItemType.Section,\n      sectionProps: {\n        title: strings.speakerMenuTitle,\n        items: speakers.map((speaker) => ({\n          key: speaker.id,\n          text: speaker.name,\n          title: speaker.name,\n          iconProps: { iconName: 'OptionsSpeaker', styles: { root: { lineHeight: 0 } } },\n          itemProps: {\n            styles: menuItemStyles\n          },\n          canCheck: true,\n          isChecked: speaker.id === selectedSpeaker?.id,\n          onClick: () => {\n            if (speaker.id !== selectedSpeaker?.id) {\n              onSelectSpeaker(speaker);\n            }\n          }\n        }))\n      }\n    });\n  }\n\n  if (defaultMenuProps.items.length === 0) {\n    // Avoids creating an empty context menu.\n    return undefined;\n  }\n  return defaultMenuProps;\n};\n\n/**\n * A button to open a menu that controls device options.\n *\n * Can be used with {@link ControlBar}.\n *\n * @public\n */\nexport const DevicesButton = (props: DevicesButtonProps): JSX.Element => {\n  const { onRenderIcon } = props;\n\n  const localeStrings = useLocale().strings.devicesButton;\n  const strings = { ...localeStrings, ...props.strings };\n\n  const devicesButtonMenu =\n    props.menuProps ?? generateDefaultDeviceMenuProps({ ...props, styles: props.styles?.menuStyles }, strings);\n\n  const onRenderOptionsIcon = (): JSX.Element => {\n    return <_HighContrastAwareIcon disabled={props.disabled} iconName=\"ControlButtonOptions\" />;\n  };\n\n  return (\n    <ControlBarButton\n      {...props}\n      menuProps={devicesButtonMenu}\n      menuIconProps={{ hidden: true }}\n      onRenderIcon={onRenderIcon ?? onRenderOptionsIcon}\n      strings={strings}\n      labelKey={props.labelKey ?? 'devicesButtonLabel'}\n    />\n  );\n};\n\"../../../acs-ui-common/src\""]}
+{"version":3,"file":"DevicesButton.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/DevicesButton.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport {\n  ContextualMenuItemType,\n  IContextualMenuItem,\n  IContextualMenuItemStyles,\n  IContextualMenuProps,\n  IContextualMenuStyles,\n  merge\n} from '@fluentui/react';\nimport React from 'react';\nimport { useLocale } from '../localization';\nimport { ControlBarButton, ControlBarButtonProps, ControlBarButtonStyles } from './ControlBarButton';\nimport { _HighContrastAwareIcon } from './HighContrastAwareIcon';\nimport { buttonFlyoutItemStyles } from './styles/ControlBar.styles';\nimport { _preventDismissOnEvent as preventDismissOnEvent } from '@internal/acs-ui-common';\n\n/**\n * Styles for the {@link DevicesButton} menu.\n *\n * @public\n */\nexport interface DevicesButtonContextualMenuStyles extends IContextualMenuStyles {\n  /**\n   * Styles for the items inside the {@link DevicesButton} button menu.\n   */\n  menuItemStyles?: IContextualMenuItemStyles;\n}\n\n/**\n * Styles for the Devices button menu items.\n *\n * @public\n */\nexport interface DevicesButtonStyles extends ControlBarButtonStyles {\n  /**\n   * Styles for the {@link DevicesButton} menu.\n   */\n  menuStyles?: Partial<DevicesButtonContextualMenuStyles>;\n}\n\n/**\n * A device, e.g. camera, microphone, or speaker, in the {@link DevicesButton} flyout.\n *\n * @public\n */\nexport interface OptionsDevice {\n  /**\n   * Device unique identifier\n   */\n  id: string;\n  /**\n   * Device name\n   */\n  name: string;\n}\n\n/**\n * Strings of {@link DevicesButton} that can be overridden.\n *\n * @public\n */\nexport interface DevicesButtonStrings {\n  /**\n   * Label of button\n   */\n  label: string;\n  /**\n   * Button tooltip content.\n   */\n  tooltipContent?: string;\n  /**\n   * Title of camera menu\n   */\n  cameraMenuTitle: string;\n  /**\n   * Title of microphone menu\n   */\n  microphoneMenuTitle: string;\n  /**\n   * Title of speaker menu\n   */\n  speakerMenuTitle: string;\n  /**\n   * Tooltip of camera menu\n   */\n  cameraMenuTooltip: string;\n  /**\n   * Tooltip of microphone menu\n   */\n  microphoneMenuTooltip: string;\n  /**\n   * Tooltip of speaker menu\n   */\n  speakerMenuTooltip: string;\n}\n\n/**\n * Props for {@link DevicesButton}.\n *\n * @public\n */\nexport interface DevicesButtonProps extends ControlBarButtonProps {\n  /**\n   * Available microphones for selection\n   */\n  microphones?: OptionsDevice[];\n  /**\n   * Available speakers for selection\n   */\n  speakers?: OptionsDevice[];\n  /**\n   * Available cameras for selection\n   */\n  cameras?: OptionsDevice[];\n  /**\n   * Microphone that is shown as currently selected\n   */\n  selectedMicrophone?: OptionsDevice;\n  /**\n   * Speaker that is shown as currently selected\n   */\n  selectedSpeaker?: 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   * Callback when a microphone is selected\n   */\n  onSelectMicrophone?: (device: OptionsDevice) => Promise<void>;\n  /**\n   * Speaker when a speaker is selected\n   */\n  onSelectSpeaker?: (device: OptionsDevice) => Promise<void>;\n  /**\n   * Optional strings to override in component\n   */\n  strings?: Partial<DevicesButtonStrings>;\n  /**\n   * Option to increase the touch targets of the button flyout menu items from 36px to 48px.\n   * Recommended for mobile devices.\n   */\n  styles?: DevicesButtonStyles;\n}\n\n/**\n * Subset props for various buttons that show device selection menus.\n *\n * @private\n */\nexport interface DeviceMenuProps {\n  microphones?: OptionsDevice[];\n  speakers?: OptionsDevice[];\n  cameras?: OptionsDevice[];\n  selectedMicrophone?: OptionsDevice;\n  selectedSpeaker?: OptionsDevice;\n  selectedCamera?: OptionsDevice;\n  onSelectCamera?: (device: OptionsDevice) => Promise<void>;\n  onSelectMicrophone?: (device: OptionsDevice) => Promise<void>;\n  onSelectSpeaker?: (device: OptionsDevice) => Promise<void>;\n  styles?: Partial<DeviceMenuStyles>;\n}\n\n/**\n * Subset of strings for various buttons that show device selection menus.\n *\n * @private\n */\nexport interface DeviceMenuStrings {\n  /**\n   * Title for Camera section in the contextual menu\n   */\n  cameraMenuTitle?: string;\n  /**\n   * Title for Audio Device section in the contextual menu\n   *\n   * @remark Used in place of microphoneMenuTitle when speakers can be enumerated\n   */\n  audioDeviceMenuTitle?: string;\n  /**\n   * Title for Microphone section in the contextual menu\n   *\n   * @remark Used when speakers can be enumerated\n   */\n  microphoneMenuTitle?: string;\n  /**\n   * Title for Speaker section in the contextual menu\n   */\n  speakerMenuTitle?: string;\n  /**\n   * Tooltip label for Camera section in the contextual menu\n   */\n  cameraMenuTooltip?: string;\n  /**\n   * Tooltip label for Audio Device section in the contextual menu\n   *\n   * @remark Used in place of microphoneMenuTooltip when speakers can be enumerated\n   */\n  audioDeviceMenuTooltip?: string;\n  /**\n   * Tooltip label for Microphone section in the contextual menu\n   *\n   * @remark Used when speakers can be enumerated\n   */\n  microphoneMenuTooltip?: string;\n  /**\n   * Tooltip label for Speaker section in the contextual menu\n   */\n  speakerMenuTooltip?: string;\n}\n\n/**\n * Styles for flyouts used by various buttons for device selection flyouts.\n *\n * @private\n */\nexport interface DeviceMenuStyles extends IContextualMenuStyles {\n  menuItemStyles?: IContextualMenuItemStyles;\n}\n\n/**\n * Generates default {@link IContextualMenuProps} for buttons that\n * show a drop-down to select devices to use.\n *\n * @private\n */\nexport const generateDefaultDeviceMenuProps = (\n  props: DeviceMenuProps,\n  strings: DeviceMenuStrings,\n  primaryActionItem?: IContextualMenuItem,\n  isSelectCamAllowed = true,\n  isSelectMicAllowed = true\n): { items: IContextualMenuItem[] } | undefined => {\n  const {\n    microphones,\n    speakers,\n    cameras,\n    selectedMicrophone,\n    selectedSpeaker,\n    selectedCamera,\n    onSelectCamera,\n    onSelectMicrophone,\n    onSelectSpeaker\n  } = props;\n\n  const defaultMenuProps: IContextualMenuProps = {\n    items: [],\n    styles: props.styles,\n    calloutProps: {\n      styles: {\n        root: {\n          // Confine the menu to the parents bounds.\n          // More info: https://github.com/microsoft/fluentui/issues/18835\n          // NB: 95% to keep some space for margin, drop shadow etc around the Callout.\n          maxWidth: '95%'\n        }\n      },\n      preventDismissOnEvent\n    }\n  };\n\n  const menuItemStyles = merge(buttonFlyoutItemStyles, props.styles?.menuItemStyles ?? {});\n\n  if (cameras && selectedCamera && onSelectCamera && isSelectCamAllowed) {\n    defaultMenuProps.items.push({\n      key: 'cameras',\n      itemType: ContextualMenuItemType.Section,\n      sectionProps: {\n        title: strings.cameraMenuTitle,\n        items: [\n          {\n            key: 'sectionCamera',\n            title: strings.cameraMenuTooltip,\n            subMenuProps: {\n              calloutProps: {\n                preventDismissOnEvent\n              },\n              items: cameras.map((camera) => ({\n                key: camera.id,\n                text: camera.name,\n                title: camera.name,\n                itemProps: {\n                  styles: menuItemStyles\n                },\n                canCheck: true,\n                isChecked: camera.id === selectedCamera?.id,\n                onClick: () => {\n                  if (camera.id !== selectedCamera?.id) {\n                    onSelectCamera(camera);\n                  }\n                }\n              }))\n            },\n            text: selectedCamera.name\n          }\n        ]\n      }\n    });\n    if (primaryActionItem) {\n      defaultMenuProps.items.push(primaryActionItem);\n    }\n  }\n\n  if (microphones && selectedMicrophone && onSelectMicrophone && isSelectMicAllowed) {\n    // Set props as Microphone if speakers can be enumerated else set as Audio Device\n    const speakersAvailable = speakers && speakers.length > 0;\n    const key = speakersAvailable ? 'sectionMicrophone' : 'sectionAudioDevice';\n    const title = speakersAvailable ? strings.microphoneMenuTooltip : strings.audioDeviceMenuTooltip;\n\n    defaultMenuProps.items.push({\n      key: 'microphones',\n      itemType: ContextualMenuItemType.Section,\n      sectionProps: {\n        title: strings.microphoneMenuTitle,\n        items: [\n          {\n            key: key,\n            title: title,\n            subMenuProps: {\n              calloutProps: {\n                preventDismissOnEvent\n              },\n              items: microphones.map((microphone) => ({\n                key: microphone.id,\n                text: microphone.name,\n                title: microphone.name,\n                itemProps: {\n                  styles: menuItemStyles\n                },\n                canCheck: true,\n                isChecked: microphone.id === selectedMicrophone?.id,\n                onClick: () => {\n                  if (microphone.id !== selectedMicrophone?.id) {\n                    onSelectMicrophone(microphone);\n                  }\n                }\n              }))\n            },\n            text: selectedMicrophone.name\n          }\n        ]\n      }\n    });\n  }\n\n  if (speakers && selectedSpeaker && onSelectSpeaker) {\n    defaultMenuProps.items.push({\n      key: 'speakers',\n      itemType: ContextualMenuItemType.Section,\n      sectionProps: {\n        title: strings.speakerMenuTitle,\n        items: [\n          {\n            key: 'sectionSpeaker',\n            subMenuProps: {\n              calloutProps: {\n                preventDismissOnEvent\n              },\n              items: speakers.map((speaker) => ({\n                key: speaker.id,\n                text: speaker.name,\n                title: speaker.name,\n                itemProps: {\n                  styles: menuItemStyles\n                },\n                canCheck: true,\n                isChecked: speaker.id === selectedSpeaker?.id,\n                onClick: () => {\n                  if (speaker.id !== selectedSpeaker?.id) {\n                    onSelectSpeaker(speaker);\n                  }\n                }\n              }))\n            },\n            text: selectedSpeaker.name\n          }\n        ]\n      }\n    });\n  }\n  if (microphones && selectedMicrophone && onSelectMicrophone && isSelectMicAllowed && primaryActionItem) {\n    defaultMenuProps.items.push(primaryActionItem);\n  }\n\n  if (defaultMenuProps.items.length === 0) {\n    // Avoids creating an empty context menu.\n    return undefined;\n  }\n  return defaultMenuProps;\n};\n\n/**\n * A button to open a menu that controls device options.\n *\n * Can be used with {@link ControlBar}.\n *\n * @public\n */\nexport const DevicesButton = (props: DevicesButtonProps): JSX.Element => {\n  const { onRenderIcon } = props;\n\n  const localeStrings = useLocale().strings.devicesButton;\n  const strings = { ...localeStrings, ...props.strings };\n\n  const devicesButtonMenu =\n    props.menuProps ?? generateDefaultDeviceMenuProps({ ...props, styles: props.styles?.menuStyles }, strings);\n\n  const onRenderOptionsIcon = (): JSX.Element => {\n    return <_HighContrastAwareIcon disabled={props.disabled} iconName=\"ControlButtonOptions\" />;\n  };\n\n  return (\n    <ControlBarButton\n      {...props}\n      menuProps={devicesButtonMenu}\n      menuIconProps={{ hidden: true }}\n      onRenderIcon={onRenderIcon ?? onRenderOptionsIcon}\n      strings={strings}\n      labelKey={props.labelKey ?? 'devicesButtonLabel'}\n    />\n  );\n};\n\"../../../acs-ui-common/src\""]}

package/dist/dist-esm/react-components/src/components/Drawer/DrawerMenu.d.ts

@@ -26,6 +26,11 @@ export interface _DrawerMenuProps {
      * String to show in heading of drawer menu
      */
     heading?: string;
+    /**
+     * By default, maxHeight value is set to 75%.
+     * Set value to true for no default maxHeight to be applied on drawerSurface
+     */
+    disableMaxHeight?: boolean;
     styles?: _DrawerMenuStyles;
 }
 /**

package/dist/dist-esm/react-components/src/components/Drawer/DrawerMenu.js

@@ -43,7 +43,7 @@ export const _DrawerMenu = (props) => {
             borderTopLeftRadius: borderRadius
         }
     }), [firstItemStyle, borderRadius]);
-    return (React.createElement(_DrawerSurface, { styles: (_b = props.styles) === null || _b === void 0 ? void 0 : _b.drawerSurfaceStyles, onLightDismiss: props.onLightDismiss, heading: props.heading },
+    return (React.createElement(_DrawerSurface, { disableMaxHeight: props.disableMaxHeight, styles: (_b = props.styles) === null || _b === void 0 ? void 0 : _b.drawerSurfaceStyles, onLightDismiss: props.onLightDismiss, heading: props.heading },
         React.createElement(Stack, { styles: props.styles, role: "menu", "data-ui-id": "drawer-menu" }, menuItemsToRender === null || menuItemsToRender === void 0 ? void 0 :
             menuItemsToRender.slice(0, 1).map((item) => (React.createElement(DrawerMenuItem, Object.assign({}, item, { key: '0', styles: modifiedFirstItemStyle, onItemClick: (ev, itemKey) => {
                     onItemClick(item, ev, itemKey);

package/dist/dist-esm/react-components/src/components/Drawer/DrawerMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"DrawerMenu.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/Drawer/DrawerMenu.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE9D,OAAO,EAAE,QAAQ,EAAE,MAAM,mCAAmC,CAAC;AAE7D,OAAO,EAAE,cAAc,EAAwB,MAAM,kBAAkB,CAAC;AACxE,OAAO,EAAE,cAAc,EAAwB,MAAM,iBAAiB,CAAC;AAiCvE;;;;GAIG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,KAAuB,EAAe,EAAE;;IAClE,gGAAgG;IAChG,iGAAiG;IACjG,+EAA+E;IAC/E,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAW,EAAE,CAAC,CAAC;IAErE,6CAA6C;IAC7C,MAAM,iBAAiB,GAAG,OAAO,CAAC,GAAG,EAAE;;QACrC,IAAI,KAAK,GAAuC,KAAK,CAAC,KAAK,CAAC;QAC5D,KAAK,MAAM,UAAU,IAAI,eAAe,EAAE;YACxC,KAAK,GAAG,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,OAAO,KAAK,UAAU,CAAC,0CAAE,YAAY,CAAC;SAC1E;QACD,OAAO,KAAK,CAAC;IACf,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC;IAEnC,oGAAoG;IACpG,kGAAkG;IAClG,MAAM,WAAW,GAAG,WAAW,CAC7B,CACE,IAA0B,EAC1B,EAA6F,EAC7F,OAA4B,EACtB,EAAE;;QACR,IAAI,IAAI,CAAC,YAAY,EAAE;YACrB,kBAAkB,CAAC,CAAC,GAAG,eAAe,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC;SACxD;QAED,MAAA,IAAI,CAAC,WAAW,+CAAhB,IAAI,EAAe,EAAE,EAAE,OAAO,CAAC,CAAC;IAClC,CAAC,EACD,CAAC,eAAe,CAAC,CAClB,CAAC;IAEF,2EAA2E;IAC3E,MAAM,YAAY,GAAG,QAAQ,EAAE,CAAC,OAAO,CAAC,cAAc,CAAC;IACvD,MAAM,cAAc,GAAG,iBAAiB,KAAI,MAAA,iBAAiB,CAAC,CAAC,CAAC,0CAAE,MAAM,CAAA,CAAC;IACzE,MAAM,sBAAsB,GAAG,OAAO,CACpC,GAAG,EAAE,CACH,KAAK,CAAC,cAAc,aAAd,cAAc,cAAd,cAAc,GAAI,EAAE,EAAE;QAC1B,IAAI,EAAE;YACJ,oBAAoB,EAAE,YAAY;YAClC,mBAAmB,EAAE,YAAY;SAClC;KACF,CAAC,EACJ,CAAC,cAAc,EAAE,YAAY,CAAC,CAC/B,CAAC;IAEF,OAAO,CACL,oBAAC,cAAc,IACb,MAAM,EAAE,MAAA,KAAK,CAAC,MAAM,0CAAE,mBAAmB,EACzC,cAAc,EAAE,KAAK,CAAC,cAAc,EACpC,OAAO,EAAE,KAAK,CAAC,OAAO;QAEtB,oBAAC,KAAK,IAAC,MAAM,EAAE,KAAK,CAAC,MAAM,EAAE,IAAI,EAAC,MAAM,gBAAY,aAAa,IAC9D,iBAAiB,aAAjB,iBAAiB;YAAjB,iBAAiB,CAAE,KAAK,CAAC,CAAC,EAAE,CAAC,EAAE,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAC5C,oBAAC,cAAc,oBACT,IAAI,IACR,GAAG,EAAE,GAAG,EACR,MAAM,EAAE,sBAAsB,EAC9B,WAAW,EAAE,CAAC,EAAE,EAAE,OAAO,EAAE,EAAE;oBAC3B,WAAW,CAAC,IAAI,EAAE,EAAE,EAAE,OAAO,CAAC,CAAC;gBACjC,CAAC,IACD,CACH,CAAC,EACD,iBAAiB,aAAjB,iBAAiB;YAAjB,iBAAiB,CAAE,KAAK,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE,CAAC,CAC5C,oBAAC,cAAc,oBACT,IAAI,IACR,GAAG,EAAE,GAAG,CAAC,GAAG,CAAC,EAAE,EACf,WAAW,EAAE,CAAC,EAAE,EAAE,OAAO,EAAE,EAAE;oBAC3B,WAAW,CAAC,IAAI,EAAE,EAAE,EAAE,OAAO,CAAC,CAAC;gBACjC,CAAC,IACD,CACH,CAAC,CACI,CACO,CAClB,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { merge, Stack } from '@fluentui/react';\nimport React, { useCallback, useMemo, useState } from 'react';\nimport { _DrawerSurfaceProps } from '.';\nimport { useTheme } from '../../theming/FluentThemeProvider';\nimport { BaseCustomStyles } from '../../types';\nimport { DrawerMenuItem, _DrawerMenuItemProps } from './DrawerMenuItem';\nimport { _DrawerSurface, _DrawerSurfaceStyles } from './DrawerSurface';\n\n/**\n * Styles for the {@link _DrawerMenu}.\n *\n * @internal\n */\nexport interface _DrawerMenuStyles extends BaseCustomStyles {\n  /** Styles for the {@link DrawerSurface} container. */\n  drawerSurfaceStyles?: _DrawerSurfaceStyles;\n}\n\n/**\n * Props for the {@link _DrawerMenu}\n *\n * @internal\n */\nexport interface _DrawerMenuProps {\n  items: _DrawerMenuItemProps[];\n\n  /**\n   * Callback when the drawer's light-dismissal is triggered.\n   */\n  onLightDismiss: () => void;\n\n  /**\n   * String to show in heading of drawer menu\n   */\n  heading?: string;\n\n  styles?: _DrawerMenuStyles;\n}\n\n/**\n * Takes a set of menu items and returns a created menu inside a {@link _DrawerSurface}.\n *\n * @internal\n */\nexport const _DrawerMenu = (props: _DrawerMenuProps): JSX.Element => {\n  // This component breaks from a pure component pattern in order to internally support sub menus.\n  // When a sub menu item is clicked the menu items displayed is updated to be that of the submenu.\n  // To track this state we store a list of the keys clicked up until this point.\n  const [selectedKeyPath, setSelectedKeyPath] = useState<string[]>([]);\n\n  // Get the menu items that should be rendered\n  const menuItemsToRender = useMemo(() => {\n    let items: _DrawerMenuItemProps[] | undefined = props.items;\n    for (const subMenuKey of selectedKeyPath) {\n      items = items?.find((item) => item.itemKey === subMenuKey)?.subMenuProps;\n    }\n    return items;\n  }, [props.items, selectedKeyPath]);\n\n  // When an item is clicked and it contains a submenu, push the key for the submenu. This will ensure\n  // a new render is triggered, menuItemsToRender will be re-calculated and the submenu will render.\n  const onItemClick = useCallback(\n    (\n      item: _DrawerMenuItemProps,\n      ev?: React.MouseEvent<HTMLElement, MouseEvent> | React.KeyboardEvent<HTMLElement> | undefined,\n      itemKey?: string | undefined\n    ): void => {\n      if (item.subMenuProps) {\n        setSelectedKeyPath([...selectedKeyPath, item.itemKey]);\n      }\n\n      item.onItemClick?.(ev, itemKey);\n    },\n    [selectedKeyPath]\n  );\n\n  // Ensure the first item has a border radius that matches the DrawerSurface\n  const borderRadius = useTheme().effects.roundedCorner4;\n  const firstItemStyle = menuItemsToRender && menuItemsToRender[0]?.styles;\n  const modifiedFirstItemStyle = useMemo(\n    () =>\n      merge(firstItemStyle ?? {}, {\n        root: {\n          borderTopRightRadius: borderRadius,\n          borderTopLeftRadius: borderRadius\n        }\n      }),\n    [firstItemStyle, borderRadius]\n  );\n\n  return (\n    <_DrawerSurface\n      styles={props.styles?.drawerSurfaceStyles}\n      onLightDismiss={props.onLightDismiss}\n      heading={props.heading}\n    >\n      <Stack styles={props.styles} role=\"menu\" data-ui-id=\"drawer-menu\">\n        {menuItemsToRender?.slice(0, 1).map((item) => (\n          <DrawerMenuItem\n            {...item}\n            key={'0'}\n            styles={modifiedFirstItemStyle}\n            onItemClick={(ev, itemKey) => {\n              onItemClick(item, ev, itemKey);\n            }}\n          />\n        ))}\n        {menuItemsToRender?.slice(1).map((item, i) => (\n          <DrawerMenuItem\n            {...item}\n            key={`${i + 1}`}\n            onItemClick={(ev, itemKey) => {\n              onItemClick(item, ev, itemKey);\n            }}\n          />\n        ))}\n      </Stack>\n    </_DrawerSurface>\n  );\n};\n"]}
+{"version":3,"file":"DrawerMenu.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/Drawer/DrawerMenu.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { merge, Stack } from '@fluentui/react';\nimport React, { useCallback, useMemo, useState } from 'react';\nimport { _DrawerSurfaceProps } from '.';\nimport { useTheme } from '../../theming/FluentThemeProvider';\nimport { BaseCustomStyles } from '../../types';\nimport { DrawerMenuItem, _DrawerMenuItemProps } from './DrawerMenuItem';\nimport { _DrawerSurface, _DrawerSurfaceStyles } from './DrawerSurface';\n\n/**\n * Styles for the {@link _DrawerMenu}.\n *\n * @internal\n */\nexport interface _DrawerMenuStyles extends BaseCustomStyles {\n  /** Styles for the {@link DrawerSurface} container. */\n  drawerSurfaceStyles?: _DrawerSurfaceStyles;\n}\n\n/**\n * Props for the {@link _DrawerMenu}\n *\n * @internal\n */\nexport interface _DrawerMenuProps {\n  items: _DrawerMenuItemProps[];\n\n  /**\n   * Callback when the drawer's light-dismissal is triggered.\n   */\n  onLightDismiss: () => void;\n\n  /**\n   * String to show in heading of drawer menu\n   */\n  heading?: string;\n\n  /**\n   * By default, maxHeight value is set to 75%.\n   * Set value to true for no default maxHeight to be applied on drawerSurface\n   */\n  disableMaxHeight?: boolean;\n\n  styles?: _DrawerMenuStyles;\n}\n\n/**\n * Takes a set of menu items and returns a created menu inside a {@link _DrawerSurface}.\n *\n * @internal\n */\nexport const _DrawerMenu = (props: _DrawerMenuProps): JSX.Element => {\n  // This component breaks from a pure component pattern in order to internally support sub menus.\n  // When a sub menu item is clicked the menu items displayed is updated to be that of the submenu.\n  // To track this state we store a list of the keys clicked up until this point.\n  const [selectedKeyPath, setSelectedKeyPath] = useState<string[]>([]);\n\n  // Get the menu items that should be rendered\n  const menuItemsToRender = useMemo(() => {\n    let items: _DrawerMenuItemProps[] | undefined = props.items;\n    for (const subMenuKey of selectedKeyPath) {\n      items = items?.find((item) => item.itemKey === subMenuKey)?.subMenuProps;\n    }\n    return items;\n  }, [props.items, selectedKeyPath]);\n\n  // When an item is clicked and it contains a submenu, push the key for the submenu. This will ensure\n  // a new render is triggered, menuItemsToRender will be re-calculated and the submenu will render.\n  const onItemClick = useCallback(\n    (\n      item: _DrawerMenuItemProps,\n      ev?: React.MouseEvent<HTMLElement, MouseEvent> | React.KeyboardEvent<HTMLElement> | undefined,\n      itemKey?: string | undefined\n    ): void => {\n      if (item.subMenuProps) {\n        setSelectedKeyPath([...selectedKeyPath, item.itemKey]);\n      }\n\n      item.onItemClick?.(ev, itemKey);\n    },\n    [selectedKeyPath]\n  );\n\n  // Ensure the first item has a border radius that matches the DrawerSurface\n  const borderRadius = useTheme().effects.roundedCorner4;\n  const firstItemStyle = menuItemsToRender && menuItemsToRender[0]?.styles;\n  const modifiedFirstItemStyle = useMemo(\n    () =>\n      merge(firstItemStyle ?? {}, {\n        root: {\n          borderTopRightRadius: borderRadius,\n          borderTopLeftRadius: borderRadius\n        }\n      }),\n    [firstItemStyle, borderRadius]\n  );\n\n  return (\n    <_DrawerSurface\n      disableMaxHeight={props.disableMaxHeight}\n      styles={props.styles?.drawerSurfaceStyles}\n      onLightDismiss={props.onLightDismiss}\n      heading={props.heading}\n    >\n      <Stack styles={props.styles} role=\"menu\" data-ui-id=\"drawer-menu\">\n        {menuItemsToRender?.slice(0, 1).map((item) => (\n          <DrawerMenuItem\n            {...item}\n            key={'0'}\n            styles={modifiedFirstItemStyle}\n            onItemClick={(ev, itemKey) => {\n              onItemClick(item, ev, itemKey);\n            }}\n          />\n        ))}\n        {menuItemsToRender?.slice(1).map((item, i) => (\n          <DrawerMenuItem\n            {...item}\n            key={`${i + 1}`}\n            onItemClick={(ev, itemKey) => {\n              onItemClick(item, ev, itemKey);\n            }}\n          />\n        ))}\n      </Stack>\n    </_DrawerSurface>\n  );\n};\n"]}