@azure/communication-react 1.22.0-beta.1 → 1.22.0

package/dist/dist-esm/react-composites/src/composites/ChatComposite/file-sharing/AttachmentUploadButton.js

@@ -1,67 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-import { IconButton, mergeStyles, Stack, TooltipHost, useTheme } from '@fluentui/react';
-import React from 'react';
-import { ChatCompositeIcon } from '../../common/icons';
-import { useLocale } from '../../localization';
-/**
- * @internal
- */
-export const AttachmentUploadButton = (props) => {
-    const inputRef = React.useRef(null);
-    const theme = useTheme();
-    // default supportedMediaTypes is ['*'], meaning all media types are supported.
-    // default disableMultipleUploads is false, meaning multiple files can be selected.
-    const { supportedMediaTypes = ['*'], disableMultipleUploads = false, onChange } = props;
-    const attachmentUploadButtonClassName = mergeStyles({
-        width: '1.5rem',
-        height: '1.5rem',
-        cursor: 'pointer',
-        padding: '0.15rem',
-        ':hover': {
-            backgroundColor: theme.palette.neutralLighter
-        }
-    });
-    const iconButtonClassName = mergeStyles({
-        color: 'unset',
-        width: '1.5rem',
-        height: '1.5rem',
-        ':hover': {
-            color: 'unset',
-            background: 'transparent'
-        }
-    });
-    return React.createElement(React.Fragment, null,
-        React.createElement(Stack, { verticalAlign: "center", horizontalAlign: "center", className: attachmentUploadButtonClassName, onClick: () => {
-                var _a;
-                (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.click();
-            } },
-            React.createElement(TooltipHost, { content: uploadAttachmentButtonStringTrampoline(), "data-ui-id": "chat-composite-message-tooltip" },
-                React.createElement(IconButton, { className: iconButtonClassName, ariaLabel: uploadAttachmentButtonStringTrampoline(), autoFocus: false },
-                    React.createElement(SendBoxAttachFileIconTrampoline, null)))),
-        React.createElement("input", { "data-testid": "attachment-upload-button", ref: inputRef, autoFocus: false, hidden: true, multiple: !disableMultipleUploads, accept: supportedMediaTypes.join(','), type: "file", onClick: e => {
-                // To ensure that `onChange` is fired even if the same file is picked again.
-                e.currentTarget.value = '';
-            }, onChange: e => {
-                onChange && onChange(e.currentTarget.files);
-            } }));
-};
-const SendBoxAttachFileIconTrampoline = () => {
-    return React.createElement(ChatCompositeIcon, { iconName: "SendBoxAttachFile" });
-    // Return _some_ available icon, as the real icon is beta-only.
-    return React.createElement(ChatCompositeIcon, { iconName: "EditBoxCancel" });
-};
-/**
- * A wrapper to return {@link AttachmentUploadButton} component conditionally.
- * It will return `<></>` for stable builds.
- * @internal
- */
-export const AttachmentUploadButtonWrapper = (props) => {
-    return React.createElement(React.Fragment, null, React.createElement(AttachmentUploadButton, Object.assign({}, props)));
-};
-const uploadAttachmentButtonStringTrampoline = () => {
-    //eslint-disable-next-line react-hooks/rules-of-hooks
-    return useLocale().strings.chat.uploadAttachment;
-    return '';
-};
-//# sourceMappingURL=AttachmentUploadButton.js.map

package/dist/dist-esm/react-composites/src/composites/ChatComposite/file-sharing/AttachmentUploadButton.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"AttachmentUploadButton.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-composites/src/composites/ChatComposite/file-sharing/AttachmentUploadButton.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\nimport { IconButton, mergeStyles, Stack, TooltipHost, useTheme } from '@fluentui/react';\nimport React from 'react';\nimport { ChatCompositeIcon } from '../../common/icons';\nimport { useLocale } from '../../localization';\n/**\n * Props for {@link AttachmentUploadButton} component.\n * @internal\n */\nexport interface AttachmentUploadButtonProps {\n  /**\n   * A list of strings containing the comma separated list of supported media (aka. mime) types.\n   * i.e. ['image/*', 'video/*', 'audio/*']\n   * Default value is `['*']`, meaning all media types are supported.\n   * Similar to the `accept` attribute of the `<input type=\"file\" />` element.\n   */\n  supportedMediaTypes?: string[];\n  /**\n   * Disable multiple files to be selected if set to `true`.\n   * Default value is `false`, meaning multiple files can be selected.\n   * Similar to the `multiple` attribute of the `<input type=\"file\" />` element.\n   */\n  disableMultipleUploads?: boolean;\n  /**\n   * onChange handler for the attachment upload button.\n   * Similar to the `onChange` attribute of the `<input type=\"file\" />` element.\n   * Called every time files are selected through the attachment upload button with a {@link FileList}\n   * of selected files.\n   */\n  onChange?: (files: FileList | null) => void;\n}\n/**\n * @internal\n */\nexport const AttachmentUploadButton = (props: AttachmentUploadButtonProps): JSX.Element => {\n  const inputRef = React.useRef<HTMLInputElement>(null);\n  const theme = useTheme();\n  // default supportedMediaTypes is ['*'], meaning all media types are supported.\n  // default disableMultipleUploads is false, meaning multiple files can be selected.\n  const {\n    supportedMediaTypes = ['*'],\n    disableMultipleUploads = false,\n    onChange\n  } = props;\n  const attachmentUploadButtonClassName = mergeStyles({\n    width: '1.5rem',\n    height: '1.5rem',\n    cursor: 'pointer',\n    padding: '0.15rem',\n    ':hover': {\n      backgroundColor: theme.palette.neutralLighter\n    }\n  });\n  const iconButtonClassName = mergeStyles({\n    color: 'unset',\n    width: '1.5rem',\n    height: '1.5rem',\n    ':hover': {\n      color: 'unset',\n      background: 'transparent'\n    }\n  });\n  return <>\n      <Stack verticalAlign=\"center\" horizontalAlign=\"center\" className={attachmentUploadButtonClassName} onClick={() => {\n      inputRef.current?.click();\n    }}>\n        <TooltipHost content={uploadAttachmentButtonStringTrampoline()} data-ui-id=\"chat-composite-message-tooltip\">\n          <IconButton className={iconButtonClassName} ariaLabel={uploadAttachmentButtonStringTrampoline()} autoFocus={false}>\n            <SendBoxAttachFileIconTrampoline />\n          </IconButton>\n        </TooltipHost>\n      </Stack>\n      <input data-testid=\"attachment-upload-button\" ref={inputRef} autoFocus={false} hidden multiple={!disableMultipleUploads} accept={supportedMediaTypes.join(',')} type=\"file\" onClick={e => {\n      // To ensure that `onChange` is fired even if the same file is picked again.\n      e.currentTarget.value = '';\n    }} onChange={e => {\n      onChange && onChange(e.currentTarget.files);\n    }} />\n    </>;\n};\nconst SendBoxAttachFileIconTrampoline = (): JSX.Element => {\n  return <ChatCompositeIcon iconName=\"SendBoxAttachFile\" />;\n  // Return _some_ available icon, as the real icon is beta-only.\n  return <ChatCompositeIcon iconName=\"EditBoxCancel\" />;\n};\n/**\n * A wrapper to return {@link AttachmentUploadButton} component conditionally.\n * It will return `<></>` for stable builds.\n * @internal\n */\nexport const AttachmentUploadButtonWrapper = (props: Pick<AttachmentUploadButtonProps, 'supportedMediaTypes' | 'disableMultipleUploads' | 'onChange'>): JSX.Element => {\n  return <>\n      {<AttachmentUploadButton {...props} />}\n    </>;\n};\nconst uploadAttachmentButtonStringTrampoline = (): string => {\n  //eslint-disable-next-line react-hooks/rules-of-hooks\n  return useLocale().strings.chat.uploadAttachment;\n  return '';\n};"]}

