npm - @azure/communication-react - Versions diffs - 1.17.0-alpha-202405180013 → 1.17.0-alpha-202405220013 - Mend

@azure/communication-react 1.17.0-alpha-202405180013 → 1.17.0-alpha-202405220013

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (26) hide show

package/dist/dist-cjs/communication-react/index.js CHANGED Viewed

@@ -1,6 +1,6 @@
 'use strict';
-var index = require('./index-BLj9R9ms.js');
+var index = require('./index-DO36MBbq.js');
 require('react');
 require('@fluentui/react');
 require('@fluentui/react-components');

package/dist/dist-esm/acs-ui-common/src/telemetryVersion.js CHANGED Viewed

@@ -2,5 +2,5 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-module.exports = '1.17.0-alpha-202405180013';
+module.exports = '1.17.0-alpha-202405220013';
 //# sourceMappingURL=telemetryVersion.js.map

package/dist/dist-esm/acs-ui-common/src/telemetryVersion.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"telemetryVersion.js","sourceRoot":"","sources":["../../../../../acs-ui-common/src/telemetryVersion.js"],"names":[],"mappings":";AAAA,uCAAuC;AACvC,kCAAkC;AAElC,wCAAwC;AAExC,MAAM,CAAC,OAAO,GAAG,2BAA2B,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n// GENERATED FILE. DO NOT EDIT MANUALLY.\n\nmodule.exports = '1.17.0-alpha-~~202405180013~~';\n"]}
1	+ {"version":3,"file":"telemetryVersion.js","sourceRoot":"","sources":["../../../../../acs-ui-common/src/telemetryVersion.js"],"names":[],"mappings":";AAAA,uCAAuC;AACvC,kCAAkC;AAElC,wCAAwC;AAExC,MAAM,CAAC,OAAO,GAAG,2BAA2B,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n// GENERATED FILE. DO NOT EDIT MANUALLY.\n\nmodule.exports = '1.17.0-alpha-202405220013';\n"]}

package/dist/dist-esm/react-components/src/components/MessageStatusIcon.js CHANGED Viewed

@@ -12,9 +12,7 @@ export const MessageStatusIcon = (props) => {
     const { shouldAnnounce, iconName, iconClassName, ariaLabel } = props;
     return (React.createElement(React.Fragment, null,
         ariaLabel && shouldAnnounce && React.createElement(LiveMessage, { message: ariaLabel, ariaLive: "polite" }),
-        React.createElement("div", {
-            // make icon accessible
-            tabIndex: 0 },
+        React.createElement("div", null,
             React.createElement(Icon, { role: 'status', "aria-live": shouldAnnounce ? 'polite' : 'off', "data-ui-id": 'chat-composite-message-status-icon', "aria-label": ariaLabel, iconName: iconName, className: iconClassName }))));
 };
 //# sourceMappingURL=MessageStatusIcon.js.map

package/dist/dist-esm/react-components/src/components/MessageStatusIcon.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MessageStatusIcon.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/MessageStatusIcon.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AACvC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,WAAW,MAAM,yBAAyB,CAAC;AAclD;;;;GAIG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,KAA6B,EAAe,EAAE;IAC9E,MAAM,EAAE,cAAc,EAAE,QAAQ,EAAE,aAAa,EAAE,SAAS,EAAE,GAAG,KAAK,CAAC;IAErE,OAAO,CACL;QAEG,SAAS,IAAI,cAAc,IAAI,oBAAC,WAAW,IAAC,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAC,QAAQ,GAAG;QACrF;YACE,~~uBAAuB;YACvB,QAAQ,EAAE,CAAC;YAEX,~~oBAAC,IAAI,IACH,IAAI,EAAE,QAAQ,eAKH,cAAc,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,gBAChC,oCAAoC,gBACpC,SAAS,EACrB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,aAAa,GACxB,CACE,CACL,CACJ,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { Icon } from '@fluentui/react';\nimport React from 'react';\nimport LiveMessage from './Announcer/LiveMessage';\n\n/*\n Props for {@link MessageStatusIndicatorInternal}.\n \n @internal\n /\nexport interface MessageStatusIconProps {\n shouldAnnounce: boolean;\n iconName: string;\n iconClassName: string;\n ariaLabel?: string;\n}\n\n/\n Component to display message status icon\n \n @internal\n /\nexport const MessageStatusIcon = (props: MessageStatusIconProps): JSX.Element => {\n const { shouldAnnounce, iconName, iconClassName, ariaLabel } = props;\n\n return (\n <>\n {/ live message is used here so that aria labels are announced on mobile */}\n {ariaLabel && shouldAnnounce && <LiveMessage message={ariaLabel} ariaLive=\"polite\" />}\n <div~~\n // make icon accessible\n tabIndex={0}\n~~ >\n <Icon\n role={'status'}\n // Role `status` is one of the live region roles and is used to notify screen readers of changes to the status of the message\n // it has aria-live prop set to `polite` by default.\n // By setting it to `off` value, we disable live updates when they aren't needed\n // and keep it available in the accessibility tree\n aria-live={shouldAnnounce ? 'polite' : 'off'}\n data-ui-id={'chat-composite-message-status-icon'}\n aria-label={ariaLabel}\n iconName={iconName}\n className={iconClassName}\n />\n </div>\n </>\n );\n};\n"]}
1	+ {"version":3,"file":"MessageStatusIcon.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/MessageStatusIcon.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AACvC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,WAAW,MAAM,yBAAyB,CAAC;AAclD;;;;GAIG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,KAA6B,EAAe,EAAE;IAC9E,MAAM,EAAE,cAAc,EAAE,QAAQ,EAAE,aAAa,EAAE,SAAS,EAAE,GAAG,KAAK,CAAC;IAErE,OAAO,CACL;QAEG,SAAS,IAAI,cAAc,IAAI,oBAAC,WAAW,IAAC,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAC,QAAQ,GAAG;QACrF;YACE,oBAAC,IAAI,IACH,IAAI,EAAE,QAAQ,eAKH,cAAc,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,gBAChC,oCAAoC,gBACpC,SAAS,EACrB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,aAAa,GACxB,CACE,CACL,CACJ,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { Icon } from '@fluentui/react';\nimport React from 'react';\nimport LiveMessage from './Announcer/LiveMessage';\n\n/*\n Props for {@link MessageStatusIndicatorInternal}.\n \n @internal\n /\nexport interface MessageStatusIconProps {\n shouldAnnounce: boolean;\n iconName: string;\n iconClassName: string;\n ariaLabel?: string;\n}\n\n/\n Component to display message status icon\n \n @internal\n /\nexport const MessageStatusIcon = (props: MessageStatusIconProps): JSX.Element => {\n const { shouldAnnounce, iconName, iconClassName, ariaLabel } = props;\n\n return (\n <>\n {/ live message is used here so that aria labels are announced on mobile */}\n {ariaLabel && shouldAnnounce && <LiveMessage message={ariaLabel} ariaLive=\"polite\" />}\n <div>\n <Icon\n role={'status'}\n // Role `status` is one of the live region roles and is used to notify screen readers of changes to the status of the message\n // it has aria-live prop set to `polite` by default.\n // By setting it to `off` value, we disable live updates when they aren't needed\n // and keep it available in the accessibility tree\n aria-live={shouldAnnounce ? 'polite' : 'off'}\n data-ui-id={'chat-composite-message-status-icon'}\n aria-label={ariaLabel}\n iconName={iconName}\n className={iconClassName}\n />\n </div>\n </>\n );\n};\n"]}

package/dist/dist-esm/react-components/src/components/ReactionButton.js CHANGED Viewed

