@azure/communication-react 1.18.0-alpha-202406220013 → 1.18.0-alpha-202406260014

package/dist/dist-esm/react-composites/src/composites/common/ParticipantContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"ParticipantContainer.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/common/ParticipantContainer.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useMemo } from 'react';\nimport {\n  participantListContainerStyle,\n  participantListMobileStyle,\n  participantListStack,\n  participantListStyle,\n  participantListWrapper,\n  displayNameStyles,\n  headingMoreButtonStyles\n} from './styles/ParticipantContainer.styles';\nimport { ParticipantList, ParticipantListProps, ParticipantMenuItemsCallback } from '@internal/react-components';\nimport { FocusZone, Stack, Text, TooltipHost, TooltipOverflowMode, getId, useTheme } from '@fluentui/react';\nimport { DefaultButton, IContextualMenuProps } from '@fluentui/react';\nimport { AvatarPersona, AvatarPersonaDataCallback } from './AvatarPersona';\nimport { useId } from '@fluentui/react-hooks';\nimport { _formatString } from '@internal/acs-ui-common';\n\ntype ParticipantContainerProps = {\n  onFetchParticipantMenuItems?: ParticipantMenuItemsCallback;\n  onFetchAvatarPersonaData?: AvatarPersonaDataCallback;\n  participantListProps: ParticipantListProps;\n  title?: string;\n  isMobile?: boolean;\n};\n\n/**\n * @private\n */\nexport const ParticipantContainer = (props: ParticipantContainerProps): JSX.Element => {\n  const theme = useTheme();\n  const participantListWrapperClassName = useMemo(() => participantListWrapper(theme), [theme]);\n  return (\n    <Stack className={participantListWrapperClassName}>\n      <ParticipantListWithHeading {...props} />\n    </Stack>\n  );\n};\n\n/**\n * @private\n */\nexport const ParticipantListWithHeading = (props: {\n  participantListProps: ParticipantListProps;\n  title?: string;\n  isMobile?: boolean;\n  onFetchAvatarPersonaData?: AvatarPersonaDataCallback;\n  onFetchParticipantMenuItems?: ParticipantMenuItemsCallback;\n  headingMoreButtonAriaLabel?: string;\n  onClickHeadingMoreButton?: () => void;\n  headingMoreButtonMenuProps?: IContextualMenuProps;\n  pinnedParticipants?: string[];\n}): JSX.Element => {\n  const {\n    onFetchAvatarPersonaData,\n    onFetchParticipantMenuItems,\n    title,\n    participantListProps,\n    headingMoreButtonAriaLabel,\n    onClickHeadingMoreButton,\n    headingMoreButtonMenuProps,\n    pinnedParticipants\n  } = props;\n  const subheadingUniqueId = useId();\n  const theme = useTheme();\n  /* @conditional-compile-remove(total-participant-count) */\n  const totalParticipantCount = participantListProps.totalParticipantCount;\n  const tooltipId: string = getId('text-tooltip');\n  const subheadingStyleThemed = useMemo(\n    () => ({\n      root: {\n        color: theme.palette.neutralSecondary,\n        margin: props.isMobile ? '0.5rem 1rem' : '0.5rem',\n        fontSize: theme.fonts.smallPlus.fontSize\n      }\n    }),\n    [theme.palette.neutralSecondary, theme.fonts.smallPlus.fontSize, props.isMobile]\n  );\n\n  return (\n    <Stack className={participantListStack}>\n      <Stack horizontal horizontalAlign=\"space-between\" verticalAlign=\"center\">\n        <Stack.Item grow styles={subheadingStyleThemed} aria-label={title} id={subheadingUniqueId}>\n          {paneTitleTrampoline(\n            title ?? '',\n            /* @conditional-compile-remove(total-participant-count) */ totalParticipantCount\n          )}\n        </Stack.Item>\n        {(onClickHeadingMoreButton ||\n          (headingMoreButtonMenuProps?.items && headingMoreButtonMenuProps.items.length > 0)) && (\n          <Stack.Item>\n            <DefaultButton\n              ariaLabel={headingMoreButtonAriaLabel}\n              styles={headingMoreButtonStyles(theme)}\n              iconProps={{ iconName: 'PeoplePaneMoreButton' }}\n              onClick={onClickHeadingMoreButton ? () => onClickHeadingMoreButton() : undefined}\n              menuProps={props.onClickHeadingMoreButton ? undefined : props.headingMoreButtonMenuProps}\n              onRenderMenuIcon={() => null}\n            />\n          </Stack.Item>\n        )}\n      </Stack>\n      <FocusZone className={participantListContainerStyle} shouldFocusOnMount={true}>\n        <ParticipantList\n          {...participantListProps}\n          pinnedParticipants={pinnedParticipants}\n          styles={props.isMobile ? participantListMobileStyle : participantListStyle}\n          onRenderAvatar={(userId, options) => (\n            <>\n              <AvatarPersona\n                data-ui-id=\"chat-composite-participant-custom-avatar\"\n                userId={userId}\n                {...options}\n                {...{ hidePersonaDetails: !!options?.text }}\n                dataProvider={onFetchAvatarPersonaData}\n                allowActiveBorder={true}\n              />\n              {options?.text && (\n                <div style={displayNameStyles}>\n                  <TooltipHost content={options?.text} id={tooltipId} overflowMode={TooltipOverflowMode.Parent}>\n                    <Text nowrap={false} aria-labelledby={tooltipId}>\n                      {options?.text}\n                    </Text>\n                  </TooltipHost>\n                </div>\n              )}\n            </>\n          )}\n          onFetchParticipantMenuItems={onFetchParticipantMenuItems}\n          showParticipantOverflowTooltip={!props.isMobile}\n          participantAriaLabelledBy={subheadingUniqueId}\n        />\n      </FocusZone>\n    </Stack>\n  );\n};\n\nconst paneTitleTrampoline = (paneTitle: string, totalParticipantCount?: number): string => {\n  const participantCountString = totalParticipantCount\n    ? { numberOfPeople: `(${totalParticipantCount})` }\n    : { numberOfPeople: ' ' };\n  return _formatString(paneTitle, participantCountString);\n};\n"]}
+{"version":3,"file":"ParticipantContainer.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/common/ParticipantContainer.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useMemo } from 'react';\nimport {\n  participantListContainerStyle,\n  participantListMobileStyle,\n  participantListStack,\n  participantListStyle,\n  participantListWrapper,\n  displayNameStyles,\n  headingMoreButtonStyles\n} from './styles/ParticipantContainer.styles';\nimport { ParticipantList, ParticipantListProps, ParticipantMenuItemsCallback } from '@internal/react-components';\nimport { FocusZone, Stack, Text, TooltipHost, TooltipOverflowMode, getId, useTheme } from '@fluentui/react';\nimport { DefaultButton, IContextualMenuProps } from '@fluentui/react';\nimport { AvatarPersona, AvatarPersonaDataCallback } from './AvatarPersona';\nimport { useId } from '@fluentui/react-hooks';\nimport { _formatString } from '@internal/acs-ui-common';\n\ntype ParticipantContainerProps = {\n  onFetchParticipantMenuItems?: ParticipantMenuItemsCallback;\n  onFetchAvatarPersonaData?: AvatarPersonaDataCallback;\n  participantListProps: ParticipantListProps;\n  title?: string;\n  isMobile?: boolean;\n};\n\n/**\n * @private\n */\nexport const ParticipantContainer = (props: ParticipantContainerProps): JSX.Element => {\n  const theme = useTheme();\n  const participantListWrapperClassName = useMemo(() => participantListWrapper(theme), [theme]);\n  return (\n    <Stack className={participantListWrapperClassName}>\n      <ParticipantListWithHeading {...props} />\n    </Stack>\n  );\n};\n\n/**\n * @private\n */\nexport const ParticipantListWithHeading = (props: {\n  participantListProps: ParticipantListProps;\n  title?: string;\n  isMobile?: boolean;\n  onFetchAvatarPersonaData?: AvatarPersonaDataCallback;\n  onFetchParticipantMenuItems?: ParticipantMenuItemsCallback;\n  headingMoreButtonAriaLabel?: string;\n  onClickHeadingMoreButton?: () => void;\n  headingMoreButtonMenuProps?: IContextualMenuProps;\n  pinnedParticipants?: string[];\n}): JSX.Element => {\n  const {\n    onFetchAvatarPersonaData,\n    onFetchParticipantMenuItems,\n    title,\n    participantListProps,\n    headingMoreButtonAriaLabel,\n    onClickHeadingMoreButton,\n    headingMoreButtonMenuProps,\n    pinnedParticipants\n  } = props;\n  const subheadingUniqueId = useId();\n  const theme = useTheme();\n  /* @conditional-compile-remove(total-participant-count) */\n  const totalParticipantCount = participantListProps.totalParticipantCount;\n  const tooltipId: string = getId('text-tooltip');\n  const subheadingStyleThemed = useMemo(\n    () => ({\n      root: {\n        color: theme.palette.neutralSecondary,\n        margin: props.isMobile ? '0.5rem 1rem' : '0.5rem',\n        fontSize: theme.fonts.smallPlus.fontSize\n      }\n    }),\n    [theme.palette.neutralSecondary, theme.fonts.smallPlus.fontSize, props.isMobile]\n  );\n\n  return (\n    <Stack className={participantListStack}>\n      <Stack horizontal horizontalAlign=\"space-between\" verticalAlign=\"center\">\n        <Stack.Item grow styles={subheadingStyleThemed} aria-label={title} id={subheadingUniqueId}>\n          {paneTitleTrampoline(\n            title ?? '',\n            /* @conditional-compile-remove(total-participant-count) */ totalParticipantCount\n          )}\n        </Stack.Item>\n        {(onClickHeadingMoreButton ||\n          (headingMoreButtonMenuProps?.items && headingMoreButtonMenuProps.items.length > 0)) && (\n          <Stack.Item>\n            <DefaultButton\n              data-ui-id=\"people-pane-header-more-button\"\n              ariaLabel={headingMoreButtonAriaLabel}\n              styles={headingMoreButtonStyles(theme)}\n              iconProps={{ iconName: 'PeoplePaneMoreButton' }}\n              onClick={onClickHeadingMoreButton ? () => onClickHeadingMoreButton() : undefined}\n              menuProps={props.onClickHeadingMoreButton ? undefined : props.headingMoreButtonMenuProps}\n              onRenderMenuIcon={() => null}\n            />\n          </Stack.Item>\n        )}\n      </Stack>\n      <FocusZone className={participantListContainerStyle} shouldFocusOnMount={true}>\n        <ParticipantList\n          {...participantListProps}\n          pinnedParticipants={pinnedParticipants}\n          styles={props.isMobile ? participantListMobileStyle : participantListStyle}\n          onRenderAvatar={(userId, options) => (\n            <>\n              <AvatarPersona\n                data-ui-id=\"chat-composite-participant-custom-avatar\"\n                userId={userId}\n                {...options}\n                {...{ hidePersonaDetails: !!options?.text }}\n                dataProvider={onFetchAvatarPersonaData}\n                allowActiveBorder={true}\n              />\n              {options?.text && (\n                <div style={displayNameStyles}>\n                  <TooltipHost content={options?.text} id={tooltipId} overflowMode={TooltipOverflowMode.Parent}>\n                    <Text nowrap={false} aria-labelledby={tooltipId}>\n                      {options?.text}\n                    </Text>\n                  </TooltipHost>\n                </div>\n              )}\n            </>\n          )}\n          onFetchParticipantMenuItems={onFetchParticipantMenuItems}\n          showParticipantOverflowTooltip={!props.isMobile}\n          participantAriaLabelledBy={subheadingUniqueId}\n        />\n      </FocusZone>\n    </Stack>\n  );\n};\n\nconst paneTitleTrampoline = (paneTitle: string, totalParticipantCount?: number): string => {\n  const participantCountString = totalParticipantCount\n    ? { numberOfPeople: `(${totalParticipantCount})` }\n    : { numberOfPeople: ' ' };\n  return _formatString(paneTitle, participantCountString);\n};\n"]}