package/dist/dist-esm/react-composites/src/composites/ChatComposite/file-sharing/index.d.ts

@@ -1,5 +0,0 @@
-export * from './AttachmentUpload';
-export * from './AttachmentUploadButton';
-export type { AttachmentOptions, AttachmentUploadTask, AttachmentUploadOptions, AttachmentRemovalHandler, AttachmentMetadataWrapper, AttachmentSelectionHandler, AttachmentActionHandler } from "../../../../../react-components/src";
-export type { AttachmentDownloadOptions } from "../../../../../react-components/src";
-//# sourceMappingURL=index.d.ts.map

package/dist/dist-esm/react-composites/src/composites/ChatComposite/file-sharing/index.js

@@ -1,5 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-export * from './AttachmentUpload';
-export * from './AttachmentUploadButton';
-//# sourceMappingURL=index.js.map

package/dist/dist-esm/react-composites/src/composites/ChatComposite/file-sharing/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-composites/src/composites/ChatComposite/file-sharing/index.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,cAAc,oBAAoB,CAAC;AACnC,cAAc,0BAA0B,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nexport * from './AttachmentUpload';\nexport * from './AttachmentUploadButton';\nexport type { AttachmentOptions, AttachmentUploadTask, AttachmentUploadOptions, AttachmentRemovalHandler, AttachmentMetadataWrapper, AttachmentSelectionHandler, AttachmentActionHandler } from '@internal/react-components';\nexport type { AttachmentDownloadOptions } from '@internal/react-components';"]}

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