@@ -52,7 +52,7 @@ export const ReactionButton = (props) => {
             React.createElement(IconButton, { key: index, onClick: () => {
                     props.onReactionClick(emoji);
                     dismissMenu();
-                }, className: classname })));
+                }, className: classname, ariaLabel: emojiButtonTooltip.get(emoji) })));
     })));
     const emojiList = [
         { key: 'reactions', itemType: ContextualMenuItemType.Normal, onRender: renderEmoji }

package/dist/dist-esm/react-components/src/components/ReactionButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ReactionButton.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/ReactionButton.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EACL,sBAAsB,EACtB,cAAc,EAGd,UAAU,EAEV,WAAW,EAEX,WAAW,EACX,QAAQ,EACT,MAAM,iBAAiB,CAAC;AACzB,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,gBAAgB,EAAyB,MAAM,oBAAoB,CAAC;AAC7E,OAAO,EAAE,sBAAsB,EAAE,MAAM,yBAAyB,CAAC;AACjE,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,WAAW,EAAE,uBAAuB,EAAE,wBAAwB,EAAE,MAAM,gCAAgC,CAAC;AAChH,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAErD,OAAO,EAAE,kBAAkB,EAAE,MAAM,8CAA8C,CAAC;AAgDlF;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,KAA0B,EAAe,EAAE;;IACxE,MAAM,aAAa,GAAG,SAAS,EAAE,CAAC,OAAO,CAAC,cAAc,CAAC;IACzD,MAAM,OAAO,mCAAQ,aAAa,GAAK,KAAK,CAAC,OAAO,CAAE,CAAC;IACvD,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,MAAM,GAAG,oBAAoB,CAAC,KAAK,CAAC,CAAC;IAC3C,MAAM,YAAY,GAAG,GAAgB,EAAE,CAAC,CACtC,oBAAC,sBAAsB,IAAC,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,QAAQ,EAAC,oBAAoB,GAAG,CACnF,CAAC;IAEF,MAAM,MAAM,GAAG,CAAC,MAAM,EAAE,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,WAAW,CAAC,CAAC;IACnE,MAAM,kBAAkB,GAAoC,IAAI,GAAG,CAAC;QAClE,CAAC,MAAM,EAAE,OAAO,CAAC,0BAA0B,CAAC;QAC5C,CAAC,OAAO,EAAE,OAAO,CAAC,2BAA2B,CAAC;QAC9C,CAAC,UAAU,EAAE,OAAO,CAAC,8BAA8B,CAAC;QACpD,CAAC,OAAO,EAAE,OAAO,CAAC,2BAA2B,CAAC;QAC9C,CAAC,WAAW,EAAE,OAAO,CAAC,+BAA+B,CAAC;KACvD,CAAC,CAAC;IACH,MAAM,aAAa,GAAoC,IAAI,GAAG,CAAC;QAC7D,CAAC,MAAM,EAAE,MAAA,KAAK,CAAC,iBAAiB,CAAC,YAAY,0CAAE,GAAG,CAAC;QACnD,CAAC,OAAO,EAAE,MAAA,KAAK,CAAC,iBAAiB,CAAC,aAAa,0CAAE,GAAG,CAAC;QACrD,CAAC,UAAU,EAAE,MAAA,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,0CAAE,GAAG,CAAC;QAC3D,CAAC,OAAO,EAAE,MAAA,KAAK,CAAC,iBAAiB,CAAC,aAAa,0CAAE,GAAG,CAAC;QACrD,CAAC,WAAW,EAAE,MAAA,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,0CAAE,GAAG,CAAC;KAC9D,CAAC,CAAC;IAEH,MAAM,YAAY,GAAmC,EAAE,IAAI,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,EAAE,WAAW,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,CAAC;IAElH,MAAM,YAAY,GAAG;QACnB,QAAQ,EAAE,CAAC;QACX,MAAM,EAAE,YAAY;QACpB,eAAe,EAAE,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE;KACzE,CAAC;IAEF,MAAM,SAAS,GAAG,WAAW,CAAC,uBAAuB,EAAE,CAAC,CAAC;IAEzD,MAAM,WAAW,GAAG,CAAC,IAAyB,EAAE,WAAuB,EAAqB,EAAE,CAAC,CAC7F,2CAAgB,mBAAmB,EAAC,SAAS,EAAE,SAAS,IACrD,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE;QAC3B,MAAM,WAAW,GAAG,aAAa,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;QAC7C,MAAM,UAAU,GACd,KAAK,CAAC,iBAAiB,KAAK,SAAS,CAAC,CAAC,CAAC,kBAAkB,CAAC,KAAK,EAAE,KAAK,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QACjG,MAAM,SAAS,GAAG,WAAW,CAAC,WAAW,CAAC,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,EAAE,UAAU,CAAC,CAAC,CAAC;QACvF,OAAO,CACL,oBAAC,WAAW,IACV,GAAG,EAAE,KAAK,gBACE,KAAK,EACjB,MAAM,EAAE,KAAK,CAAC,cAAc,EAC5B,OAAO,EAAE,kBAAkB,CAAC,GAAG,CAAC,KAAK,CAAC,EACtC,MAAM,EAAE,wBAAwB,EAAE,EAClC,YAAY,oBAAO,YAAY;YAE/B,oBAAC,UAAU,IACT,GAAG,EAAE,KAAK,EACV,OAAO,EAAE,GAAG,EAAE;oBACZ,KAAK,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC;oBAC7B,WAAW,EAAE,CAAC;gBAChB,CAAC,EACD,SAAS,EAAE,SAAS,~~GACpB~~,CACU,CACf,CAAC;IACJ,CAAC,CAAC,CACE,CACP,CAAC;IAEF,MAAM,SAAS,GAA0B;QACvC,EAAE,GAAG,EAAE,WAAW,EAAE,QAAQ,EAAE,sBAAsB,CAAC,MAAM,EAAE,QAAQ,EAAE,WAAW,EAAE;KACrF,CAAC;IAEF,OAAO,CACL,oBAAC,gBAAgB,oBACX,KAAK,IACT,SAAS,EAAE,WAAW,CAAC,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,EAC5C,SAAS,EAAE;YACT,kBAAkB,EAAE,IAAI;YACxB,KAAK,EAAE,SAAS;SACjB,EACD,YAAY,EAAE,MAAA,KAAK,CAAC,YAAY,mCAAI,YAAY,EAChD,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,MAAA,KAAK,CAAC,QAAQ,mCAAI,qBAAqB,EACjD,gBAAgB,EAAE,GAAG,EAAE,CAAC,gCAAO,EAC/B,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,SAAS,EAAE,OAAO,CAAC,SAAS,IAC5B,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,oBAAoB,GAAG,CAAC,KAAY,EAAiB,EAAE,CAAC,CAAC;IAC7D,WAAW,EAAE;QACX,UAAU,EAAE,KAAK,CAAC,OAAO,CAAC,YAAY;QACtC,KAAK,EAAE,cAAc,CAAC,KAAK;KAC5B;IACD,kBAAkB,EAAE;QAClB,UAAU,EAAE,KAAK,CAAC,OAAO,CAAC,YAAY;QACtC,KAAK,EAAE,cAAc,CAAC,KAAK;KAC5B;IACD,YAAY,EAAE,EAAE,KAAK,EAAE,cAAc,CAAC,KAAK,EAAE;CAC9C,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport {\n ContextualMenuItemType,\n DefaultPalette,\n IButtonStyles,\n ICalloutContentStyles,\n IconButton,\n IContextualMenuItem,\n mergeStyles,\n Theme,\n TooltipHost,\n useTheme\n} from '@fluentui/react';\nimport React from 'react';\nimport { ControlBarButton, ControlBarButtonProps } from './ControlBarButton';\nimport { _HighContrastAwareIcon } from './HighContrastAwareIcon';\nimport { useLocale } from '../localization';\nimport { emojiStyles, reactionEmojiMenuStyles, reactionToolTipHostStyle } from './styles/ReactionButton.styles';\nimport { isDarkThemed } from '../theming/themeUtils';\nimport { ReactionResources } from '..';\nimport { getEmojiFrameCount } from './VideoGallery/utils/videoGalleryLayoutUtils';\n\n/*\n Props for {@link ReactionButton}.\n \n @public\n /\nexport interface ReactionButtonProps extends ControlBarButtonProps {\n /\n Optional strings to override in component\n /\n strings?: Partial<ReactionButtonStrings>;\n /\n Click event to send reaction to meeting\n /\n onReactionClick: (reaction: string) => Promise<void>;\n /\n Reaction resource locator and parameters\n /\n reactionResources: ReactionResources;\n}\n\n/\n Strings of {@link ReactionButton} that can be overridden.\n \n @public\n /\nexport interface ReactionButtonStrings {\n /* Label of the button. /\n label: string;\n /* Aria label for reaction button accessibility announcement /\n ariaLabel: string;\n /* Tooltip content when the button is disabled. /\n tooltipDisabledContent?: string;\n /* Tooltip content when the button is enabled. /\n tooltipContent?: string;\n /* Tooltip content of like reaction button. /\n likeReactionTooltipContent?: string;\n /* Tooltip content of heart reaction button. /\n heartReactionTooltipContent?: string;\n /* Tooltip content of clap reaction button. /\n applauseReactionTooltipContent?: string;\n /* Tooltip content of laugh reaction button. /\n laughReactionTooltipContent?: string;\n /* Tooltip content of surprised reaction button. /\n surprisedReactionTooltipContent?: string;\n}\n\n/\n A button to send reactions.\n \n Can be used with {@link ControlBar}.\n \n @public\n */\nexport const ReactionButton = (props: ReactionButtonProps): JSX.Element => {\n const localeStrings = useLocale().strings.reactionButton;\n const strings = { ...localeStrings, ...props.strings };\n const theme = useTheme();\n const styles = reactionButtonStyles(theme);\n const onRenderIcon = (): JSX.Element => (\n <_HighContrastAwareIcon disabled={props.disabled} iconName=\"ReactionButtonIcon\" />\n );\n\n const emojis = ['like', 'heart', 'applause', 'laugh', 'surprised'];\n const emojiButtonTooltip: Map<string, string \| undefined> = new Map([\n ['like', strings.likeReactionTooltipContent],\n ['heart', strings.heartReactionTooltipContent],\n ['applause', strings.applauseReactionTooltipContent],\n ['laugh', strings.laughReactionTooltipContent],\n ['surprised', strings.surprisedReactionTooltipContent]\n ]);\n const emojiResource: Map<string, string \| undefined> = new Map([\n ['like', props.reactionResources.likeReaction?.url],\n ['heart', props.reactionResources.heartReaction?.url],\n ['applause', props.reactionResources.applauseReaction?.url],\n ['laugh', props.reactionResources.laughReaction?.url],\n ['surprised', props.reactionResources.surprisedReaction?.url]\n ]);\n\n const calloutStyle: Partial<ICalloutContentStyles> = { root: { padding: 0 }, calloutMain: { padding: '0.5rem' } };\n\n const calloutProps = {\n gapSpace: 4,\n styles: calloutStyle,\n backgroundColor: isDarkThemed(theme) ? theme.palette.neutralLighter : ''\n };\n\n const classname = mergeStyles(reactionEmojiMenuStyles());\n\n const renderEmoji = (item: IContextualMenuItem, dismissMenu: () => void): React.JSX.Element => (\n <div data-ui-id=\"reaction-sub-menu\" className={classname}>\n {emojis.map((emoji, index) => {\n const resourceUrl = emojiResource.get(emoji);\n const frameCount: number =\n props.reactionResources !== undefined ? getEmojiFrameCount(emoji, props.reactionResources) : 0;\n const classname = mergeStyles(emojiStyles(resourceUrl ? resourceUrl : '', frameCount));\n return (\n <TooltipHost\n key={index}\n data-ui-id={index}\n hidden={props.disableTooltip}\n content={emojiButtonTooltip.get(emoji)}\n styles={reactionToolTipHostStyle()}\n calloutProps={{ ...calloutProps }}\n >\n <IconButton\n key={index}\n onClick={() => {\n props.onReactionClick(emoji);\n dismissMenu();\n }}\n className={classname}\n />\n </TooltipHost>\n );\n })}\n </div>\n );\n\n const emojiList: IContextualMenuItem[] = [\n { key: 'reactions', itemType: ContextualMenuItemType.Normal, onRender: renderEmoji }\n ];\n\n return (\n <ControlBarButton\n {...props}\n className={mergeStyles(styles, props.styles)}\n menuProps={{\n shouldFocusOnMount: true,\n items: emojiList\n }}\n onRenderIcon={props.onRenderIcon ?? onRenderIcon}\n strings={strings}\n labelKey={props.labelKey ?? 'reactionButtonLabel'}\n onRenderMenuIcon={() => <div />}\n disabled={props.disabled}\n ariaLabel={strings.ariaLabel}\n />\n );\n};\n\nconst reactionButtonStyles = (theme: Theme): IButtonStyles => ({\n rootChecked: {\n background: theme.palette.themePrimary,\n color: DefaultPalette.white\n },\n rootCheckedHovered: {\n background: theme.palette.themePrimary,\n color: DefaultPalette.white\n },\n labelChecked: { color: DefaultPalette.white }\n});\n"]}
1	+ {"version":3,"file":"ReactionButton.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/ReactionButton.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport {\n ContextualMenuItemType,\n DefaultPalette,\n IButtonStyles,\n ICalloutContentStyles,\n IconButton,\n IContextualMenuItem,\n mergeStyles,\n Theme,\n TooltipHost,\n useTheme\n} from '@fluentui/react';\nimport React from 'react';\nimport { ControlBarButton, ControlBarButtonProps } from './ControlBarButton';\nimport { _HighContrastAwareIcon } from './HighContrastAwareIcon';\nimport { useLocale } from '../localization';\nimport { emojiStyles, reactionEmojiMenuStyles, reactionToolTipHostStyle } from './styles/ReactionButton.styles';\nimport { isDarkThemed } from '../theming/themeUtils';\nimport { ReactionResources } from '..';\nimport { getEmojiFrameCount } from './VideoGallery/utils/videoGalleryLayoutUtils';\n\n/*\n Props for {@link ReactionButton}.\n \n @public\n /\nexport interface ReactionButtonProps extends ControlBarButtonProps {\n /\n Optional strings to override in component\n /\n strings?: Partial<ReactionButtonStrings>;\n /\n Click event to send reaction to meeting\n /\n onReactionClick: (reaction: string) => Promise<void>;\n /\n Reaction resource locator and parameters\n /\n reactionResources: ReactionResources;\n}\n\n/\n Strings of {@link ReactionButton} that can be overridden.\n \n @public\n /\nexport interface ReactionButtonStrings {\n /* Label of the button. /\n label: string;\n /* Aria label for reaction button accessibility announcement /\n ariaLabel: string;\n /* Tooltip content when the button is disabled. /\n tooltipDisabledContent?: string;\n /* Tooltip content when the button is enabled. /\n tooltipContent?: string;\n /* Tooltip content of like reaction button. /\n likeReactionTooltipContent?: string;\n /* Tooltip content of heart reaction button. /\n heartReactionTooltipContent?: string;\n /* Tooltip content of clap reaction button. /\n applauseReactionTooltipContent?: string;\n /* Tooltip content of laugh reaction button. /\n laughReactionTooltipContent?: string;\n /* Tooltip content of surprised reaction button. /\n surprisedReactionTooltipContent?: string;\n}\n\n/\n A button to send reactions.\n \n Can be used with {@link ControlBar}.\n \n @public\n */\nexport const ReactionButton = (props: ReactionButtonProps): JSX.Element => {\n const localeStrings = useLocale().strings.reactionButton;\n const strings = { ...localeStrings, ...props.strings };\n const theme = useTheme();\n const styles = reactionButtonStyles(theme);\n const onRenderIcon = (): JSX.Element => (\n <_HighContrastAwareIcon disabled={props.disabled} iconName=\"ReactionButtonIcon\" />\n );\n\n const emojis = ['like', 'heart', 'applause', 'laugh', 'surprised'];\n const emojiButtonTooltip: Map<string, string \| undefined> = new Map([\n ['like', strings.likeReactionTooltipContent],\n ['heart', strings.heartReactionTooltipContent],\n ['applause', strings.applauseReactionTooltipContent],\n ['laugh', strings.laughReactionTooltipContent],\n ['surprised', strings.surprisedReactionTooltipContent]\n ]);\n const emojiResource: Map<string, string \| undefined> = new Map([\n ['like', props.reactionResources.likeReaction?.url],\n ['heart', props.reactionResources.heartReaction?.url],\n ['applause', props.reactionResources.applauseReaction?.url],\n ['laugh', props.reactionResources.laughReaction?.url],\n ['surprised', props.reactionResources.surprisedReaction?.url]\n ]);\n\n const calloutStyle: Partial<ICalloutContentStyles> = { root: { padding: 0 }, calloutMain: { padding: '0.5rem' } };\n\n const calloutProps = {\n gapSpace: 4,\n styles: calloutStyle,\n backgroundColor: isDarkThemed(theme) ? theme.palette.neutralLighter : ''\n };\n\n const classname = mergeStyles(reactionEmojiMenuStyles());\n\n const renderEmoji = (item: IContextualMenuItem, dismissMenu: () => void): React.JSX.Element => (\n <div data-ui-id=\"reaction-sub-menu\" className={classname}>\n {emojis.map((emoji, index) => {\n const resourceUrl = emojiResource.get(emoji);\n const frameCount: number =\n props.reactionResources !== undefined ? getEmojiFrameCount(emoji, props.reactionResources) : 0;\n const classname = mergeStyles(emojiStyles(resourceUrl ? resourceUrl : '', frameCount));\n return (\n <TooltipHost\n key={index}\n data-ui-id={index}\n hidden={props.disableTooltip}\n content={emojiButtonTooltip.get(emoji)}\n styles={reactionToolTipHostStyle()}\n calloutProps={{ ...calloutProps }}\n >\n <IconButton\n key={index}\n onClick={() => {\n props.onReactionClick(emoji);\n dismissMenu();\n }}\n className={classname}\n ariaLabel={emojiButtonTooltip.get(emoji)}\n />\n </TooltipHost>\n );\n })}\n </div>\n );\n\n const emojiList: IContextualMenuItem[] = [\n { key: 'reactions', itemType: ContextualMenuItemType.Normal, onRender: renderEmoji }\n ];\n\n return (\n <ControlBarButton\n {...props}\n className={mergeStyles(styles, props.styles)}\n menuProps={{\n shouldFocusOnMount: true,\n items: emojiList\n }}\n onRenderIcon={props.onRenderIcon ?? onRenderIcon}\n strings={strings}\n labelKey={props.labelKey ?? 'reactionButtonLabel'}\n onRenderMenuIcon={() => <div />}\n disabled={props.disabled}\n ariaLabel={strings.ariaLabel}\n />\n );\n};\n\nconst reactionButtonStyles = (theme: Theme): IButtonStyles => ({\n rootChecked: {\n background: theme.palette.themePrimary,\n color: DefaultPalette.white\n },\n rootCheckedHovered: {\n background: theme.palette.themePrimary,\n color: DefaultPalette.white\n },\n labelChecked: { color: DefaultPalette.white }\n});\n"]}