package/dist/dist-esm/react-composites/src/composites/common/types/CommonCallControlOptions.d.ts

@@ -38,6 +38,10 @@ export type CommonCallControlOptions = {
          * @defaultValue false
          */
         hangUpForEveryone?: false | 'endCallOptions';
+        /**
+         * Wether to disable the end call confirmation modal.
+         */
+        disableEndCallModal?: boolean;
     };
     /**
      * Show or Hide Microphone button during a call.

package/dist/dist-esm/react-composites/src/composites/common/types/CommonCallControlOptions.js.map

@@ -1 +1 @@
-{"version":3,"file":"CommonCallControlOptions.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/common/types/CommonCallControlOptions.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { CustomCallControlButtonCallback } from '../ControlBar/CustomButton';\n\n/**\n * Control bar display type for {@link CallComposite}.\n *\n * @public\n */\nexport type CallControlDisplayType = 'default' | 'compact';\n\n/**\n * Customization options for the control bar in calling experience.\n *\n * @public\n */\nexport type CommonCallControlOptions = {\n  /**\n   * {@link CallControlDisplayType} to change how the call controls are displayed.\n   * `'compact'` display type will decreases the size of buttons and hide the labels.\n   *\n   * @remarks\n   * If the composite `formFactor` is set to `'mobile'`, the control bar will always use compact view.\n   *\n   * @defaultValue 'default'\n   */\n  displayType?: CallControlDisplayType;\n  /**\n   * Show or Hide Camera Button during a call\n   * @defaultValue true\n   */\n  cameraButton?:\n    | boolean\n    | /* @conditional-compile-remove(PSTN-calls) */ {\n        disabled: boolean;\n      };\n  /**\n   * Show or Hide EndCall button during a call.\n   * @defaultValue true\n   */\n  endCallButton?:\n    | boolean\n    | /* @conditional-compile-remove(end-call-options) */ {\n        /**\n         * whether to make end call button to trigger a menu, which will enable end call for everybody functionality.\n         * @defaultValue false\n         */\n        hangUpForEveryone?: false | 'endCallOptions';\n      };\n  /**\n   * Show or Hide Microphone button during a call.\n   * @defaultValue true\n   */\n  microphoneButton?:\n    | boolean\n    | /* @conditional-compile-remove(PSTN-calls) */ {\n        disabled: boolean;\n      };\n  /**\n   * Show or Hide Devices button during a call.\n   * @defaultValue true\n   */\n  devicesButton?:\n    | boolean\n    | /* @conditional-compile-remove(PSTN-calls) */ {\n        disabled: boolean;\n      };\n  /**\n   * Show, Hide or Disable participants button during a call.\n   * @defaultValue true\n   */\n  participantsButton?: boolean | { disabled: boolean };\n  /**\n   * Show, Hide or Disable the screen share button during a call.\n   * @defaultValue true\n   */\n  screenShareButton?: boolean | { disabled: boolean };\n  /**\n   * Show, Hide or disable the more button during a call.\n   * @defaultValue true\n   */\n  moreButton?: boolean;\n  /**\n   * Show, Hide or Disable the screen share button during a call.\n   * @defaultValue true\n   */\n  raiseHandButton?: boolean | { disabled: boolean };\n  /**\n   * Show, Hide or Disable the reaction button during a call.\n   * @defaultValue true\n   */\n  reactionButton?: boolean | { disabled: boolean };\n  /**\n   * Inject custom buttons in the call controls.\n   */\n  onFetchCustomButtonProps?: CustomCallControlButtonCallback[];\n  /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\n  holdButton?: boolean | { disabled: boolean };\n  /**\n   * Show or hide the people button in the composite control bar.\n   * @defaultValue true\n   */\n  peopleButton?: boolean | /* @conditional-compile-remove(PSTN-calls) */ { disabled: boolean };\n  /**\n   * Show or hide the dialpad button in the composite control bar.\n   */\n  dtmfDialerButton?: boolean | { disabled: boolean };\n  /**\n   * Show or hide the exit spotlight button in the composite control bar when local participant is spotlighted.\n   */\n  exitSpotlightButton?: boolean;\n  /* @conditional-compile-remove(acs-close-captions) */\n  /**\n   * Show, Hide or Disable captions during a call.\n   * @defaultValue true\n   */\n  captionsButton?: boolean;\n  /* @conditional-compile-remove(teams-meeting-conference) */\n  /**\n   * Show, meeting conference phone information.\n   * @defaultValue true\n   */\n  teamsMeetingPhoneCallButton?: boolean;\n};\n"]}
+{"version":3,"file":"CommonCallControlOptions.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/common/types/CommonCallControlOptions.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { CustomCallControlButtonCallback } from '../ControlBar/CustomButton';\n\n/**\n * Control bar display type for {@link CallComposite}.\n *\n * @public\n */\nexport type CallControlDisplayType = 'default' | 'compact';\n\n/**\n * Customization options for the control bar in calling experience.\n *\n * @public\n */\nexport type CommonCallControlOptions = {\n  /**\n   * {@link CallControlDisplayType} to change how the call controls are displayed.\n   * `'compact'` display type will decreases the size of buttons and hide the labels.\n   *\n   * @remarks\n   * If the composite `formFactor` is set to `'mobile'`, the control bar will always use compact view.\n   *\n   * @defaultValue 'default'\n   */\n  displayType?: CallControlDisplayType;\n  /**\n   * Show or Hide Camera Button during a call\n   * @defaultValue true\n   */\n  cameraButton?:\n    | boolean\n    | /* @conditional-compile-remove(PSTN-calls) */ {\n        disabled: boolean;\n      };\n  /**\n   * Show or Hide EndCall button during a call.\n   * @defaultValue true\n   */\n  endCallButton?:\n    | boolean\n    | /* @conditional-compile-remove(end-call-options) */ {\n        /**\n         * whether to make end call button to trigger a menu, which will enable end call for everybody functionality.\n         * @defaultValue false\n         */\n        hangUpForEveryone?: false | 'endCallOptions';\n        /**\n         * Wether to disable the end call confirmation modal.\n         */\n        disableEndCallModal?: boolean;\n      };\n  /**\n   * Show or Hide Microphone button during a call.\n   * @defaultValue true\n   */\n  microphoneButton?:\n    | boolean\n    | /* @conditional-compile-remove(PSTN-calls) */ {\n        disabled: boolean;\n      };\n  /**\n   * Show or Hide Devices button during a call.\n   * @defaultValue true\n   */\n  devicesButton?:\n    | boolean\n    | /* @conditional-compile-remove(PSTN-calls) */ {\n        disabled: boolean;\n      };\n  /**\n   * Show, Hide or Disable participants button during a call.\n   * @defaultValue true\n   */\n  participantsButton?: boolean | { disabled: boolean };\n  /**\n   * Show, Hide or Disable the screen share button during a call.\n   * @defaultValue true\n   */\n  screenShareButton?: boolean | { disabled: boolean };\n  /**\n   * Show, Hide or disable the more button during a call.\n   * @defaultValue true\n   */\n  moreButton?: boolean;\n  /**\n   * Show, Hide or Disable the screen share button during a call.\n   * @defaultValue true\n   */\n  raiseHandButton?: boolean | { disabled: boolean };\n  /**\n   * Show, Hide or Disable the reaction button during a call.\n   * @defaultValue true\n   */\n  reactionButton?: boolean | { disabled: boolean };\n  /**\n   * Inject custom buttons in the call controls.\n   */\n  onFetchCustomButtonProps?: CustomCallControlButtonCallback[];\n  /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\n  holdButton?: boolean | { disabled: boolean };\n  /**\n   * Show or hide the people button in the composite control bar.\n   * @defaultValue true\n   */\n  peopleButton?: boolean | /* @conditional-compile-remove(PSTN-calls) */ { disabled: boolean };\n  /**\n   * Show or hide the dialpad button in the composite control bar.\n   */\n  dtmfDialerButton?: boolean | { disabled: boolean };\n  /**\n   * Show or hide the exit spotlight button in the composite control bar when local participant is spotlighted.\n   */\n  exitSpotlightButton?: boolean;\n  /* @conditional-compile-remove(acs-close-captions) */\n  /**\n   * Show, Hide or Disable captions during a call.\n   * @defaultValue true\n   */\n  captionsButton?: boolean;\n  /* @conditional-compile-remove(teams-meeting-conference) */\n  /**\n   * Show, meeting conference phone information.\n   * @defaultValue true\n   */\n  teamsMeetingPhoneCallButton?: boolean;\n};\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@azure/communication-react",
-  "version": "1.18.0-alpha-202406220013",
+  "version": "1.18.0-alpha-202406260014",
   "sideEffects": false,
   "description": "React library for building modern communication user experiences utilizing Azure Communication Services",
   "keywords": [
@@ -28,18 +28,18 @@
     "@azure/logger": "^1.0.4",
     "@fluentui/react-components": "^9.47.3",
     "@fluentui/react": "^8.117.1",
-    "@fluentui/react-file-type-icons": "8.11.9",
+    "@fluentui/react-file-type-icons": "8.11.16",
     "@fluentui/react-hooks": "^8.7.0",
-    "@fluentui/react-icons": "^2.0.239",
-    "@fluentui/react-window-provider": "^2.2.21",
+    "@fluentui/react-icons": "^2.0.245",
+    "@fluentui/react-window-provider": "^2.2.27",
     "@fluentui-contrib/react-chat": "0.1.9",
-    "@griffel/react": "^1.5.22",
+    "@griffel/react": "^1.5.23",
     "copy-to-clipboard": "^3.3.1",
     "dompurify": "^3.1.5",
     "events": "^3.3.0",
     "html-react-parser": "^5.1.10",
     "immer": "10.1.1",
-    "libphonenumber-js": "^1.11.3",
+    "libphonenumber-js": "^1.11.4",
     "memoize-one": "^5.2.1",
     "nanoid": "3.3.6",
     "react-linkify": "^1.0.0-alpha",