@@ -1 +0,0 @@
-{"version":3,"file":"CaptionsBanner.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-composites/src/composites/common/CaptionsBanner.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AACzD,OAAO,EAAE,eAAe,EAA+C,yCAAmC;AAE1G,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACrD,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AACtE,OAAO,EAAE,kBAAkB,EAAE,MAAM,2CAA2C,CAAC;AAC/E,OAAO,EAAE,WAAW,EAAE,MAAM,oCAAoC,CAAC;AACjE,OAAO,EAAE,uBAAuB,EAAE,mDAA6C;AAC/E,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,aAAa,EAA6B,MAAM,iBAAiB,CAAC;AAE3E,MAAM,qBAAqB,GAAG,KAAK,CAAC;AAEpC,eAAe;AACf,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,KAS9B,EAAe,EAAE;;IAChB,MAAM,mBAAmB,GAAG,kBAAkB,CAAC,uBAAuB,CAAC,CAAC;IACxE,MAAM,QAAQ,GAAG,WAAW,CAAC,eAAe,CAAC,CAAC;IAC9C,MAAM,CAAC,sBAAsB,EAAE,yBAAyB,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,CAAC;IACrF,MAAM,uBAAuB,GAAG,GAAS,EAAE;QACzC,yBAAyB,CAAC,IAAI,CAAC,CAAC;IAClC,CAAC,CAAC;IACF,MAAM,yBAAyB,GAAG,GAAS,EAAE;QAC3C,yBAAyB,CAAC,KAAK,CAAC,CAAC;IACnC,CAAC,CAAC;IACF,MAAM,kBAAkB,GAAG,WAAW,CAAC,CAAA,MAAA,KAAK,CAAC,eAAe,0CAAE,MAAM,MAAK,MAAM,CAAC,CAAC,CAAC,WAAW,CAAC;QAC5F,QAAQ,EAAE,UAAU;QACpB,MAAM,EAAE,MAAM;QACd,KAAK,EAAE,MAAM;KACd,CAAC,CAAC,CAAC,CAAC;QACH,QAAQ,EAAE,UAAU;KACrB,CAAC,CAAC;IACH,MAAM,sBAAsB,GAAG,WAAW,CAAC;QACzC,QAAQ,EAAE,UAAU;QACpB,KAAK,EAAE,CAAC;QACR,GAAG,EAAE,CAAC;KACP,CAAC,CAAC;IACH,MAAM,OAAO,GAAG,SAAS,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC;IACzC,MAAM,qBAAqB,GAA2B;QACpD,yBAAyB,EAAE,OAAO,CAAC,yBAAyB;KAC7D,CAAC;IACF,MAAM,cAAc,GAAG,WAAW,CAAC,CAAC,MAAe,EAAE,OAA6B,EAAE,EAAE;QACpF,OAAO,oBAAC,aAAa,kBAAC,MAAM,EAAE,MAAM,IAAM,OAAO,IAAE,YAAY,EAAE,KAAK,CAAC,wBAAwB,IAAI,CAAC;IACtG,CAAC,EAAE,CAAC,KAAK,CAAC,wBAAwB,CAAC,CAAC,CAAC;IACrC,MAAM,EACJ,UAAU,EAAE,KAAK,EAClB,GAAG,MAAM,CAAC;IACX,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACtD,SAAS,CAAC,GAAG,EAAE;QACb,SAAS,YAAY;YACnB,cAAc,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC;QACpC,CAAC;QACD,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;QAChD,OAAO,GAAG,EAAE,CAAC,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;IAClE,CAAC,EAAE,EAAE,CAAC,CAAC;IACP,MAAM,sBAAsB,GAAG,WAAW,GAAG,GAAG,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC;IACnE,OAAO;QACF,sBAAsB,IAAI,oBAAC,qBAAqB,IAAC,yBAAyB,EAAE,sBAAsB,EAAE,yBAAyB,EAAE,yBAAyB,EAAE,qBAAqB,EAAE,KAAK,CAAC,gBAAgB,GAAI;QAC3M,6BAAK,SAAS,EAAE,kBAAkB;YAC/B,oBAAC,KAAK,IAAC,eAAe,EAAC,QAAQ;gBAC7B,oBAAC,KAAK,CAAC,IAAI,IAAC,KAAK,EAAE;wBACrB,KAAK,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,sBAAsB;qBACvE;oBACK,oBAAC,eAAe,oBAAK,mBAAmB,EAAM,QAAQ,IAAE,eAAe,EAAE,KAAK,CAAC,eAAe,EAAE,cAAc,EAAE,cAAc,EAAE,UAAU,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,EAAE,OAAO,EAAE,qBAAqB,IAAI,CAC3M,CACP;YACP,CAAC,KAAK,CAAC,QAAQ,IAAI,mBAAmB,CAAC,YAAY,IAAI,6BAAK,SAAS,EAAE,sBAAsB;gBAC1F,oBAAC,wBAAwB,IAAC,uBAAuB,EAAE,uBAAuB,EAAE,cAAc,EAAE,KAAK,CAAC,cAAc,GAAI,CAChH,CACJ,CACP,CAAC;AACR,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\nimport { useState, useEffect, useCallback } from 'react';\nimport { _CaptionsBanner, _CaptionsBannerStrings, CustomAvatarOptions } from '@internal/react-components';\nimport { _DrawerMenu, _DrawerMenuItemProps, _DrawerSurface } from '@internal/react-components';\nimport { mergeStyles, Stack } from '@fluentui/react';\nimport { CaptionsSettingsModal } from './CaptionsSettingsModal';\nimport { CaptionsBannerMoreButton } from './CaptionsBannerMoreButton';\nimport { useAdaptedSelector } from '../CallComposite/hooks/useAdaptedSelector';\nimport { useHandlers } from '../CallComposite/hooks/useHandlers';\nimport { _captionsBannerSelector } from '@internal/calling-component-bindings';\nimport { useLocale } from '../localization';\nimport { AvatarPersona, AvatarPersonaDataCallback } from './AvatarPersona';\nimport { FocusableElement } from './types/FocusableElement';\nconst mobileViewBannerWidth = '90%';\n\n/** @private */\nexport const CaptionsBanner = (props: {\n  isMobile: boolean;\n  useTeamsCaptions?: boolean;\n  onFetchAvatarPersonaData?: AvatarPersonaDataCallback;\n  captionsOptions?: {\n    height: 'full' | 'default';\n  };\n  /** Element to return focus to when the Captions Banner is closed */\n  returnFocusRef?: React.RefObject<FocusableElement>;\n}): JSX.Element => {\n  const captionsBannerProps = useAdaptedSelector(_captionsBannerSelector);\n  const handlers = useHandlers(_CaptionsBanner);\n  const [isCaptionsSettingsOpen, setIsCaptionsSettingsOpen] = useState<boolean>(false);\n  const onClickCaptionsSettings = (): void => {\n    setIsCaptionsSettingsOpen(true);\n  };\n  const onDismissCaptionsSettings = (): void => {\n    setIsCaptionsSettingsOpen(false);\n  };\n  const containerClassName = mergeStyles(props.captionsOptions?.height === 'full' ? mergeStyles({\n    position: 'absolute',\n    height: '100%',\n    width: '100%'\n  }) : {\n    position: 'relative'\n  });\n  const floatingChildClassName = mergeStyles({\n    position: 'absolute',\n    right: 0,\n    top: 0\n  });\n  const strings = useLocale().strings.call;\n  const captionsBannerStrings: _CaptionsBannerStrings = {\n    captionsBannerSpinnerText: strings.captionsBannerSpinnerText\n  };\n  const onRenderAvatar = useCallback((userId?: string, options?: CustomAvatarOptions) => {\n    return <AvatarPersona userId={userId} {...options} dataProvider={props.onFetchAvatarPersonaData} />;\n  }, [props.onFetchAvatarPersonaData]);\n  const {\n    innerWidth: width\n  } = window;\n  const [windowWidth, setWindowWidth] = useState(width);\n  useEffect(() => {\n    function handleResize(): void {\n      setWindowWidth(window.innerWidth);\n    }\n    window.addEventListener('resize', handleResize);\n    return () => window.removeEventListener('resize', handleResize);\n  }, []);\n  const desktopViewBannerWidth = windowWidth > 620 ? '35rem' : '80%';\n  return <>\n      {isCaptionsSettingsOpen && <CaptionsSettingsModal showCaptionsSettingsModal={isCaptionsSettingsOpen} onDismissCaptionsSettings={onDismissCaptionsSettings} changeCaptionLanguage={props.useTeamsCaptions} />}\n      {<div className={containerClassName}>\n          <Stack horizontalAlign=\"center\">\n            <Stack.Item style={{\n          width: props.isMobile ? mobileViewBannerWidth : desktopViewBannerWidth\n        }}>\n              <_CaptionsBanner {...captionsBannerProps} {...handlers} captionsOptions={props.captionsOptions} onRenderAvatar={onRenderAvatar} formFactor={props.isMobile ? 'compact' : 'default'} strings={captionsBannerStrings} />\n            </Stack.Item>\n          </Stack>\n          {!props.isMobile && captionsBannerProps.isCaptionsOn && <div className={floatingChildClassName}>\n              <CaptionsBannerMoreButton onCaptionsSettingsClick={onClickCaptionsSettings} returnFocusRef={props.returnFocusRef} />\n            </div>}\n        </div>}\n    </>;\n};"]}

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