package/dist/dist-esm/react-components/src/components/VideoEffects/VideoBackgroundEffectsPicker.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
-/// <reference types="react" />
 import { IStyle } from '@fluentui/react';
+import React from 'react';
 import { _VideoEffectsItemProps } from './VideoEffectsItem';
 /**
  * Props for {@link _VideoBackgroundEffectsPicker}
@@ -40,13 +40,11 @@ export interface _VideoBackgroundEffectsPickerProps {
      */
     styles?: _VideoBackgroundEffectsPickerStyles;
     /**
-     * Used only for jest tests. If `true`, the autofocus-on-mount will be ignored when the component mounts.
-     * If not, jest tries to cleanup after the first render pass, but the component throws an error because
-     * it tries to display a tooltip after that render pass and after the component is cleaned up.
-     *
-     * This can be removed once: https://github.com/microsoft/fluentui/issues/30896 is fixed.
+     * Imperative handle for calling focus()
      */
-    ignoreFocusOnMount?: boolean;
+    componentRef?: React.RefObject<{
+        focus: () => void;
+    }>;
 }
 /**
  * Option for the {@link _VideoBackgroundEffectsPicker}.

package/dist/dist-esm/react-components/src/components/VideoEffects/VideoBackgroundEffectsPicker.js CHANGED Viewed

@@ -45,7 +45,7 @@ export const _VideoBackgroundEffectsPicker = (props) => {
             return (React.createElement(Stack, { className: mergeStyles((_a = props.styles) === null || _a === void 0 ? void 0 : _a.rowRoot), wrap: props.itemsPerRow === 'wrap', horizontal: true, key: rowIndex, tokens: { childrenGap: '0.5rem' }, "data-ui-id": "video-effects-picker-row" },
                 options.map((option, i) => {
                     if (i === 0 && rowIndex === 0) {
-                        return (React.createElement(_VideoEffectsItem, Object.assign({}, option, { itemKey: option.itemKey, key: option.itemKey, focusOnMount: true && !props.ignoreFocusOnMount })));
+                        return (React.createElement(_VideoEffectsItem, Object.assign({}, option, { itemKey: option.itemKey, key: option.itemKey, componentRef: props.componentRef })));
                     }
                     return React.createElement(_VideoEffectsItem, Object.assign({}, option, { itemKey: option.itemKey, key: option.itemKey }));
                 }),

package/dist/dist-esm/react-components/src/components/VideoEffects/VideoBackgroundEffectsPicker.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"VideoBackgroundEffectsPicker.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoEffects/VideoBackgroundEffectsPicker.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAU,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACpE,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AACjC,OAAO,EAAE,iBAAiB,EAA0B,MAAM,oBAAoB,CAAC;AAC/E,OAAO,EAAE,qCAAqC,EAAE,MAAM,2BAA2B,CAAC;~~AAoFlF~~;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,6BAA6B,GAAG,CAAC,KAAyC,EAAe,EAAE;;IACtG,MAAM,CAAC,oCAAoC,EAAE,uCAAuC,CAAC,GAAG,KAAK,CAAC,QAAQ,CAEpG,KAAK,CAAC,wBAAwB,CAAC,CAAC;IAElC,+EAA+E;IAC/E,WAAW,CAAC;QACV,IAAI,EAAE,8BAA8B;QACpC,KAAK;QACL,eAAe,EAAE;YACf,YAAY,EAAE,UAAU;YACxB,SAAS,EAAE,mBAAmB;YAC9B,gBAAgB,EAAE,0BAA0B;SAC7C;KACF,CAAC,CAAC;IAEH,MAAM,cAAc,GAAG,MAAA,KAAK,CAAC,iBAAiB,mCAAI,oCAAoC,CAAC;IACvF,MAAM,iBAAiB,GAAG,CAAC,iBAAyB,EAAQ,EAAE;;QAC5D,uCAAuC,CAAC,iBAAiB,CAAC,CAAC;QAC3D,MAAA,KAAK,CAAC,QAAQ,sDAAG,iBAAiB,CAAC,CAAC;IACtC,CAAC,CAAC;IAEF,MAAM,gBAAgB,GAA6B,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,iBAC/E,UAAU,EAAE,MAAM,CAAC,OAAO,KAAK,cAAc,EAC7C,QAAQ,EAAE,GAAG,EAAE,CAAC,iBAAiB,CAAC,MAAM,CAAC,OAAO,CAAC,IAC9C,MAAM,EACT,CAAC,CAAC;IAEJ,MAAM,WAAW,GAAG,MAAA,KAAK,CAAC,WAAW,mCAAI,CAAC,CAAC;IAC3C,MAAM,YAAY,GAAG,WAAW,KAAK,MAAM,CAAC,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,gBAAgB,EAAE,WAAW,CAAC,CAAC;IAExG,4EAA4E;IAC5E,MAAM,SAAS,GAAG,WAAW,KAAK,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,WAAW,GAAG,YAAY,CAAC,YAAY,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC;IAE1G,OAAO,CACL,oBAAC,KAAK,IAAC,MAAM,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE;QACtC,oBAAC,KAAK,IAAC,SAAS,EAAE,WAAW,CAAC,MAAA,KAAK,CAAC,MAAM,0CAAE,KAAK,CAAC,IAAG,KAAK,CAAC,KAAK,CAAS;QACxE,YAAY,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,QAAQ,EAAE,EAAE;;YAAC,OAAA,CACvC,oBAAC,KAAK,IACJ,SAAS,EAAE,WAAW,CAAC,MAAA,KAAK,CAAC,MAAM,0CAAE,OAAO,CAAC,EAC7C,IAAI,EAAE,KAAK,CAAC,WAAW,KAAK,MAAM,EAClC,UAAU,QACV,GAAG,EAAE,QAAQ,EACb,MAAM,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,gBACtB,0BAA0B;gBAEpC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;oBACzB,IAAI,CAAC,KAAK,CAAC,IAAI,QAAQ,KAAK,CAAC,EAAE,CAAC;wBAC9B,OAAO,CACL,oBAAC,iBAAiB,oBACZ,MAAM,IACV,OAAO,EAAE,MAAM,CAAC,OAAO,EACvB,GAAG,EAAE,MAAM,CAAC,OAAO,EACnB,YAAY,EAAE,~~IAAI,IAAI,CAAC,~~KAAK,CAAC,~~kBAAkB~~,~~IAC/C~~,CACH,CAAC;oBACJ,CAAC;oBACD,OAAO,oBAAC,iBAAiB,oBAAK,MAAM,IAAE,OAAO,EAAE,MAAM,CAAC,OAAO,EAAE,GAAG,EAAE,MAAM,CAAC,OAAO,IAAI,CAAC;gBACzF,CAAC,CAAC;gBACD,SAAS,GAAG,CAAC;oBACZ,QAAQ,KAAK,YAAY,CAAC,MAAM,GAAG,CAAC;oBACpC,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,CAClD,oBAAC,KAAK,IACJ,GAAG,EAAE,KAAK,EACV,MAAM,EAAE,qCAAqC,gBAClC,2BAA2B,GACtC,CACH,CAAC,CACE,CACT,CAAA;SAAA,CAAC,CACI,CACT,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IStyle, Label, mergeStyles, Stack } from '@fluentui/react';\nimport { useWarnings } from '@fluentui/react-hooks';\nimport React from 'react';\nimport { chunk } from '../utils';\nimport { _VideoEffectsItem, _VideoEffectsItemProps } from './VideoEffectsItem';\nimport { hiddenVideoEffectsItemContainerStyles } from './VideoEffectsItem.styles';\n\n/*\n Props for {@link _VideoBackgroundEffectsPicker}\n * @internal\n /\nexport interface _VideoBackgroundEffectsPickerProps {\n /\n The options to display in the picker.\n /\n options: _VideoBackgroundEffectChoiceOption[];\n\n /\n The key of the current selected Video Background Effect.\n * If you provide this, you must maintain selection state by observing onChange events and passing a new value in when changed.\n /\n selectedEffectKey?: string;\n\n /\n Callback to invoke when a Video Background Effect is selected.\n * @param effectKey - The key of the Video Background Effect that was selected.\n /\n onChange?: (effectKey: string) => void;\n\n /\n The key of the Video Background Effect that is initially selected.\n * Only provide this if the picker is an uncontrolled component;\n * otherwise, use the `selectedEffectKey` property.\n /\n defaultSelectedEffectKey?: string;\n\n /\n The label to display for the picker.\n /\n label?: string;\n\n /\n The number of items to display per row.\n * @default 3\n /\n itemsPerRow?: 'wrap' \| number;\n\n /\n Styles for the picker.\n /\n styles?: _VideoBackgroundEffectsPickerStyles;\n\n /\n ~~Used~~ ~~only~~ for ~~jest~~ ~~tests. If `true`, the autofocus-on-mount will be ignored when the component mounts.\~~n * ~~If not, jest tries to cleanup after the first render pass, but the component throws an error because~~\n * it tries to display a tooltip after that render pass and after the component is cleaned up.\n \n This can be removed once: ~~https://github.com/microsoft/fluentui/issues/30896~~ is ~~fixed.\~~n /\n ~~ignoreFocusOnMount?: boolean;\~~n}\n\n/\n Option for the {@link _VideoBackgroundEffectsPicker}.\n * @internal\n /\nexport type _VideoBackgroundEffectChoiceOption = _VideoEffectsItemProps;\n\n/\n Styles for the {@link _VideoBackgroundEffectsPicker}.\n * @internal\n /\nexport interface _VideoBackgroundEffectsPickerStyles {\n /\n Styles for the root element.\n /\n root?: IStyle;\n\n /\n Styles for the label.\n /\n label?: IStyle;\n\n /\n Styles for the root of each row element.\n /\n rowRoot?: IStyle;\n}\n\n/\n Picker for choosing a Video Background Effect.\n \n @remarks\n * This functions similar to a radio group of buttons, where the user can select one of the options.\n \n @internal\n */\nexport const _VideoBackgroundEffectsPicker = (props: _VideoBackgroundEffectsPickerProps): JSX.Element => {\n const [componentControlledSelectedEffectKey, setComponentControlledSelectedEffectKey] = React.useState<\n string \| undefined\n >(props.defaultSelectedEffectKey);\n\n // Warn the developer if they use the component in an incorrect controlled way.\n useWarnings({\n name: 'VideoBackgroundEffectsPicker',\n props,\n controlledUsage: {\n onChangeProp: 'onChange',\n valueProp: 'selectedEffectKey',\n defaultValueProp: 'defaultSelectedEffectKey'\n }\n });\n\n const selectedEffect = props.selectedEffectKey ?? componentControlledSelectedEffectKey;\n const setSelectedEffect = (selectedEffectKey: string): void => {\n setComponentControlledSelectedEffectKey(selectedEffectKey);\n props.onChange?.(selectedEffectKey);\n };\n\n const convertedOptions: _VideoEffectsItemProps[] = props.options.map((option) => ({\n isSelected: option.itemKey === selectedEffect,\n onSelect: () => setSelectedEffect(option.itemKey),\n ...option\n }));\n\n const itemsPerRow = props.itemsPerRow ?? 3;\n const optionsByRow = itemsPerRow === 'wrap' ? [convertedOptions] : chunk(convertedOptions, itemsPerRow);\n\n // If the final row is not full, fill it with hidden items to ensure layout.\n const fillCount = itemsPerRow === 'wrap' ? 0 : itemsPerRow - optionsByRow[optionsByRow.length - 1].length;\n\n return (\n <Stack tokens={{ childrenGap: '0.5rem' }}>\n <Label className={mergeStyles(props.styles?.label)}>{props.label}</Label>\n {optionsByRow.map((options, rowIndex) => (\n <Stack\n className={mergeStyles(props.styles?.rowRoot)}\n wrap={props.itemsPerRow === 'wrap'}\n horizontal\n key={rowIndex}\n tokens={{ childrenGap: '0.5rem' }}\n data-ui-id=\"video-effects-picker-row\"\n >\n {options.map((option, i) => {\n if (i === 0 && rowIndex === 0) {\n return (\n <_VideoEffectsItem\n {...option}\n itemKey={option.itemKey}\n key={option.itemKey}\n ~~focusOnMount~~={~~true && !~~props.~~ignoreFocusOnMount~~}\n />\n );\n }\n return <_VideoEffectsItem {...option} itemKey={option.itemKey} key={option.itemKey} />;\n })}\n {fillCount > 0 &&\n rowIndex === optionsByRow.length - 1 &&\n Array.from({ length: fillCount }).map((_, index) => (\n <Stack\n key={index}\n styles={hiddenVideoEffectsItemContainerStyles}\n data-ui-id=\"video-effects-hidden-item\"\n />\n ))}\n </Stack>\n ))}\n </Stack>\n );\n};\n"]}
1	+ {"version":3,"file":"VideoBackgroundEffectsPicker.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoEffects/VideoBackgroundEffectsPicker.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IStyle, Label, mergeStyles, Stack } from '@fluentui/react';\nimport { useWarnings } from '@fluentui/react-hooks';\nimport React from 'react';\nimport { chunk } from '../utils';\nimport { _VideoEffectsItem, _VideoEffectsItemProps } from './VideoEffectsItem';\nimport { hiddenVideoEffectsItemContainerStyles } from './VideoEffectsItem.styles';\n\n/*\n Props for {@link _VideoBackgroundEffectsPicker}\n * @internal\n /\nexport interface _VideoBackgroundEffectsPickerProps {\n /\n The options to display in the picker.\n /\n options: _VideoBackgroundEffectChoiceOption[];\n\n /\n The key of the current selected Video Background Effect.\n * If you provide this, you must maintain selection state by observing onChange events and passing a new value in when changed.\n /\n selectedEffectKey?: string;\n\n /\n Callback to invoke when a Video Background Effect is selected.\n * @param effectKey - The key of the Video Background Effect that was selected.\n /\n onChange?: (effectKey: string) => void;\n\n /\n The key of the Video Background Effect that is initially selected.\n * Only provide this if the picker is an uncontrolled component;\n * otherwise, use the `selectedEffectKey` property.\n /\n defaultSelectedEffectKey?: string;\n\n /\n The label to display for the picker.\n /\n label?: string;\n\n /\n The number of items to display per row.\n * @default 3\n /\n itemsPerRow?: 'wrap' \| number;\n\n /\n Styles for the picker.\n /\n styles?: _VideoBackgroundEffectsPickerStyles;\n\n /\n Imperative handle for calling focus()\n /\n componentRef?: React.RefObject<{\n focus: () => void;\n }>;\n}\n\n/\n Option for the {@link _VideoBackgroundEffectsPicker}.\n * @internal\n /\nexport type _VideoBackgroundEffectChoiceOption = _VideoEffectsItemProps;\n\n/\n Styles for the {@link _VideoBackgroundEffectsPicker}.\n * @internal\n /\nexport interface _VideoBackgroundEffectsPickerStyles {\n /\n Styles for the root element.\n /\n root?: IStyle;\n\n /\n Styles for the label.\n /\n label?: IStyle;\n\n /\n Styles for the root of each row element.\n /\n rowRoot?: IStyle;\n}\n\n/\n Picker for choosing a Video Background Effect.\n \n @remarks\n * This functions similar to a radio group of buttons, where the user can select one of the options.\n \n @internal\n */\nexport const _VideoBackgroundEffectsPicker = (props: _VideoBackgroundEffectsPickerProps): JSX.Element => {\n const [componentControlledSelectedEffectKey, setComponentControlledSelectedEffectKey] = React.useState<\n string \| undefined\n >(props.defaultSelectedEffectKey);\n\n // Warn the developer if they use the component in an incorrect controlled way.\n useWarnings({\n name: 'VideoBackgroundEffectsPicker',\n props,\n controlledUsage: {\n onChangeProp: 'onChange',\n valueProp: 'selectedEffectKey',\n defaultValueProp: 'defaultSelectedEffectKey'\n }\n });\n\n const selectedEffect = props.selectedEffectKey ?? componentControlledSelectedEffectKey;\n const setSelectedEffect = (selectedEffectKey: string): void => {\n setComponentControlledSelectedEffectKey(selectedEffectKey);\n props.onChange?.(selectedEffectKey);\n };\n\n const convertedOptions: _VideoEffectsItemProps[] = props.options.map((option) => ({\n isSelected: option.itemKey === selectedEffect,\n onSelect: () => setSelectedEffect(option.itemKey),\n ...option\n }));\n\n const itemsPerRow = props.itemsPerRow ?? 3;\n const optionsByRow = itemsPerRow === 'wrap' ? [convertedOptions] : chunk(convertedOptions, itemsPerRow);\n\n // If the final row is not full, fill it with hidden items to ensure layout.\n const fillCount = itemsPerRow === 'wrap' ? 0 : itemsPerRow - optionsByRow[optionsByRow.length - 1].length;\n\n return (\n <Stack tokens={{ childrenGap: '0.5rem' }}>\n <Label className={mergeStyles(props.styles?.label)}>{props.label}</Label>\n {optionsByRow.map((options, rowIndex) => (\n <Stack\n className={mergeStyles(props.styles?.rowRoot)}\n wrap={props.itemsPerRow === 'wrap'}\n horizontal\n key={rowIndex}\n tokens={{ childrenGap: '0.5rem' }}\n data-ui-id=\"video-effects-picker-row\"\n >\n {options.map((option, i) => {\n if (i === 0 && rowIndex === 0) {\n return (\n <_VideoEffectsItem\n {...option}\n itemKey={option.itemKey}\n key={option.itemKey}\n componentRef={props.componentRef}\n />\n );\n }\n return <_VideoEffectsItem {...option} itemKey={option.itemKey} key={option.itemKey} />;\n })}\n {fillCount > 0 &&\n rowIndex === optionsByRow.length - 1 &&\n Array.from({ length: fillCount }).map((_, index) => (\n <Stack\n key={index}\n styles={hiddenVideoEffectsItemContainerStyles}\n data-ui-id=\"video-effects-hidden-item\"\n />\n ))}\n </Stack>\n ))}\n </Stack>\n );\n};\n"]}