@@ -1 +0,0 @@
-{"version":3,"file":"CaptionsSettingsModal.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-composites/src/composites/common/CaptionsSettingsModal.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,sBAAsB,EAAgF,yCAAmC;AAClJ,OAAO,EAAE,kBAAkB,EAAE,MAAM,2CAA2C,CAAC;AAC/E,OAAO,EAAE,WAAW,EAAE,MAAM,oCAAoC,CAAC;AACjE,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,wBAAwB,EAAE,mDAA6C;AAEhF,eAAe;AACf,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,KAIrC,EAAe,EAAE;IAChB,MAAM,0BAA0B,GAAG,kBAAkB,CAAC,wBAAwB,CAAC,CAAC;IAChF,MAAM,QAAQ,GAAG,WAAW,CAAC,sBAAsB,CAAC,CAAC;IACrD,MAAM,OAAO,GAAG,SAAS,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC;IACzC,MAAM,YAAY,GAAkC;QAClD,0BAA0B,EAAE,OAAO,CAAC,0BAA0B;QAC9D,2CAA2C,EAAE,OAAO,CAAC,2CAA2C;QAChG,4CAA4C,EAAE,OAAO,CAAC,4CAA4C;QAClG,8CAA8C,EAAE,OAAO,CAAC,8CAA8C;QACtG,+CAA+C,EAAE,OAAO,CAAC,+CAA+C;QACxG,kCAAkC,EAAE,OAAO,CAAC,kCAAkC;QAC9E,iCAAiC,EAAE,OAAO,CAAC,iCAAiC;QAC5E,8BAA8B,EAAE,OAAO,CAAC,8BAA8B;QACtE,yCAAyC,EAAE,OAAO,CAAC,yCAAyC;KAC7F,CAAC;IACF,MAAM,qBAAqB,GAAsC,OAAO,CAAC,qBAAqB,CAAC;IAC/F,MAAM,sBAAsB,GAAuC,OAAO,CAAC,sBAAsB,CAAC;IAClG,OAAO,oBAAC,sBAAsB,oBAAK,0BAA0B,EAAM,QAAQ,IAAE,OAAO,EAAE,YAAY,EAAE,qBAAqB,EAAE,qBAAqB,EAAE,sBAAsB,EAAE,sBAAsB,EAAE,SAAS,EAAE,KAAK,CAAC,yBAAyB,EAAE,yBAAyB,EAAE,KAAK,CAAC,yBAAyB,EAAE,qBAAqB,EAAE,KAAK,CAAC,qBAAqB,IAAI,CAAC;AACnW,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\nimport { _CaptionsSettingsModal, _CaptionsSettingsModalStrings, SpokenLanguageStrings, CaptionLanguageStrings } from '@internal/react-components';\nimport { useAdaptedSelector } from '../CallComposite/hooks/useAdaptedSelector';\nimport { useHandlers } from '../CallComposite/hooks/useHandlers';\nimport { useLocale } from '../localization';\nimport { _captionSettingsSelector } from '@internal/calling-component-bindings';\n\n/** @private */\nexport const CaptionsSettingsModal = (props: {\n  showCaptionsSettingsModal: boolean;\n  onDismissCaptionsSettings: () => void;\n  changeCaptionLanguage?: boolean;\n}): JSX.Element => {\n  const CaptionsSettingsModalProps = useAdaptedSelector(_captionSettingsSelector);\n  const handlers = useHandlers(_CaptionsSettingsModal);\n  const strings = useLocale().strings.call;\n  const modalStrings: _CaptionsSettingsModalStrings = {\n    captionsSettingsModalTitle: strings.captionsSettingsModalTitle,\n    captionsSettingsSpokenLanguageDropdownLabel: strings.captionsSettingsSpokenLanguageDropdownLabel,\n    captionsSettingsCaptionLanguageDropdownLabel: strings.captionsSettingsCaptionLanguageDropdownLabel,\n    captionsSettingsSpokenLanguageDropdownInfoText: strings.captionsSettingsSpokenLanguageDropdownInfoText,\n    captionsSettingsCaptionLanguageDropdownInfoText: strings.captionsSettingsCaptionLanguageDropdownInfoText,\n    captionsSettingsConfirmButtonLabel: strings.captionsSettingsConfirmButtonLabel,\n    captionsSettingsCancelButtonLabel: strings.captionsSettingsCancelButtonLabel,\n    captionsSettingsModalAriaLabel: strings.captionsSettingsModalAriaLabel,\n    captionsSettingsCloseModalButtonAriaLabel: strings.captionsSettingsCloseModalButtonAriaLabel\n  };\n  const spokenLanguageStrings: SpokenLanguageStrings | undefined = strings.spokenLanguageStrings;\n  const captionLanguageStrings: CaptionLanguageStrings | undefined = strings.captionLanguageStrings;\n  return <_CaptionsSettingsModal {...CaptionsSettingsModalProps} {...handlers} strings={modalStrings} spokenLanguageStrings={spokenLanguageStrings} captionLanguageStrings={captionLanguageStrings} showModal={props.showCaptionsSettingsModal} onDismissCaptionsSettings={props.onDismissCaptionsSettings} changeCaptionLanguage={props.changeCaptionLanguage} />;\n};"]}

package/dist/dist-esm/react-composites/src/composites/common/ControlBar/Timer.d.ts

@@ -1,12 +0,0 @@
-/// <reference types="react" />
-/**
- * @private
- */
-export interface TimerProps {
-    timeStampInfo: string;
-}
-/**
- * @private
- */
-export declare const Timer: (props: TimerProps) => JSX.Element;
-//# sourceMappingURL=Timer.d.ts.map

package/dist/dist-esm/react-composites/src/composites/common/ControlBar/Timer.js

@@ -1,52 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-// eslint-disable-next-line no-restricted-imports
-import { FontIcon, Stack, Text, mergeStyles, useTheme } from '@fluentui/react';
-import { _pxToRem } from "../../../../../acs-ui-common/src";
-import React, { useState } from 'react';
-import { getReadableTime } from '../../CallComposite/utils/timerUtils';
-/**
- * @private
- */
-export const Timer = (props) => {
-    const { timeStampInfo } = props;
-    const endTimeMs = new Date(timeStampInfo).getTime();
-    const theme = useTheme();
-    const [time, setTime] = useState(0);
-    const timeRemaining = getReadableTime(time);
-    React.useEffect(() => {
-        const interval = setInterval(() => {
-            setTime(Math.max(endTimeMs - Date.now(), 0));
-        }, 10);
-        return () => {
-            clearInterval(interval);
-        };
-    }, [endTimeMs]);
-    return React.createElement(Stack, { horizontal: true, className: timerContainerClass(theme), tokens: {
-            childrenGap: '0.5rem'
-        } },
-        React.createElement(FontIcon, { iconName: 'Clock', className: iconClass }),
-        React.createElement(Text, { styles: timerTextStyle }, timeRemaining));
-};
-const timerContainerClass = (theme) => mergeStyles({
-    backgroundColor: theme.palette.neutralLight,
-    display: 'flex',
-    alignItems: 'center',
-    borderColor: theme.palette.neutralQuaternaryAlt,
-    borderWidth: '0.0625rem',
-    borderRadius: '0.25rem',
-    padding: '0.5rem'
-});
-const iconClass = mergeStyles({
-    fontSize: 18
-});
-const timerTextStyle = {
-    root: {
-        color: 'inherit',
-        fontWeight: 400,
-        fontSize: _pxToRem(14),
-        lineHeight: _pxToRem(20),
-        margin: 'auto'
-    }
-};
-//# sourceMappingURL=Timer.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"Timer.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-composites/src/composites/common/ControlBar/Timer.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,iDAAiD;AACjD,OAAO,EAAE,QAAQ,EAAe,KAAK,EAAE,IAAI,EAAS,WAAW,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AACnG,OAAO,EAAE,QAAQ,EAAE,yCAAgC;AACnD,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxC,OAAO,EAAE,eAAe,EAAE,MAAM,sCAAsC,CAAC;AASvE;;GAEG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,KAAiB,EAAe,EAAE;IACtD,MAAM,EACJ,aAAa,EACd,GAAG,KAAK,CAAC;IACV,MAAM,SAAS,GAAG,IAAI,IAAI,CAAC,aAAa,CAAC,CAAC,OAAO,EAAE,CAAC;IACpD,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAS,CAAC,CAAC,CAAC;IAC5C,MAAM,aAAa,GAAG,eAAe,CAAC,IAAI,CAAC,CAAC;IAC5C,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,MAAM,QAAQ,GAAG,WAAW,CAAC,GAAG,EAAE;YAChC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,SAAS,GAAG,IAAI,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC;QAC/C,CAAC,EAAE,EAAE,CAAC,CAAC;QACP,OAAO,GAAG,EAAE;YACV,aAAa,CAAC,QAAQ,CAAC,CAAC;QAC1B,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAChB,OAAO,oBAAC,KAAK,IAAC,UAAU,QAAC,SAAS,EAAE,mBAAmB,CAAC,KAAK,CAAC,EAAE,MAAM,EAAE;YACtE,WAAW,EAAE,QAAQ;SACtB;QACG,oBAAC,QAAQ,IAAC,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,GAAI;QACrD,oBAAC,IAAI,IAAC,MAAM,EAAE,cAAc,IAAG,aAAa,CAAQ,CAC9C,CAAC;AACb,CAAC,CAAC;AACF,MAAM,mBAAmB,GAAG,CAAC,KAAY,EAAU,EAAE,CAAC,WAAW,CAAC;IAChE,eAAe,EAAE,KAAK,CAAC,OAAO,CAAC,YAAY;IAC3C,OAAO,EAAE,MAAM;IACf,UAAU,EAAE,QAAQ;IACpB,WAAW,EAAE,KAAK,CAAC,OAAO,CAAC,oBAAoB;IAC/C,WAAW,EAAE,WAAW;IACxB,YAAY,EAAE,SAAS;IACvB,OAAO,EAAE,QAAQ;CAClB,CAAC,CAAC;AACH,MAAM,SAAS,GAAG,WAAW,CAAC;IAC5B,QAAQ,EAAE,EAAE;CACb,CAAC,CAAC;AACH,MAAM,cAAc,GAAgB;IAClC,IAAI,EAAE;QACJ,KAAK,EAAE,SAAS;QAChB,UAAU,EAAE,GAAG;QACf,QAAQ,EAAE,QAAQ,CAAC,EAAE,CAAC;QACtB,UAAU,EAAE,QAAQ,CAAC,EAAE,CAAC;QACxB,MAAM,EAAE,MAAM;KACf;CACF,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n// eslint-disable-next-line no-restricted-imports\nimport { FontIcon, ITextStyles, Stack, Text, Theme, mergeStyles, useTheme } from '@fluentui/react';\nimport { _pxToRem } from '@internal/acs-ui-common';\nimport React, { useState } from 'react';\nimport { getReadableTime } from '../../CallComposite/utils/timerUtils';\n\n/**\n * @private\n */\nexport interface TimerProps {\n  timeStampInfo: string;\n}\n\n/**\n * @private\n */\nexport const Timer = (props: TimerProps): JSX.Element => {\n  const {\n    timeStampInfo\n  } = props;\n  const endTimeMs = new Date(timeStampInfo).getTime();\n  const theme = useTheme();\n  const [time, setTime] = useState<number>(0);\n  const timeRemaining = getReadableTime(time);\n  React.useEffect(() => {\n    const interval = setInterval(() => {\n      setTime(Math.max(endTimeMs - Date.now(), 0));\n    }, 10);\n    return () => {\n      clearInterval(interval);\n    };\n  }, [endTimeMs]);\n  return <Stack horizontal className={timerContainerClass(theme)} tokens={{\n    childrenGap: '0.5rem'\n  }}>\n      <FontIcon iconName={'Clock'} className={iconClass} />\n      <Text styles={timerTextStyle}>{timeRemaining}</Text>\n    </Stack>;\n};\nconst timerContainerClass = (theme: Theme): string => mergeStyles({\n  backgroundColor: theme.palette.neutralLight,\n  display: 'flex',\n  alignItems: 'center',\n  borderColor: theme.palette.neutralQuaternaryAlt,\n  borderWidth: '0.0625rem',\n  borderRadius: '0.25rem',\n  padding: '0.5rem'\n});\nconst iconClass = mergeStyles({\n  fontSize: 18\n});\nconst timerTextStyle: ITextStyles = {\n  root: {\n    color: 'inherit',\n    fontWeight: 400,\n    fontSize: _pxToRem(14),\n    lineHeight: _pxToRem(20),\n    margin: 'auto'\n  }\n};"]}

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