package/dist/dist-esm/react-components/src/components/VideoEffects/VideoEffectsItem.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
-/// <reference types="react" />
 import { IIconProps, IStyle, ITooltipHostProps } from '@fluentui/react';
+import React from 'react';
 /**
  * Props for {@link _VideoEffectsItem}
  *
@@ -60,9 +60,11 @@ export interface _VideoEffectsItemProps {
      */
     styles?: _VideoEffectsItemStyles;
     /**
-     * Should focus on mounting of the picker item
+     * Imperative handle for calling focus()
      */
-    focusOnMount?: boolean;
+    componentRef?: React.RefObject<{
+        focus: () => void;
+    }>;
 }
 /**
  * Styles for {@link _VideoEffectsItem}

package/dist/dist-esm/react-components/src/components/VideoEffects/VideoEffectsItem.js CHANGED Viewed

@@ -1,7 +1,7 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 import { DefaultButton, Icon, mergeStyles, Stack, Text, TooltipHost, useTheme } from '@fluentui/react';
-import React, { useCallback, useEffect } from 'react';
+import React, { useCallback } from 'react';
 import { videoEffectsItemContainerStyles } from './VideoEffectsItem.styles';
 /**
  * A component for displaying a Video Background Effect Option.
@@ -22,15 +22,9 @@ export const _VideoEffectsItem = (props) => {
         disabled,
         backgroundImage
     }), [backgroundImage, disabled, isSelected, theme]);
-    const componentRef = React.createRef();
-    useEffect(() => {
-        if (props.focusOnMount && componentRef.current) {
-            componentRef.current.focus();
-        }
-    }, [componentRef, props.focusOnMount]);
     return (React.createElement(TooltipHost, Object.assign({}, props.tooltipProps),
         React.createElement(Stack, { key: props.itemKey, className: mergeStyles((_f = props.styles) === null || _f === void 0 ? void 0 : _f.root), verticalAlign: "center", horizontalAlign: "center", "data-ui-id": `video-effects-item`, "aria-label": (_g = props.ariaLabel) !== null && _g !== void 0 ? _g : props.itemKey, "aria-disabled": props.disabled },
-            React.createElement(DefaultButton, { styles: containerStyles(), onClick: disabled ? undefined : () => { var _a; return (_a = props.onSelect) === null || _a === void 0 ? void 0 : _a.call(props, props.itemKey); }, componentRef: componentRef, autoFocus: props.focusOnMount },
+            React.createElement(DefaultButton, { styles: containerStyles(), onClick: disabled ? undefined : () => { var _a; return (_a = props.onSelect) === null || _a === void 0 ? void 0 : _a.call(props, props.itemKey); }, componentRef: props.componentRef },
                 React.createElement(Stack, { horizontalAlign: 'center' },
                     props.iconProps && (React.createElement(Stack.Item, { className: iconContainerStyles },
                         React.createElement(Icon, Object.assign({}, props.iconProps)))),

package/dist/dist-esm/react-components/src/components/VideoEffects/VideoEffectsItem.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"VideoEffectsItem.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoEffects/VideoEffectsItem.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EACL,aAAa,EAEb,IAAI,EAIJ,WAAW,EACX,KAAK,EACL,IAAI,EACJ,WAAW,EACX,QAAQ,EACT,MAAM,iBAAiB,CAAC;AACzB,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,~~SAAS,EAAE,~~MAAM,OAAO,CAAC;~~AACtD~~,OAAO,EAAE,+BAA+B,EAAE,MAAM,2BAA2B,CAAC;~~AAmG5E~~;;;;GAIG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,KAA6B,EAAe,EAAE;;IAC9E,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,UAAU,GAAG,MAAA,KAAK,CAAC,UAAU,mCAAI,KAAK,CAAC;IAC7C,MAAM,QAAQ,GAAG,MAAA,KAAK,CAAC,QAAQ,mCAAI,KAAK,CAAC;IACzC,MAAM,eAAe,GAAG,MAAA,KAAK,CAAC,eAAe,0CAAE,GAAG,CAAC;IACnD,MAAM,mBAAmB,GAAG,WAAW,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,MAAA,KAAK,CAAC,MAAM,0CAAE,aAAa,CAAC,CAAC;IAC5F,MAAM,mBAAmB,GAAG,WAAW,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,MAAA,KAAK,CAAC,MAAM,0CAAE,aAAa,CAAC,CAAC;IAE5F,MAAM,eAAe,GAAG,WAAW,CACjC,GAAG,EAAE,CACH,+BAA+B,CAAC;QAC9B,KAAK;QACL,UAAU;QACV,QAAQ;QACR,eAAe;KAChB,CAAC,EACJ,CAAC,eAAe,EAAE,QAAQ,EAAE,UAAU,EAAE,KAAK,CAAC,CAC/C,CAAC;IAEF,~~MAAM,YAAY,GAAG,KAAK,CAAC,SAAS,EAAW,CAAC;IAEhD,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,KAAK,CAAC,YAAY,IAAI,YAAY,CAAC,~~OAAO,~~EAAE,CAAC;YAC/C,YAAY,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;QAC/B,CAAC;IACH,CAAC,EAAE,CAAC,YAAY,EAAE,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC;IAEvC,OAAO,~~CACL,oBAAC,WAAW,oBAAK,KAAK,CAAC,YAAY;QACjC,oBAAC,KAAK,IACJ,GAAG,EAAE,KAAK,CAAC,OAAO,EAClB,SAAS,EAAE,WAAW,CAAC,MAAA,KAAK,CAAC,MAAM,0CAAE,IAAI,CAAC,EAC1C,aAAa,EAAC,QAAQ,EACtB,eAAe,EAAC,QAAQ,gBACZ,oBAAoB,gBACpB,MAAA,KAAK,CAAC,SAAS,mCAAI,KAAK,CAAC,OAAO,mBAC7B,KAAK,CAAC,QAAQ;YAE7B,oBAAC,aAAa,IACZ,MAAM,EAAE,eAAe,EAAE,EACzB,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,GAAG,EAAE,WAAC,OAAA,MAAA,KAAK,CAAC,QAAQ,sDAAG,KAAK,CAAC,OAAO,CAAC,CAAA,EAAA,EACrE,YAAY,EAAE,~~YAAY,EAC1B,SAAS,EAAE,~~KAAK,CAAC,~~YAAY~~;~~gBAE7B~~,oBAAC,KAAK,IAAC,eAAe,EAAE,QAAQ;oBAC7B,KAAK,CAAC,SAAS,IAAI,CAClB,oBAAC,KAAK,CAAC,IAAI,IAAC,SAAS,EAAE,mBAAmB;wBACxC,oBAAC,IAAI,oBAAK,KAAK,CAAC,SAAS,EAAI,CAClB,CACd;oBACA,KAAK,CAAC,KAAK,IAAI,CACd,oBAAC,KAAK,CAAC,IAAI,IAAC,SAAS,EAAE,mBAAmB;wBACxC,oBAAC,IAAI,IAAC,OAAO,EAAC,OAAO,IAAE,KAAK,CAAC,KAAK,CAAQ,CAC/B,CACd,CACK,CACM,CACV,CACI,CACf,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport {\n DefaultButton,\n IButton,\n Icon,\n IIconProps,\n IStyle,\n ITooltipHostProps,\n mergeStyles,\n Stack,\n Text,\n TooltipHost,\n useTheme\n} from '@fluentui/react';\nimport React, { useCallback, ~~useEffect~~ } from 'react';\nimport { videoEffectsItemContainerStyles } from './VideoEffectsItem.styles';\n\n/*\n Props for {@link _VideoEffectsItem}\n \n @internal\n /\nexport interface _VideoEffectsItemProps {\n /\n The key of the Video Background Effect.\n * This is used to identify the Video Background Effect and is returned in the onChange event.\n * It must be unique within the set of options.\n * @example 'blur'\n /\n itemKey: string;\n\n /\n The text to display for the Video effects item.\n /\n title?: string;\n\n /\n Whether the Video effects item is currently in the selected state.\n * @default false\n /\n isSelected?: boolean;\n\n /\n Callback to invoke when the Video effects item is selected.\n /\n onSelect?: (key: string) => void;\n\n /\n Whether the Video effects item is disabled.\n * @default false\n /\n disabled?: boolean;\n\n /\n The icon to display for the Video effects item.\n * @default undefined (no icon)\n /\n iconProps?: IIconProps;\n\n /\n Properties to have a Tooltip display when hovering over the Video effects item.\n * @default undefined (no tooltip)\n /\n tooltipProps?: ITooltipHostProps;\n\n /\n Aria label for the Video effects item.\n /\n ariaLabel?: string;\n\n /\n Background to display for the Video effects item.\n * @default undefined (no background image)\n /\n backgroundProps?: {\n /\n The URL of the background image.\n /\n url: string;\n };\n\n /\n Styles for the Video effects item.\n /\n styles?: _VideoEffectsItemStyles;\n\n /\n ~~Should~~ ~~focus~~ on ~~mounting~~ ~~of the picker item~~\n /\n ~~focusOnMount~~?: ~~boolean~~;\n}\n\n/\n Styles for {@link _VideoEffectsItem}\n \n @internal\n /\nexport interface _VideoEffectsItemStyles {\n /\n Styles for the container of the Video effects item.\n /\n root: IStyle;\n\n /\n Styles for the container of the icon of the Video effects item.\n /\n iconContainer: IStyle;\n\n /\n Styles for the text container of the Video effects item.\n /\n textContainer: IStyle;\n}\n\n/\n A component for displaying a Video Background Effect Option.\n \n @internal\n */\nexport const _VideoEffectsItem = (props: _VideoEffectsItemProps): JSX.Element => {\n const theme = useTheme();\n const isSelected = props.isSelected ?? false;\n const disabled = props.disabled ?? false;\n const backgroundImage = props.backgroundProps?.url;\n const iconContainerStyles = mergeStyles({ height: '1.25rem' }, props.styles?.iconContainer);\n const textContainerStyles = mergeStyles({ height: '1.25rem' }, props.styles?.textContainer);\n\n const containerStyles = useCallback(\n () =>\n videoEffectsItemContainerStyles({\n theme,\n isSelected,\n disabled,\n backgroundImage\n }),\n [backgroundImage, disabled, isSelected, theme]\n );\n\n const componentRef = React.createRef<IButton>();\n\n useEffect(() => {\n if (props.focusOnMount && componentRef.current) {\n componentRef.current.focus();\n }\n }, [componentRef, props.focusOnMount]);\n\n return (\n <TooltipHost {...props.tooltipProps}>\n <Stack\n key={props.itemKey}\n className={mergeStyles(props.styles?.root)}\n verticalAlign=\"center\"\n horizontalAlign=\"center\"\n data-ui-id={`video-effects-item`}\n aria-label={props.ariaLabel ?? props.itemKey}\n aria-disabled={props.disabled}\n >\n <DefaultButton\n styles={containerStyles()}\n onClick={disabled ? undefined : () => props.onSelect?.(props.itemKey)}\n componentRef={~~componentRef}\n autoFocus={~~props.~~focusOnMount~~}\n >\n <Stack horizontalAlign={'center'}>\n {props.iconProps && (\n <Stack.Item className={iconContainerStyles}>\n <Icon {...props.iconProps} />\n </Stack.Item>\n )}\n {props.title && (\n <Stack.Item className={textContainerStyles}>\n <Text variant=\"small\">{props.title}</Text>\n </Stack.Item>\n )}\n </Stack>\n </DefaultButton>\n </Stack>\n </TooltipHost>\n );\n};\n"]}
1	+ {"version":3,"file":"VideoEffectsItem.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoEffects/VideoEffectsItem.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EACL,aAAa,EAEb,IAAI,EAIJ,WAAW,EACX,KAAK,EACL,IAAI,EACJ,WAAW,EACX,QAAQ,EACT,MAAM,iBAAiB,CAAC;AACzB,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,EAAE,+BAA+B,EAAE,MAAM,2BAA2B,CAAC;AAqG5E;;;;GAIG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,KAA6B,EAAe,EAAE;;IAC9E,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,UAAU,GAAG,MAAA,KAAK,CAAC,UAAU,mCAAI,KAAK,CAAC;IAC7C,MAAM,QAAQ,GAAG,MAAA,KAAK,CAAC,QAAQ,mCAAI,KAAK,CAAC;IACzC,MAAM,eAAe,GAAG,MAAA,KAAK,CAAC,eAAe,0CAAE,GAAG,CAAC;IACnD,MAAM,mBAAmB,GAAG,WAAW,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,MAAA,KAAK,CAAC,MAAM,0CAAE,aAAa,CAAC,CAAC;IAC5F,MAAM,mBAAmB,GAAG,WAAW,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,MAAA,KAAK,CAAC,MAAM,0CAAE,aAAa,CAAC,CAAC;IAE5F,MAAM,eAAe,GAAG,WAAW,CACjC,GAAG,EAAE,CACH,+BAA+B,CAAC;QAC9B,KAAK;QACL,UAAU;QACV,QAAQ;QACR,eAAe;KAChB,CAAC,EACJ,CAAC,eAAe,EAAE,QAAQ,EAAE,UAAU,EAAE,KAAK,CAAC,CAC/C,CAAC;IAEF,OAAO,CACL,oBAAC,WAAW,oBAAK,KAAK,CAAC,YAAY;QACjC,oBAAC,KAAK,IACJ,GAAG,EAAE,KAAK,CAAC,OAAO,EAClB,SAAS,EAAE,WAAW,CAAC,MAAA,KAAK,CAAC,MAAM,0CAAE,IAAI,CAAC,EAC1C,aAAa,EAAC,QAAQ,EACtB,eAAe,EAAC,QAAQ,gBACZ,oBAAoB,gBACpB,MAAA,KAAK,CAAC,SAAS,mCAAI,KAAK,CAAC,OAAO,mBAC7B,KAAK,CAAC,QAAQ;YAE7B,oBAAC,aAAa,IACZ,MAAM,EAAE,eAAe,EAAE,EACzB,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,GAAG,EAAE,WAAC,OAAA,MAAA,KAAK,CAAC,QAAQ,sDAAG,KAAK,CAAC,OAAO,CAAC,CAAA,EAAA,EACrE,YAAY,EAAE,KAAK,CAAC,YAAwC;gBAE5D,oBAAC,KAAK,IAAC,eAAe,EAAE,QAAQ;oBAC7B,KAAK,CAAC,SAAS,IAAI,CAClB,oBAAC,KAAK,CAAC,IAAI,IAAC,SAAS,EAAE,mBAAmB;wBACxC,oBAAC,IAAI,oBAAK,KAAK,CAAC,SAAS,EAAI,CAClB,CACd;oBACA,KAAK,CAAC,KAAK,IAAI,CACd,oBAAC,KAAK,CAAC,IAAI,IAAC,SAAS,EAAE,mBAAmB;wBACxC,oBAAC,IAAI,IAAC,OAAO,EAAC,OAAO,IAAE,KAAK,CAAC,KAAK,CAAQ,CAC/B,CACd,CACK,CACM,CACV,CACI,CACf,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport {\n DefaultButton,\n IButton,\n Icon,\n IIconProps,\n IStyle,\n ITooltipHostProps,\n mergeStyles,\n Stack,\n Text,\n TooltipHost,\n useTheme\n} from '@fluentui/react';\nimport React, { useCallback } from 'react';\nimport { videoEffectsItemContainerStyles } from './VideoEffectsItem.styles';\n\n/*\n Props for {@link _VideoEffectsItem}\n \n @internal\n /\nexport interface _VideoEffectsItemProps {\n /\n The key of the Video Background Effect.\n * This is used to identify the Video Background Effect and is returned in the onChange event.\n * It must be unique within the set of options.\n * @example 'blur'\n /\n itemKey: string;\n\n /\n The text to display for the Video effects item.\n /\n title?: string;\n\n /\n Whether the Video effects item is currently in the selected state.\n * @default false\n /\n isSelected?: boolean;\n\n /\n Callback to invoke when the Video effects item is selected.\n /\n onSelect?: (key: string) => void;\n\n /\n Whether the Video effects item is disabled.\n * @default false\n /\n disabled?: boolean;\n\n /\n The icon to display for the Video effects item.\n * @default undefined (no icon)\n /\n iconProps?: IIconProps;\n\n /\n Properties to have a Tooltip display when hovering over the Video effects item.\n * @default undefined (no tooltip)\n /\n tooltipProps?: ITooltipHostProps;\n\n /\n Aria label for the Video effects item.\n /\n ariaLabel?: string;\n\n /\n Background to display for the Video effects item.\n * @default undefined (no background image)\n /\n backgroundProps?: {\n /\n The URL of the background image.\n /\n url: string;\n };\n\n /\n Styles for the Video effects item.\n /\n styles?: _VideoEffectsItemStyles;\n\n /\n Imperative handle for calling focus()\n /\n componentRef?: React.RefObject<{\n focus: () => void;\n }>;\n}\n\n/\n Styles for {@link _VideoEffectsItem}\n \n @internal\n /\nexport interface _VideoEffectsItemStyles {\n /\n Styles for the container of the Video effects item.\n /\n root: IStyle;\n\n /\n Styles for the container of the icon of the Video effects item.\n /\n iconContainer: IStyle;\n\n /\n Styles for the text container of the Video effects item.\n /\n textContainer: IStyle;\n}\n\n/\n A component for displaying a Video Background Effect Option.\n \n @internal\n */\nexport const _VideoEffectsItem = (props: _VideoEffectsItemProps): JSX.Element => {\n const theme = useTheme();\n const isSelected = props.isSelected ?? false;\n const disabled = props.disabled ?? false;\n const backgroundImage = props.backgroundProps?.url;\n const iconContainerStyles = mergeStyles({ height: '1.25rem' }, props.styles?.iconContainer);\n const textContainerStyles = mergeStyles({ height: '1.25rem' }, props.styles?.textContainer);\n\n const containerStyles = useCallback(\n () =>\n videoEffectsItemContainerStyles({\n theme,\n isSelected,\n disabled,\n backgroundImage\n }),\n [backgroundImage, disabled, isSelected, theme]\n );\n\n return (\n <TooltipHost {...props.tooltipProps}>\n <Stack\n key={props.itemKey}\n className={mergeStyles(props.styles?.root)}\n verticalAlign=\"center\"\n horizontalAlign=\"center\"\n data-ui-id={`video-effects-item`}\n aria-label={props.ariaLabel ?? props.itemKey}\n aria-disabled={props.disabled}\n >\n <DefaultButton\n styles={containerStyles()}\n onClick={disabled ? undefined : () => props.onSelect?.(props.itemKey)}\n componentRef={props.componentRef as React.RefObject<IButton>}\n >\n <Stack horizontalAlign={'center'}>\n {props.iconProps && (\n <Stack.Item className={iconContainerStyles}>\n <Icon {...props.iconProps} />\n </Stack.Item>\n )}\n {props.title && (\n <Stack.Item className={textContainerStyles}>\n <Text variant=\"small\">{props.title}</Text>\n </Stack.Item>\n )}\n </Stack>\n </DefaultButton>\n </Stack>\n </TooltipHost>\n );\n};\n"]}