@@ -1,10 +0,0 @@
-/// <reference types="react" />
-import { RichTextSendBoxProps } from "../../../../react-components/src";
-/**
- * @private
- *
- * Wrapper for RichTextSendBox component to allow us to use usePropsFor with richTextSendBox
- * before lazyLoading is done
- */
-export declare const RichTextSendBoxWrapper: (props: RichTextSendBoxProps) => JSX.Element;
-//# sourceMappingURL=RichTextSendBoxWrapper.d.ts.map

package/dist/dist-esm/react-composites/src/composites/common/RichTextSendBoxWrapper.js

@@ -1,16 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-import React from 'react';
-import { usePropsFor } from '../ChatComposite/hooks/usePropsFor';
-import { RichTextSendBox } from "../../../../react-components/src";
-/**
- * @private
- *
- * Wrapper for RichTextSendBox component to allow us to use usePropsFor with richTextSendBox
- * before lazyLoading is done
- */
-export const RichTextSendBoxWrapper = (props) => {
-    const richTextSendBoxProps = usePropsFor(RichTextSendBox);
-    return React.createElement(RichTextSendBox, Object.assign({}, richTextSendBoxProps, props));
-};
-//# sourceMappingURL=RichTextSendBoxWrapper.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"RichTextSendBoxWrapper.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-composites/src/composites/common/RichTextSendBoxWrapper.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAClC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,WAAW,EAAE,MAAM,oCAAoC,CAAC;AACjE,OAAO,EAAE,eAAe,EAAwB,yCAAmC;AACnF;;;;;GAKG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,KAA2B,EAAe,EAAE;IACjF,MAAM,oBAAoB,GAAG,WAAW,CAAC,eAAe,CAAC,CAAC;IAC1D,OAAO,oBAAC,eAAe,oBAAK,oBAAoB,EAAM,KAAK,EAAI,CAAC;AAClE,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\nimport React from 'react';\nimport { usePropsFor } from '../ChatComposite/hooks/usePropsFor';\nimport { RichTextSendBox, RichTextSendBoxProps } from '@internal/react-components';\n/**\n * @private\n *\n * Wrapper for RichTextSendBox component to allow us to use usePropsFor with richTextSendBox\n * before lazyLoading is done\n */\nexport const RichTextSendBoxWrapper = (props: RichTextSendBoxProps): JSX.Element => {\n  const richTextSendBoxProps = usePropsFor(RichTextSendBox);\n  return <RichTextSendBox {...richTextSendBoxProps} {...props} />;\n};"]}