package/dist/dist-esm/react-composites/src/composites/CallComposite/components/SidePane/useVideoEffectsPane.js CHANGED Viewed

@@ -1,6 +1,6 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-import React, { useCallback, useEffect, useMemo } from 'react';
+import React, { createRef, useCallback, useEffect, useMemo } from 'react';
 import { useIsParticularSidePaneOpen } from './SidePaneProvider';
 import { SidePaneHeader } from '../../../common/SidePaneHeader';
 import { useLocale } from '../../../localization';
@@ -22,12 +22,13 @@ export const useVideoEffectsPane = (updateSidePaneRenderer, mobileView, latestEr
         return (React.createElement(SidePaneHeader, { onClose: closePane, headingText: locale.strings.call.videoEffectsPaneTitle, dismissSidePaneButtonAriaLabel: (_b = (_a = locale.strings.call.dismissSidePaneButtonLabel) !== null && _a !== void 0 ? _a : locale.strings.callWithChat.dismissSidePaneButtonLabel) !== null && _b !== void 0 ? _b : 'Close', mobileView: mobileView }));
     }, [closePane, locale.strings, mobileView]);
     const latestVideoEffectError = latestErrors.find((error) => error.type === 'unableToStartVideoEffect');
+    const updateFocusHandle = useMemo(() => createRef(), []);
     const onRenderContent = useCallback(() => {
         return (React.createElement(VideoEffectsPaneContent, { onDismissError: onDismissError, activeVideoEffectError: latestVideoEffectError, activeVideoEffectChange: () => {
                 // Clear any existing video effects error when the user clicks on a new video effect
                 latestVideoEffectError && (onDismissError === null || onDismissError === void 0 ? void 0 : onDismissError(latestVideoEffectError));
-            } }));
-    }, [latestVideoEffectError, onDismissError]);
+            }, updateFocusHandle: updateFocusHandle }));
+    }, [latestVideoEffectError, onDismissError, updateFocusHandle]);
     const sidePaneRenderer = useMemo(() => ({
         headerRenderer: onRenderHeader,
         contentRenderer: onRenderContent,
@@ -35,7 +36,9 @@ export const useVideoEffectsPane = (updateSidePaneRenderer, mobileView, latestEr
     }), [onRenderContent, onRenderHeader]);
     const openPane = useCallback(() => {
         updateSidePaneRenderer(sidePaneRenderer);
-    }, [sidePaneRenderer, updateSidePaneRenderer]);
+        // Run in a setTimeout as it must be called only once the imperative handle is available
+        setTimeout(() => { var _a; return (_a = updateFocusHandle.current) === null || _a === void 0 ? void 0 : _a.focus(); }, 0);
+    }, [sidePaneRenderer, updateSidePaneRenderer, updateFocusHandle]);
     const isOpen = useIsParticularSidePaneOpen(VIDEO_EFFECTS_SIDE_PANE_ID);
     // Update pane renderer if it is open and the openPane dep changes
     useEffect(() => {

package/dist/dist-esm/react-composites/src/composites/CallComposite/components/SidePane/useVideoEffectsPane.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useVideoEffectsPane.js","sourceRoot":"","sources":["../../../../../../../../../react-composites/src/composites/CallComposite/components/SidePane/useVideoEffectsPane.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;~~AAC/D~~,OAAO,EAAoB,2BAA2B,EAAE,MAAM,oBAAoB,CAAC;AACnF,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAEhE,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAClD,OAAO,EAAE,uBAAuB,EAAE,MAAM,kCAAkC,CAAC;AAI3E,eAAe;AACf,MAAM,CAAC,MAAM,0BAA0B,GAAG,cAAc,CAAC;AAEzD,eAAe;AACf,MAAM,CAAC,MAAM,iCAAiC,GAAG,IAAI,CAAC;AAEtD,eAAe;AACf,MAAM,CAAC,MAAM,mBAAmB,GAAG,CACjC,sBAAwE,EACxE,UAAmB,EACnB,YAAkC,EAClC,cAAmD,EACnD,eAA0C,EAM1C,EAAE;IACF,MAAM,SAAS,GAAG,WAAW,CAAC,GAAG,EAAE;;QACjC,sBAAsB,CAAC,SAAS,CAAC,CAAC;QAClC,MAAA,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAE,OAAO,0CAAE,KAAK,EAAE,CAAC;IACpC,CAAC,EAAE,CAAC,eAAe,EAAE,sBAAsB,CAAC,CAAC,CAAC;IAE9C,MAAM,MAAM,GAAG,SAAS,EAAE,CAAC;IAE3B,MAAM,cAAc,GAAG,WAAW,CAAC,GAAG,EAAE;;QACtC,OAAO,CACL,oBAAC,cAAc,IACb,OAAO,EAAE,SAAS,EAClB,WAAW,EAAE,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,qBAAqB,EACtD,8BAA8B,EAC5B,MAAA,MAAA,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,0BAA0B,mCAC9C,MAAM,CAAC,OAAO,CAAC,YAAY,CAAC,0BAA0B,mCACtD,OAAO,EAET,UAAU,EAAE,UAAU,GACtB,CACH,CAAC;IACJ,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,CAAC,CAAC;IAE5C,MAAM,sBAAsB,GAAG,YAAY,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,IAAI,KAAK,0BAA0B,CAAC,CAAC;~~IAEvG~~,MAAM,eAAe,GAAG,WAAW,CAAC,GAAgB,EAAE;QACpD,OAAO,CACL,oBAAC,uBAAuB,IACtB,cAAc,EAAE,cAAc,EAC9B,sBAAsB,EAAE,sBAAsB,EAC9C,uBAAuB,EAAE,GAAG,EAAE;gBAC5B,oFAAoF;gBAEpF,sBAAsB,KAAI,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAG,sBAAsB,CAAC,CAAA,CAAC;YACrE,CAAC,~~GACD~~,CACH,CAAC;IACJ,CAAC,EAAE,CAAC,sBAAsB,EAAE,cAAc,CAAC,CAAC,CAAC;~~IAE7C~~,MAAM,gBAAgB,GAAqB,OAAO,CAChD,GAAG,EAAE,CAAC,CAAC;QACL,cAAc,EAAE,cAAc;QAC9B,eAAe,EAAE,eAAe;QAChC,EAAE,EAAE,0BAA0B;KAC/B,CAAC,EACF,CAAC,eAAe,EAAE,cAAc,CAAC,CAClC,CAAC;IAEF,MAAM,QAAQ,GAAG,WAAW,CAAC,GAAG,EAAE;QAChC,sBAAsB,CAAC,gBAAgB,CAAC,CAAC;~~IAC3C~~,CAAC,EAAE,CAAC,gBAAgB,EAAE,sBAAsB,CAAC,CAAC,CAAC;~~IAE/C~~,MAAM,MAAM,GAAG,2BAA2B,CAAC,0BAA0B,CAAC,CAAC;IAEvE,kEAAkE;IAClE,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,MAAM,EAAE,CAAC;YACX,QAAQ,EAAE,CAAC;QACb,CAAC;IACH,CAAC,EAAE,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEvB,MAAM,UAAU,GAAG,WAAW,CAAC,GAAG,EAAE;QAClC,IAAI,MAAM,EAAE,CAAC;YACX,SAAS,EAAE,CAAC;QACd,CAAC;aAAM,CAAC;YACN,QAAQ,EAAE,CAAC;QACb,CAAC;IACH,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC;IAElC,OAAO;QACL,oBAAoB,EAAE,QAAQ;QAC9B,qBAAqB,EAAE,SAAS;QAChC,sBAAsB,EAAE,UAAU;QAClC,sBAAsB,EAAE,MAAM;KAC/B,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useCallback, useEffect, useMemo } from 'react';\nimport { SidePaneRenderer, useIsParticularSidePaneOpen } from './SidePaneProvider';\nimport { SidePaneHeader } from '../../../common/SidePaneHeader';\n\nimport { useLocale } from '../../../localization';\nimport { VideoEffectsPaneContent } from '../../../common/VideoEffectsPane';\nimport { ActiveErrorMessage } from '@internal/react-components';\nimport { IButton } from '@fluentui/react';\n\n/** @private /\nexport const VIDEO_EFFECTS_SIDE_PANE_ID = 'videoeffects';\n\n/* @private /\nexport const VIDEO_EFFECTS_SIDE_PANE_WIDTH_REM = 17.5;\n\n/* @private /\nexport const useVideoEffectsPane = (\n updateSidePaneRenderer: (renderer: SidePaneRenderer \| undefined) => void,\n mobileView: boolean,\n latestErrors: ActiveErrorMessage[],\n onDismissError: (error: ActiveErrorMessage) => void,\n cameraButtonRef?: React.RefObject<IButton>\n): {\n openVideoEffectsPane: () => void;\n closeVideoEffectsPane: () => void;\n toggleVideoEffectsPane: () => void;\n isVideoEffectsPaneOpen: boolean;\n} => {\n const closePane = useCallback(() => {\n updateSidePaneRenderer(undefined);\n cameraButtonRef?.current?.focus();\n }, [cameraButtonRef, updateSidePaneRenderer]);\n\n const locale = useLocale();\n\n const onRenderHeader = useCallback(() => {\n return (\n <SidePaneHeader\n onClose={closePane}\n headingText={locale.strings.call.videoEffectsPaneTitle}\n dismissSidePaneButtonAriaLabel={\n locale.strings.call.dismissSidePaneButtonLabel ??\n locale.strings.callWithChat.dismissSidePaneButtonLabel ??\n 'Close'\n }\n mobileView={mobileView}\n />\n );\n }, [closePane, locale.strings, mobileView]);\n\n const latestVideoEffectError = latestErrors.find((error) => error.type === 'unableToStartVideoEffect');\n\n const onRenderContent = useCallback((): JSX.Element => {\n return (\n <VideoEffectsPaneContent\n onDismissError={onDismissError}\n activeVideoEffectError={latestVideoEffectError}\n activeVideoEffectChange={() => {\n // Clear any existing video effects error when the user clicks on a new video effect\n\n latestVideoEffectError && onDismissError?.(latestVideoEffectError);\n }}\n />\n );\n }, [latestVideoEffectError, onDismissError]);\n\n const sidePaneRenderer: SidePaneRenderer = useMemo(\n () => ({\n headerRenderer: onRenderHeader,\n contentRenderer: onRenderContent,\n id: VIDEO_EFFECTS_SIDE_PANE_ID\n }),\n [onRenderContent, onRenderHeader]\n );\n\n const openPane = useCallback(() => {\n updateSidePaneRenderer(sidePaneRenderer);\n }, [sidePaneRenderer, updateSidePaneRenderer]);\n\n const isOpen = useIsParticularSidePaneOpen(VIDEO_EFFECTS_SIDE_PANE_ID);\n\n // Update pane renderer if it is open and the openPane dep changes\n useEffect(() => {\n if (isOpen) {\n openPane();\n }\n }, [isOpen, openPane]);\n\n const togglePane = useCallback(() => {\n if (isOpen) {\n closePane();\n } else {\n openPane();\n }\n }, [closePane, isOpen, openPane]);\n\n return {\n openVideoEffectsPane: openPane,\n closeVideoEffectsPane: closePane,\n toggleVideoEffectsPane: togglePane,\n isVideoEffectsPaneOpen: isOpen\n };\n};\n\n/\n Active video effect with timestamp.\n \n @private\n /\nexport interface ActiveVideoEffect {\n /\n Type of video effect that is active.\n /\n type: 'blur' \| 'replacement';\n /\n The latest timestamp when this effect was activated.\n \n /\n timestamp: Date;\n}\n"]}
1	+ {"version":3,"file":"useVideoEffectsPane.js","sourceRoot":"","sources":["../../../../../../../../../react-composites/src/composites/CallComposite/components/SidePane/useVideoEffectsPane.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { createRef, useCallback, useEffect, useMemo } from 'react';\nimport { SidePaneRenderer, useIsParticularSidePaneOpen } from './SidePaneProvider';\nimport { SidePaneHeader } from '../../../common/SidePaneHeader';\n\nimport { useLocale } from '../../../localization';\nimport { VideoEffectsPaneContent } from '../../../common/VideoEffectsPane';\nimport { ActiveErrorMessage } from '@internal/react-components';\nimport { IButton } from '@fluentui/react';\n\n/** @private /\nexport const VIDEO_EFFECTS_SIDE_PANE_ID = 'videoeffects';\n\n/* @private /\nexport const VIDEO_EFFECTS_SIDE_PANE_WIDTH_REM = 17.5;\n\n/* @private /\nexport const useVideoEffectsPane = (\n updateSidePaneRenderer: (renderer: SidePaneRenderer \| undefined) => void,\n mobileView: boolean,\n latestErrors: ActiveErrorMessage[],\n onDismissError: (error: ActiveErrorMessage) => void,\n cameraButtonRef?: React.RefObject<IButton>\n): {\n openVideoEffectsPane: () => void;\n closeVideoEffectsPane: () => void;\n toggleVideoEffectsPane: () => void;\n isVideoEffectsPaneOpen: boolean;\n} => {\n const closePane = useCallback(() => {\n updateSidePaneRenderer(undefined);\n cameraButtonRef?.current?.focus();\n }, [cameraButtonRef, updateSidePaneRenderer]);\n\n const locale = useLocale();\n\n const onRenderHeader = useCallback(() => {\n return (\n <SidePaneHeader\n onClose={closePane}\n headingText={locale.strings.call.videoEffectsPaneTitle}\n dismissSidePaneButtonAriaLabel={\n locale.strings.call.dismissSidePaneButtonLabel ??\n locale.strings.callWithChat.dismissSidePaneButtonLabel ??\n 'Close'\n }\n mobileView={mobileView}\n />\n );\n }, [closePane, locale.strings, mobileView]);\n\n const latestVideoEffectError = latestErrors.find((error) => error.type === 'unableToStartVideoEffect');\n const updateFocusHandle = useMemo(() => createRef<{ focus: () => void }>(), []);\n\n const onRenderContent = useCallback((): JSX.Element => {\n return (\n <VideoEffectsPaneContent\n onDismissError={onDismissError}\n activeVideoEffectError={latestVideoEffectError}\n activeVideoEffectChange={() => {\n // Clear any existing video effects error when the user clicks on a new video effect\n\n latestVideoEffectError && onDismissError?.(latestVideoEffectError);\n }}\n updateFocusHandle={updateFocusHandle}\n />\n );\n }, [latestVideoEffectError, onDismissError, updateFocusHandle]);\n\n const sidePaneRenderer: SidePaneRenderer = useMemo(\n () => ({\n headerRenderer: onRenderHeader,\n contentRenderer: onRenderContent,\n id: VIDEO_EFFECTS_SIDE_PANE_ID\n }),\n [onRenderContent, onRenderHeader]\n );\n\n const openPane = useCallback(() => {\n updateSidePaneRenderer(sidePaneRenderer);\n\n // Run in a setTimeout as it must be called only once the imperative handle is available\n setTimeout(() => updateFocusHandle.current?.focus(), 0);\n }, [sidePaneRenderer, updateSidePaneRenderer, updateFocusHandle]);\n\n const isOpen = useIsParticularSidePaneOpen(VIDEO_EFFECTS_SIDE_PANE_ID);\n\n // Update pane renderer if it is open and the openPane dep changes\n useEffect(() => {\n if (isOpen) {\n openPane();\n }\n }, [isOpen, openPane]);\n\n const togglePane = useCallback(() => {\n if (isOpen) {\n closePane();\n } else {\n openPane();\n }\n }, [closePane, isOpen, openPane]);\n\n return {\n openVideoEffectsPane: openPane,\n closeVideoEffectsPane: closePane,\n toggleVideoEffectsPane: togglePane,\n isVideoEffectsPaneOpen: isOpen\n };\n};\n\n/\n Active video effect with timestamp.\n \n @private\n /\nexport interface ActiveVideoEffect {\n /\n Type of video effect that is active.\n /\n type: 'blur' \| 'replacement';\n /\n The latest timestamp when this effect was activated.\n \n /\n timestamp: Date;\n}\n"]}

package/dist/dist-esm/react-composites/src/composites/common/VideoEffectsPane.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { ActiveErrorMessage } from "../../../../react-components/src";
 import { ActiveVideoEffect } from '../CallComposite/components/SidePane/useVideoEffectsPane';
 /**
@@ -10,5 +10,8 @@ export declare const VideoEffectsPaneContent: (props: {
     activeVideoEffectError?: ActiveErrorMessage;
     onDismissError: (error: ActiveErrorMessage) => void;
     activeVideoEffectChange: (effect: ActiveVideoEffect) => void;
+    updateFocusHandle: React.RefObject<{
+        focus: () => void;
+    }>;
 }) => JSX.Element;
 //# sourceMappingURL=VideoEffectsPane.d.ts.map

package/dist/dist-esm/react-composites/src/composites/common/VideoEffectsPane.js CHANGED Viewed

@@ -114,9 +114,9 @@ export const VideoEffectsPaneContent = (props) => {
         };
         adapter.updateSelectedVideoBackgroundEffect(noneEffect);
     }
-    return VideoEffectsPaneTrampoline(onDismissError, activeVideoEffectError, selectableVideoEffects, onEffectChange);
+    return VideoEffectsPaneTrampoline(onDismissError, props.updateFocusHandle, activeVideoEffectError, selectableVideoEffects, onEffectChange);
 };
-const VideoEffectsPaneTrampoline = (onDismissError, activeVideoEffectError, selectableVideoEffects, onEffectChange) => {
+const VideoEffectsPaneTrampoline = (onDismissError, updateFocusHandle, activeVideoEffectError, selectableVideoEffects, onEffectChange) => {
     const selectedEffect = useSelector(activeVideoBackgroundEffectSelector);
     const isCameraOn = useSelector(localVideoSelector).isAvailable;
     const showWarning = !isCameraOn && selectedEffect !== 'none';
@@ -124,7 +124,7 @@ const VideoEffectsPaneTrampoline = (onDismissError, activeVideoEffectError, sele
     return (React.createElement(Stack, { tokens: { childrenGap: '0.75rem' }, className: mergeStyles({ paddingLeft: '0.5rem' }) },
         activeVideoEffectError && isCameraOn && (React.createElement(MessageBar, { messageBarType: MessageBarType.error, onDismiss: () => onDismissError(activeVideoEffectError) }, locale.strings.call.unableToStartVideoEffect)),
         showWarning && (React.createElement(MessageBar, { messageBarType: MessageBarType.warning }, locale.strings.call.cameraOffBackgroundEffectWarningText)),
-        React.createElement(_VideoBackgroundEffectsPicker, { label: locale.strings.call.videoEffectsPaneBackgroundSelectionTitle, styles: backgroundPickerStyles, options: selectableVideoEffects !== null && selectableVideoEffects !== void 0 ? selectableVideoEffects : [], onChange: onEffectChange, selectedEffectKey: selectedEffect })));
+        React.createElement(_VideoBackgroundEffectsPicker, { label: locale.strings.call.videoEffectsPaneBackgroundSelectionTitle, styles: backgroundPickerStyles, options: selectableVideoEffects !== null && selectableVideoEffects !== void 0 ? selectableVideoEffects : [], onChange: onEffectChange, selectedEffectKey: selectedEffect, componentRef: updateFocusHandle })));
     return React.createElement(React.Fragment, null);
 };
 const backgroundPickerStyles = {

package/dist/dist-esm/react-composites/src/composites/common/VideoEffectsPane.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"VideoEffectsPane.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/common/VideoEffectsPane.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\n\nimport { useCallback, useMemo } from 'react';\n\nimport { MessageBar, MessageBarType, Stack, mergeStyles } from '@fluentui/react';\n\nimport { useLocale } from '../localization';\nimport { ActiveErrorMessage, _VideoEffectsItemProps } from '@internal/react-components';\n\nimport { _VideoBackgroundEffectsPicker } from '@internal/react-components';\n\nimport {\n VideoBackgroundImage,\n VideoBackgroundBlurEffect,\n VideoBackgroundNoEffect,\n VideoBackgroundReplacementEffect\n} from '../CallComposite';\n\nimport { activeVideoBackgroundEffectSelector } from '../CallComposite/selectors/activeVideoBackgroundEffectSelector';\n\nimport { useSelector } from '../CallComposite/hooks/useSelector';\n\nimport { useAdapter } from '../CallComposite/adapter/CallAdapterProvider';\n\nimport { localVideoSelector } from '../CallComposite/selectors/localVideoStreamSelector';\nimport { ActiveVideoEffect } from '../CallComposite/components/SidePane/useVideoEffectsPane';\n\n/*\n Pane that is used to show video effects button\n * @private\n /\n/* @beta */\nexport const VideoEffectsPaneContent = (props: {\n activeVideoEffectError?: ActiveErrorMessage;\n onDismissError: (error: ActiveErrorMessage) => void;\n activeVideoEffectChange: (effect: ActiveVideoEffect) => void;\n}): JSX.Element => {\n const {\n onDismissError,\n activeVideoEffectError,\n\n activeVideoEffectChange\n } = props;\n\n const locale = useLocale();\n\n const adapter = useAdapter();\n\n const strings = locale.strings.call;\n\n const activeVideoEffects = useSelector(localVideoSelector).activeVideoEffects?.activeEffects;\n\n const selectableVideoEffects: _VideoEffectsItemProps[] = useMemo(() => {\n const videoEffects: _VideoEffectsItemProps[] = [\n {\n itemKey: 'none',\n iconProps: {\n iconName: 'RemoveVideoBackgroundEffect'\n },\n title: strings.removeBackgroundEffectButtonLabel,\n tooltipProps: {\n content: strings.removeBackgroundTooltip\n }\n },\n {\n itemKey: 'blur',\n iconProps: {\n iconName: 'BlurVideoBackground'\n },\n title: strings.blurBackgroundEffectButtonLabel,\n tooltipProps: {\n content: strings.blurBackgroundTooltip\n }\n }\n ];\n const videoEffectImages = adapter.getState().videoBackgroundImages;\n\n if (videoEffectImages) {\n videoEffectImages.forEach((img: VideoBackgroundImage) => {\n videoEffects.push({\n itemKey: img.key,\n backgroundProps: {\n url: img.url\n },\n tooltipProps: {\n content: img.tooltipText ?? ''\n }\n });\n });\n }\n return videoEffects;\n }, [strings, adapter]);\n\n const onEffectChange = useCallback(\n async (effectKey: string) => {\n if (effectKey === 'blur') {\n const blurEffect: VideoBackgroundBlurEffect = {\n effectName: effectKey\n };\n activeVideoEffectChange({\n type: 'blur',\n timestamp: new Date(Date.now())\n });\n await adapter.startVideoBackgroundEffect(blurEffect);\n adapter.updateSelectedVideoBackgroundEffect(blurEffect);\n } else if (effectKey === 'none') {\n const noneEffect: VideoBackgroundNoEffect = {\n effectName: effectKey\n };\n await adapter.stopVideoBackgroundEffects();\n adapter.updateSelectedVideoBackgroundEffect(noneEffect);\n } else {\n const backgroundImg = selectableVideoEffects.find((effect) => {\n return effect.itemKey === effectKey;\n });\n if (backgroundImg && backgroundImg.backgroundProps) {\n const replaceEffect: VideoBackgroundReplacementEffect = {\n effectName: 'replacement',\n key: effectKey,\n backgroundImageUrl: backgroundImg.backgroundProps.url\n };\n activeVideoEffectChange({\n type: 'replacement',\n timestamp: new Date(Date.now())\n });\n await adapter.startVideoBackgroundEffect(replaceEffect);\n adapter.updateSelectedVideoBackgroundEffect(replaceEffect);\n }\n }\n },\n [adapter, activeVideoEffectChange, selectableVideoEffects]\n );\n\n if (activeVideoEffectError && activeVideoEffects && activeVideoEffects.length === 0) {\n const noneEffect: VideoBackgroundNoEffect = {\n effectName: 'none'\n };\n adapter.updateSelectedVideoBackgroundEffect(noneEffect);\n }\n return VideoEffectsPaneTrampoline(\n onDismissError,\n activeVideoEffectError,\n\n selectableVideoEffects,\n\n onEffectChange\n );\n};\n\nconst VideoEffectsPaneTrampoline = (\n onDismissError: (error: ActiveErrorMessage) => void,\n activeVideoEffectError?: ActiveErrorMessage,\n selectableVideoEffects?: _VideoEffectsItemProps[],\n onEffectChange?: (effectKey: string) => Promise<void>\n): JSX.Element => {\n const selectedEffect = useSelector(activeVideoBackgroundEffectSelector);\n\n const isCameraOn = useSelector(localVideoSelector).isAvailable;\n\n const showWarning = !isCameraOn && selectedEffect !== 'none';\n\n const locale = useLocale();\n\n return (\n <Stack tokens={{ childrenGap: '0.75rem' }} className={mergeStyles({ paddingLeft: '0.5rem' })}>\n {activeVideoEffectError && isCameraOn && (\n <MessageBar messageBarType={MessageBarType.error} onDismiss={() => onDismissError(activeVideoEffectError)}>\n {locale.strings.call.unableToStartVideoEffect}\n </MessageBar>\n )}\n {showWarning && (\n <MessageBar messageBarType={MessageBarType.warning}>\n {locale.strings.call.cameraOffBackgroundEffectWarningText}\n </MessageBar>\n )}\n <_VideoBackgroundEffectsPicker\n label={locale.strings.call.videoEffectsPaneBackgroundSelectionTitle}\n styles={backgroundPickerStyles}\n options={selectableVideoEffects ?? []}\n onChange={onEffectChange}\n selectedEffectKey={selectedEffect}\n />\n </Stack>\n );\n return <></>;\n};\n\nconst backgroundPickerStyles = {\n label: {\n fontSize: '0.75rem',\n lineHeight: '0.5rem',\n fontWeight: '400'\n }\n};\n"]}
1	+ {"version":3,"file":"VideoEffectsPane.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/common/VideoEffectsPane.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\n\nimport { useCallback, useMemo } from 'react';\n\nimport { MessageBar, MessageBarType, Stack, mergeStyles } from '@fluentui/react';\n\nimport { useLocale } from '../localization';\nimport { ActiveErrorMessage, _VideoEffectsItemProps } from '@internal/react-components';\n\nimport { _VideoBackgroundEffectsPicker } from '@internal/react-components';\n\nimport {\n VideoBackgroundImage,\n VideoBackgroundBlurEffect,\n VideoBackgroundNoEffect,\n VideoBackgroundReplacementEffect\n} from '../CallComposite';\n\nimport { activeVideoBackgroundEffectSelector } from '../CallComposite/selectors/activeVideoBackgroundEffectSelector';\n\nimport { useSelector } from '../CallComposite/hooks/useSelector';\n\nimport { useAdapter } from '../CallComposite/adapter/CallAdapterProvider';\n\nimport { localVideoSelector } from '../CallComposite/selectors/localVideoStreamSelector';\nimport { ActiveVideoEffect } from '../CallComposite/components/SidePane/useVideoEffectsPane';\n\n/*\n Pane that is used to show video effects button\n * @private\n /\n/* @beta */\nexport const VideoEffectsPaneContent = (props: {\n activeVideoEffectError?: ActiveErrorMessage;\n onDismissError: (error: ActiveErrorMessage) => void;\n activeVideoEffectChange: (effect: ActiveVideoEffect) => void;\n updateFocusHandle: React.RefObject<{\n focus: () => void;\n }>;\n}): JSX.Element => {\n const {\n onDismissError,\n activeVideoEffectError,\n\n activeVideoEffectChange\n } = props;\n\n const locale = useLocale();\n\n const adapter = useAdapter();\n\n const strings = locale.strings.call;\n\n const activeVideoEffects = useSelector(localVideoSelector).activeVideoEffects?.activeEffects;\n\n const selectableVideoEffects: _VideoEffectsItemProps[] = useMemo(() => {\n const videoEffects: _VideoEffectsItemProps[] = [\n {\n itemKey: 'none',\n iconProps: {\n iconName: 'RemoveVideoBackgroundEffect'\n },\n title: strings.removeBackgroundEffectButtonLabel,\n tooltipProps: {\n content: strings.removeBackgroundTooltip\n }\n },\n {\n itemKey: 'blur',\n iconProps: {\n iconName: 'BlurVideoBackground'\n },\n title: strings.blurBackgroundEffectButtonLabel,\n tooltipProps: {\n content: strings.blurBackgroundTooltip\n }\n }\n ];\n const videoEffectImages = adapter.getState().videoBackgroundImages;\n\n if (videoEffectImages) {\n videoEffectImages.forEach((img: VideoBackgroundImage) => {\n videoEffects.push({\n itemKey: img.key,\n backgroundProps: {\n url: img.url\n },\n tooltipProps: {\n content: img.tooltipText ?? ''\n }\n });\n });\n }\n return videoEffects;\n }, [strings, adapter]);\n\n const onEffectChange = useCallback(\n async (effectKey: string) => {\n if (effectKey === 'blur') {\n const blurEffect: VideoBackgroundBlurEffect = {\n effectName: effectKey\n };\n activeVideoEffectChange({\n type: 'blur',\n timestamp: new Date(Date.now())\n });\n await adapter.startVideoBackgroundEffect(blurEffect);\n adapter.updateSelectedVideoBackgroundEffect(blurEffect);\n } else if (effectKey === 'none') {\n const noneEffect: VideoBackgroundNoEffect = {\n effectName: effectKey\n };\n await adapter.stopVideoBackgroundEffects();\n adapter.updateSelectedVideoBackgroundEffect(noneEffect);\n } else {\n const backgroundImg = selectableVideoEffects.find((effect) => {\n return effect.itemKey === effectKey;\n });\n if (backgroundImg && backgroundImg.backgroundProps) {\n const replaceEffect: VideoBackgroundReplacementEffect = {\n effectName: 'replacement',\n key: effectKey,\n backgroundImageUrl: backgroundImg.backgroundProps.url\n };\n activeVideoEffectChange({\n type: 'replacement',\n timestamp: new Date(Date.now())\n });\n await adapter.startVideoBackgroundEffect(replaceEffect);\n adapter.updateSelectedVideoBackgroundEffect(replaceEffect);\n }\n }\n },\n [adapter, activeVideoEffectChange, selectableVideoEffects]\n );\n\n if (activeVideoEffectError && activeVideoEffects && activeVideoEffects.length === 0) {\n const noneEffect: VideoBackgroundNoEffect = {\n effectName: 'none'\n };\n adapter.updateSelectedVideoBackgroundEffect(noneEffect);\n }\n\n return VideoEffectsPaneTrampoline(\n onDismissError,\n props.updateFocusHandle,\n activeVideoEffectError,\n selectableVideoEffects,\n onEffectChange\n );\n};\n\nconst VideoEffectsPaneTrampoline = (\n onDismissError: (error: ActiveErrorMessage) => void,\n updateFocusHandle: React.RefObject<{\n focus: () => void;\n }>,\n activeVideoEffectError?: ActiveErrorMessage,\n selectableVideoEffects?: _VideoEffectsItemProps[],\n onEffectChange?: (effectKey: string) => Promise<void>\n): JSX.Element => {\n const selectedEffect = useSelector(activeVideoBackgroundEffectSelector);\n\n const isCameraOn = useSelector(localVideoSelector).isAvailable;\n\n const showWarning = !isCameraOn && selectedEffect !== 'none';\n\n const locale = useLocale();\n\n return (\n <Stack tokens={{ childrenGap: '0.75rem' }} className={mergeStyles({ paddingLeft: '0.5rem' })}>\n {activeVideoEffectError && isCameraOn && (\n <MessageBar messageBarType={MessageBarType.error} onDismiss={() => onDismissError(activeVideoEffectError)}>\n {locale.strings.call.unableToStartVideoEffect}\n </MessageBar>\n )}\n {showWarning && (\n <MessageBar messageBarType={MessageBarType.warning}>\n {locale.strings.call.cameraOffBackgroundEffectWarningText}\n </MessageBar>\n )}\n <_VideoBackgroundEffectsPicker\n label={locale.strings.call.videoEffectsPaneBackgroundSelectionTitle}\n styles={backgroundPickerStyles}\n options={selectableVideoEffects ?? []}\n onChange={onEffectChange}\n selectedEffectKey={selectedEffect}\n componentRef={updateFocusHandle}\n />\n </Stack>\n );\n return <></>;\n};\n\nconst backgroundPickerStyles = {\n label: {\n fontSize: '0.75rem',\n lineHeight: '0.5rem',\n fontWeight: '400'\n }\n};\n"]}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@azure/communication-react",
-  "version": "1.17.0-alpha-202405180013",
+  "version": "1.17.0-alpha-202405220013",
   "sideEffects": false,
   "description": "React library for building modern communication user experiences utilizing Azure Communication Services",
   "keywords": [