@azure/communication-react 1.14.0-alpha-202402290012 → 1.14.0-beta.1

package/dist/dist-esm/react-components/src/components/RTE/RichTextEditor.js

@@ -1,81 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-import React, { useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
-import { ContentEdit, Watermark } from 'roosterjs-editor-plugins';
-import { Editor } from 'roosterjs-editor-core';
-import { Rooster, createUpdateContentPlugin, UpdateMode, createRibbonPlugin, Ribbon } from 'roosterjs-react';
-import { ribbonButtonStyle, ribbonStyle, richTextEditorStyle } from '../styles/RichTextEditor.styles';
-import { useTheme } from '@fluentui/react';
-import { ribbonButtons, ribbonButtonsStrings } from './RTERibbonButtons';
-import { isDarkThemed } from '../../theming/themeUtils';
-/**
- * A component to wrap RoosterJS Rich Text Editor.
- *
- * @beta
- */
-export const RichTextEditor = React.forwardRef((props, ref) => {
-    const { content, onChange, placeholderText, strings } = props;
-    const editor = useRef(null);
-    const [divComponent, setDivComponent] = useState(null);
-    const theme = useTheme();
-    useImperativeHandle(ref, () => {
-        return {
-            focus() {
-                if (editor.current) {
-                    editor.current.focus();
-                }
-            }
-        };
-    }, []);
-    useEffect(() => {
-        var _a, _b;
-        if (content !== ((_a = editor.current) === null || _a === void 0 ? void 0 : _a.getContent())) {
-            (_b = editor.current) === null || _b === void 0 ? void 0 : _b.setContent(content || '');
-        }
-    }, [content]);
-    useEffect(() => {
-        if (divComponent !== null && theme.palette.neutralPrimary !== undefined) {
-            // Adjust color prop for the div component when theme is updated
-            // because doNotAdjustEditorColor is set for Rooster
-            divComponent.style.color = theme.palette.neutralPrimary;
-        }
-    }, [divComponent, theme]);
-    const ribbonPlugin = React.useMemo(() => {
-        return createRibbonPlugin();
-    }, []);
-    const editorCreator = useCallback((div, options) => {
-        editor.current = new Editor(div, options);
-        setDivComponent(div);
-        // Remove the background color of the editor
-        div.style.backgroundColor = 'transparent';
-        return editor.current;
-    }, []);
-    const plugins = useMemo(() => {
-        const contentEdit = new ContentEdit();
-        const placeholderPlugin = new Watermark(placeholderText || '');
-        const updateContentPlugin = createUpdateContentPlugin(UpdateMode.OnContentChangedEvent | UpdateMode.OnUserInput, (content) => {
-            onChange && onChange(content);
-        });
-        return [contentEdit, placeholderPlugin, updateContentPlugin, ribbonPlugin];
-    }, [onChange, placeholderText, ribbonPlugin]);
-    const ribbon = useMemo(() => {
-        const buttons = ribbonButtons(theme);
-        return (
-        //TODO: Add localization for watermark plugin https://github.com/microsoft/roosterjs/issues/2430
-        React.createElement(Ribbon, { styles: ribbonStyle(), buttons: buttons, plugin: ribbonPlugin, overflowButtonProps: {
-                styles: ribbonButtonStyle(theme),
-                menuProps: {
-                    items: [], // CommandBar will determine items rendered in overflow
-                    isBeakVisible: false
-                }
-            }, strings: ribbonButtonsStrings(strings) }));
-    }, [strings, ribbonPlugin, theme]);
-    return (React.createElement("div", null,
-        ribbon,
-        React.createElement(Rooster, { inDarkMode: isDarkThemed(theme), plugins: plugins, className: richTextEditorStyle, editorCreator: editorCreator, 
-            // TODO: confirm the color during inline images implementation
-            imageSelectionBorderColor: 'blue', 
-            // doNotAdjustEditorColor is used to fix the default background color for Rooster component
-            doNotAdjustEditorColor: true })));
-});
-//# sourceMappingURL=RichTextEditor.js.map

package/dist/dist-esm/react-components/src/components/RTE/RichTextEditor.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"RichTextEditor.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/RTE/RichTextEditor.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\nimport React, { useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';\nimport { ContentEdit, Watermark } from 'roosterjs-editor-plugins';\nimport { Editor } from 'roosterjs-editor-core';\nimport type { EditorOptions, IEditor } from 'roosterjs-editor-types-compatible';\nimport { Rooster, createUpdateContentPlugin, UpdateMode, createRibbonPlugin, Ribbon } from 'roosterjs-react';\nimport { ribbonButtonStyle, ribbonStyle, richTextEditorStyle } from '../styles/RichTextEditor.styles';\nimport { useTheme } from '@fluentui/react';\nimport { ribbonButtons, ribbonButtonsStrings } from './RTERibbonButtons';\nimport { RichTextSendBoxStrings } from './RTESendBox';\nimport { isDarkThemed } from '../../theming/themeUtils';\n\n/**\n * Props for {@link RichTextEditor}.\n *\n * @beta\n */\nexport interface RichTextEditorProps {\n  content?: string;\n  onChange: (newValue?: string) => void;\n  placeholderText?: string;\n  strings: Partial<RichTextSendBoxStrings>;\n}\n\n/**\n * Props for {@link RichTextEditor}.\n *\n * @beta\n */\nexport interface RichTextEditorComponentRef {\n  focus: () => void;\n}\n\n/**\n * A component to wrap RoosterJS Rich Text Editor.\n *\n * @beta\n */\nexport const RichTextEditor = React.forwardRef<RichTextEditorComponentRef, RichTextEditorProps>((props, ref) => {\n  const { content, onChange, placeholderText, strings } = props;\n  const editor = useRef<IEditor | null>(null);\n  const [divComponent, setDivComponent] = useState<HTMLDivElement | null>(null);\n  const theme = useTheme();\n  useImperativeHandle(\n    ref,\n    () => {\n      return {\n        focus() {\n          if (editor.current) {\n            editor.current.focus();\n          }\n        }\n      };\n    },\n    []\n  );\n\n  useEffect(() => {\n    if (content !== editor.current?.getContent()) {\n      editor.current?.setContent(content || '');\n    }\n  }, [content]);\n\n  useEffect(() => {\n    if (divComponent !== null && theme.palette.neutralPrimary !== undefined) {\n      // Adjust color prop for the div component when theme is updated\n      // because doNotAdjustEditorColor is set for Rooster\n      divComponent.style.color = theme.palette.neutralPrimary;\n    }\n  }, [divComponent, theme]);\n\n  const ribbonPlugin = React.useMemo(() => {\n    return createRibbonPlugin();\n  }, []);\n\n  const editorCreator = useCallback((div: HTMLDivElement, options: EditorOptions) => {\n    editor.current = new Editor(div, options);\n    setDivComponent(div);\n    // Remove the background color of the editor\n    div.style.backgroundColor = 'transparent';\n    return editor.current;\n  }, []);\n\n  const plugins = useMemo(() => {\n    const contentEdit = new ContentEdit();\n    const placeholderPlugin = new Watermark(placeholderText || '');\n    const updateContentPlugin = createUpdateContentPlugin(\n      UpdateMode.OnContentChangedEvent | UpdateMode.OnUserInput,\n      (content: string) => {\n        onChange && onChange(content);\n      }\n    );\n    return [contentEdit, placeholderPlugin, updateContentPlugin, ribbonPlugin];\n  }, [onChange, placeholderText, ribbonPlugin]);\n\n  const ribbon = useMemo(() => {\n    const buttons = ribbonButtons(theme);\n\n    return (\n      //TODO: Add localization for watermark plugin https://github.com/microsoft/roosterjs/issues/2430\n      <Ribbon\n        styles={ribbonStyle()}\n        buttons={buttons}\n        plugin={ribbonPlugin}\n        overflowButtonProps={{\n          styles: ribbonButtonStyle(theme),\n          menuProps: {\n            items: [], // CommandBar will determine items rendered in overflow\n            isBeakVisible: false\n          }\n        }}\n        strings={ribbonButtonsStrings(strings)}\n      />\n    );\n  }, [strings, ribbonPlugin, theme]);\n\n  return (\n    <div>\n      {ribbon}\n      <Rooster\n        inDarkMode={isDarkThemed(theme)}\n        plugins={plugins}\n        className={richTextEditorStyle}\n        editorCreator={editorCreator}\n        // TODO: confirm the color during inline images implementation\n        imageSelectionBorderColor={'blue'}\n        // doNotAdjustEditorColor is used to fix the default background color for Rooster component\n        doNotAdjustEditorColor={true}\n      />\n    </div>\n  );\n});\n"]}

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

@@ -1,54 +0,0 @@
-/// <reference types="react" />
-import { ControlBarButtonProps } from './ControlBarButton';
-import { ReactionResources } from '..';
-/**
- * Props for {@link ReactionButton}.
- *
- * @beta
- */
-export interface ReactionButtonProps extends ControlBarButtonProps {
-    /**
-     * Optional strings to override in component
-     */
-    strings?: Partial<ReactionButtonStrings>;
-    /**
-     * Click event to send reaction to meeting
-     */
-    onReactionClick: (reaction: string) => Promise<void>;
-    /**
-     * Reaction resource locator and parameters
-     */
-    reactionResources: ReactionResources;
-}
-/**
- * Strings of {@link ReactionButton} that can be overridden.
- *
- * @beta
- */
-export interface ReactionButtonStrings {
-    /** Label of the button. */
-    label: string;
-    /** Tooltip content when the button is disabled. */
-    tooltipDisabledContent?: string;
-    /** Tooltip content when the button is enabled. */
-    tooltipContent?: string;
-    /** Tooltip content of like reaction button. */
-    likeReactionTooltipContent?: string;
-    /** Tooltip content of heart reaction button. */
-    heartReactionTooltipContent?: string;
-    /** Tooltip content of laugh reaction button. */
-    laughReactionTooltipContent?: string;
-    /** Tooltip content of clap reaction button. */
-    applauseReactionTooltipContent?: string;
-    /** Tooltip content of surprised reaction button. */
-    surprisedReactionTooltipContent?: string;
-}
-/**
- * A button to send reactions.
- *
- * Can be used with {@link ControlBar}.
- *
- * @beta
- */
-export declare const ReactionButton: (props: ReactionButtonProps) => JSX.Element;
-//# sourceMappingURL=ReactionButton.d.ts.map

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

@@ -1,89 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-/* @conditional-compile-remove(reaction) */
-import { ContextualMenuItemType, DefaultPalette, IconButton, mergeStyles, TooltipHost, useTheme } from '@fluentui/react';
-/* @conditional-compile-remove(reaction) */
-import React, { useState } from 'react';
-/* @conditional-compile-remove(reaction) */
-import { ControlBarButton } from './ControlBarButton';
-/* @conditional-compile-remove(reaction) */
-import { _HighContrastAwareIcon } from './HighContrastAwareIcon';
-/* @conditional-compile-remove(reaction) */
-import { useLocale } from '../localization';
-/* @conditional-compile-remove(reaction) */
-import { emojiStyles, reactionEmojiMenuStyles, reactionToolTipHostStyle } from './styles/ReactionButton.styles';
-/* @conditional-compile-remove(reaction) */
-import { isDarkThemed } from '../theming/themeUtils';
-/* @conditional-compile-remove(reaction) */
-/**
- * A button to send reactions.
- *
- * Can be used with {@link ControlBar}.
- *
- * @beta
- */
-export const ReactionButton = (props) => {
-    var _a, _b, _c, _d, _e, _f, _g;
-    const localeStrings = useLocale().strings.reactionButton;
-    const strings = Object.assign(Object.assign({}, localeStrings), props.strings);
-    const theme = useTheme();
-    const styles = reactionButtonStyles(theme);
-    const onRenderIcon = () => (React.createElement(_HighContrastAwareIcon, { disabled: props.disabled, iconName: "ReactionButtonIcon" }));
-    const [isHoveredMap, setIsHoveredMap] = useState(new Map());
-    const emojis = ['like', 'heart', 'laugh', 'applause', 'surprised'];
-    const emojiButtonTooltip = new Map([
-        ['like', strings.likeReactionTooltipContent],
-        ['heart', strings.heartReactionTooltipContent],
-        ['laugh', strings.laughReactionTooltipContent],
-        ['applause', strings.applauseReactionTooltipContent],
-        ['surprised', strings.surprisedReactionTooltipContent]
-    ]);
-    const emojiResource = new Map([
-        ['like', (_a = props.reactionResources.likeReaction) === null || _a === void 0 ? void 0 : _a.url],
-        ['heart', (_b = props.reactionResources.heartReaction) === null || _b === void 0 ? void 0 : _b.url],
-        ['laugh', (_c = props.reactionResources.laughReaction) === null || _c === void 0 ? void 0 : _c.url],
-        ['applause', (_d = props.reactionResources.applauseReaction) === null || _d === void 0 ? void 0 : _d.url],
-        ['surprised', (_e = props.reactionResources.surprisedReaction) === null || _e === void 0 ? void 0 : _e.url]
-    ]);
-    const calloutStyle = { root: { padding: 0 }, calloutMain: { padding: '0.5rem' } };
-    const calloutProps = {
-        gapSpace: 4,
-        styles: calloutStyle,
-        backgroundColor: isDarkThemed(theme) ? theme.palette.neutralLighter : ''
-    };
-    const renderEmoji = (item, dismissMenu) => (React.createElement("div", { style: reactionEmojiMenuStyles() }, emojis.map((emoji, index) => {
-        const resourceUrl = emojiResource.get(emoji);
-        return (React.createElement(TooltipHost, { key: index, "data-ui-id": index, hidden: props.disableTooltip, content: emojiButtonTooltip.get(emoji), styles: reactionToolTipHostStyle(), calloutProps: Object.assign({}, calloutProps) },
-            React.createElement(IconButton, { key: index, onClick: () => {
-                    props.onReactionClick(emoji);
-                    setIsHoveredMap((prevMap) => {
-                        return new Map(prevMap).set(emoji, false);
-                    });
-                    dismissMenu();
-                }, style: emojiStyles(resourceUrl ? resourceUrl : '', isHoveredMap.get(emoji) ? 'running' : 'paused'), onMouseEnter: () => setIsHoveredMap((prevMap) => {
-                    return new Map(prevMap).set(emoji, true);
-                }), onMouseLeave: () => setIsHoveredMap((prevMap) => {
-                    return new Map(prevMap).set(emoji, false);
-                }) })));
-    })));
-    const emojiList = [
-        { key: 'reactions', itemType: ContextualMenuItemType.Normal, onRender: renderEmoji }
-    ];
-    return (React.createElement(ControlBarButton, Object.assign({}, props, { className: mergeStyles(styles, props.styles), menuProps: {
-            shouldFocusOnMount: true,
-            items: emojiList
-        }, onRenderIcon: (_f = props.onRenderIcon) !== null && _f !== void 0 ? _f : onRenderIcon, strings: strings, labelKey: (_g = props.labelKey) !== null && _g !== void 0 ? _g : 'reactionButtonLabel', onRenderMenuIcon: () => React.createElement("div", null), disabled: props.disabled })));
-};
-/* @conditional-compile-remove(reaction) */
-const reactionButtonStyles = (theme) => ({
-    rootChecked: {
-        background: theme.palette.themePrimary,
-        color: DefaultPalette.white
-    },
-    rootCheckedHovered: {
-        background: theme.palette.themePrimary,
-        color: DefaultPalette.white
-    },
-    labelChecked: { color: DefaultPalette.white }
-});
-//# sourceMappingURL=ReactionButton.js.map

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

@@ -1 +0,0 @@
-{"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\n/* @conditional-compile-remove(reaction) */\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';\n/* @conditional-compile-remove(reaction) */\nimport React, { useState } from 'react';\n/* @conditional-compile-remove(reaction) */\nimport { ControlBarButton, ControlBarButtonProps } from './ControlBarButton';\n/* @conditional-compile-remove(reaction) */\nimport { _HighContrastAwareIcon } from './HighContrastAwareIcon';\n/* @conditional-compile-remove(reaction) */\nimport { useLocale } from '../localization';\n/* @conditional-compile-remove(reaction) */\nimport { emojiStyles, reactionEmojiMenuStyles, reactionToolTipHostStyle } from './styles/ReactionButton.styles';\n/* @conditional-compile-remove(reaction) */\nimport { isDarkThemed } from '../theming/themeUtils';\n/* @conditional-compile-remove(reaction) */\nimport { ReactionResources } from '..';\n\n/* @conditional-compile-remove(reaction) */\n/**\n * Props for {@link ReactionButton}.\n *\n * @beta\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/* @conditional-compile-remove(reaction) */\n/**\n * Strings of {@link ReactionButton} that can be overridden.\n *\n * @beta\n */\nexport interface ReactionButtonStrings {\n  /** Label of the button. */\n  label: 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 laugh reaction button. */\n  laughReactionTooltipContent?: string;\n  /** Tooltip content of clap reaction button. */\n  applauseReactionTooltipContent?: string;\n  /** Tooltip content of surprised reaction button. */\n  surprisedReactionTooltipContent?: string;\n}\n\n/* @conditional-compile-remove(reaction) */\n/**\n * A button to send reactions.\n *\n * Can be used with {@link ControlBar}.\n *\n * @beta\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 [isHoveredMap, setIsHoveredMap] = useState(new Map());\n  const emojis = ['like', 'heart', 'laugh', 'applause', 'surprised'];\n  const emojiButtonTooltip: Map<string, string | undefined> = new Map([\n    ['like', strings.likeReactionTooltipContent],\n    ['heart', strings.heartReactionTooltipContent],\n    ['laugh', strings.laughReactionTooltipContent],\n    ['applause', strings.applauseReactionTooltipContent],\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    ['laugh', props.reactionResources.laughReaction?.url],\n    ['applause', props.reactionResources.applauseReaction?.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 renderEmoji = (item: IContextualMenuItem, dismissMenu: () => void): React.JSX.Element => (\n    <div style={reactionEmojiMenuStyles()}>\n      {emojis.map((emoji, index) => {\n        const resourceUrl = emojiResource.get(emoji);\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                setIsHoveredMap((prevMap) => {\n                  return new Map(prevMap).set(emoji, false);\n                });\n                dismissMenu();\n              }}\n              style={emojiStyles(resourceUrl ? resourceUrl : '', isHoveredMap.get(emoji) ? 'running' : 'paused')}\n              onMouseEnter={() =>\n                setIsHoveredMap((prevMap) => {\n                  return new Map(prevMap).set(emoji, true);\n                })\n              }\n              onMouseLeave={() =>\n                setIsHoveredMap((prevMap) => {\n                  return new Map(prevMap).set(emoji, false);\n                })\n              }\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    />\n  );\n};\n\n/* @conditional-compile-remove(reaction) */\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/Survey/StarSurvey/StarSurvey.d.ts

@@ -1,64 +0,0 @@
-/// <reference types="react" />
-/**
- * Strings of {@link StarSurvey} that can be overridden.
- *
- * @internal
- */
-export interface _StarSurveyStrings {
-    /**
-     * Helper text displayed below survey question before user choose a response
-     */
-    starSurveyHelperText?: string;
-    /**
-     * Helper text displayed below survey stars after user select one star
-     */
-    starSurveyOneStarText?: string;
-    /**
-     * Helper text displayed below survey stars after user select two star
-     */
-    starSurveyTwoStarText?: string;
-    /**
-     * Helper text displayed below survey stars after user select three star
-     */
-    starSurveyThreeStarText?: string;
-    /**
-     * Helper text displayed below survey stars after user select four star
-     */
-    starSurveyFourStarText?: string;
-    /**
-     * Helper text displayed below survey stars after user select five star
-     */
-    starSurveyFiveStarText?: string;
-    /**
-     * Aria Label for each individual star rating
-     */
-    starRatingAriaLabel?: string;
-}
-/**
- * Props for {@link StarSurvey} component.
- *
- * @internal
- */
-export interface _StarSurveyProps {
-    /**
-     * Custom icon name for selected rating elements.
-     * @defaultvalue FavoriteStarFill
-     */
-    selectedIcon?: string;
-    /**
-     * Custom icon name for unselected rating elements.
-     * @defaultvalue FavoriteStar
-     */
-    unselectedIcon?: string;
-    /** function called on star rating click*/
-    onStarRatingSelected?: (ratings: number) => void;
-    /** Star survey strings */
-    strings?: _StarSurveyStrings;
-}
-/**
- * A component to allow users to send numerical ratings regarding call quality
- *
- * @internal
- */
-export declare const _StarSurvey: (props: _StarSurveyProps) => JSX.Element;
-//# sourceMappingURL=StarSurvey.d.ts.map

package/dist/dist-esm/react-components/src/components/Survey/StarSurvey/StarSurvey.js

@@ -1,55 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-import React, { useState, useCallback } from 'react';
-import { Text, useTheme, Stack } from '@fluentui/react';
-import { Rating, RatingSize } from '@fluentui/react';
-import { helperTextStyle, ratingHelperTextStyle, ratingStyles, titleContainerClassName } from './StarSurvey.styles';
-/**
- * A component to allow users to send numerical ratings regarding call quality
- *
- * @internal
- */
-export const _StarSurvey = (props) => {
-    const { onStarRatingSelected, selectedIcon, unselectedIcon, strings } = props;
-    const [rating, setRating] = useState(0);
-    const [ratingHelperText, setRatingHelperText] = useState('');
-    const theme = useTheme();
-    const onRatingChange = useCallback((ev, rating) => {
-        if (rating) {
-            setRating(rating);
-            switch (rating) {
-                case 1:
-                    setRatingHelperText(strings === null || strings === void 0 ? void 0 : strings.starSurveyOneStarText);
-                    break;
-                case 2:
-                    setRatingHelperText(strings === null || strings === void 0 ? void 0 : strings.starSurveyTwoStarText);
-                    break;
-                case 3:
-                    setRatingHelperText(strings === null || strings === void 0 ? void 0 : strings.starSurveyThreeStarText);
-                    break;
-                case 4:
-                    setRatingHelperText(strings === null || strings === void 0 ? void 0 : strings.starSurveyFourStarText);
-                    break;
-                case 5:
-                    setRatingHelperText(strings === null || strings === void 0 ? void 0 : strings.starSurveyFiveStarText);
-                    break;
-                default:
-                    break;
-            }
-            onStarRatingSelected === null || onStarRatingSelected === void 0 ? void 0 : onStarRatingSelected(rating);
-        }
-    }, [
-        strings === null || strings === void 0 ? void 0 : strings.starSurveyOneStarText,
-        strings === null || strings === void 0 ? void 0 : strings.starSurveyTwoStarText,
-        strings === null || strings === void 0 ? void 0 : strings.starSurveyThreeStarText,
-        strings === null || strings === void 0 ? void 0 : strings.starSurveyFourStarText,
-        strings === null || strings === void 0 ? void 0 : strings.starSurveyFiveStarText,
-        onStarRatingSelected
-    ]);
-    return (React.createElement(Stack, { verticalAlign: "center" },
-        React.createElement(Stack, { className: titleContainerClassName },
-            React.createElement(Text, { className: helperTextStyle(theme) }, strings === null || strings === void 0 ? void 0 : strings.starSurveyHelperText)),
-        React.createElement(Rating, { max: 5, size: RatingSize.Large, defaultRating: 0, allowZeroStars: true, rating: rating, onChange: onRatingChange, styles: ratingStyles(theme), icon: selectedIcon !== null && selectedIcon !== void 0 ? selectedIcon : 'SurveyStarIconFilled', unselectedIcon: unselectedIcon !== null && unselectedIcon !== void 0 ? unselectedIcon : 'SurveyStarIcon', ariaLabelFormat: strings === null || strings === void 0 ? void 0 : strings.starRatingAriaLabel }),
-        React.createElement(Text, { className: ratingHelperTextStyle(theme) }, ratingHelperText)));
-};
-//# sourceMappingURL=StarSurvey.js.map

package/dist/dist-esm/react-components/src/components/Survey/StarSurvey/StarSurvey.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"StarSurvey.js","sourceRoot":"","sources":["../../../../../../../../react-components/src/components/Survey/StarSurvey/StarSurvey.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useState, useCallback } from 'react';\nimport { Text, useTheme, Stack } from '@fluentui/react';\nimport { Rating, RatingSize } from '@fluentui/react';\nimport { _formatString, _pxToRem } from '@internal/acs-ui-common';\nimport { helperTextStyle, ratingHelperTextStyle, ratingStyles, titleContainerClassName } from './StarSurvey.styles';\nimport { _CallSurvey, _CallSurveyResponse } from '../SurveyTypes';\n/**\n * Strings of {@link StarSurvey} that can be overridden.\n *\n * @internal\n */\nexport interface _StarSurveyStrings {\n  /**\n   * Helper text displayed below survey question before user choose a response\n   */\n  starSurveyHelperText?: string;\n  /**\n   * Helper text displayed below survey stars after user select one star\n   */\n  starSurveyOneStarText?: string;\n  /**\n   * Helper text displayed below survey stars after user select two star\n   */\n  starSurveyTwoStarText?: string;\n  /**\n   * Helper text displayed below survey stars after user select three star\n   */\n  starSurveyThreeStarText?: string;\n  /**\n   * Helper text displayed below survey stars after user select four star\n   */\n  starSurveyFourStarText?: string;\n  /**\n   * Helper text displayed below survey stars after user select five star\n   */\n  starSurveyFiveStarText?: string;\n  /**\n   * Aria Label for each individual star rating\n   */\n  starRatingAriaLabel?: string;\n}\n\n/**\n * Props for {@link StarSurvey} component.\n *\n * @internal\n */\nexport interface _StarSurveyProps {\n  /**\n   * Custom icon name for selected rating elements.\n   * @defaultvalue FavoriteStarFill\n   */\n  selectedIcon?: string;\n  /**\n   * Custom icon name for unselected rating elements.\n   * @defaultvalue FavoriteStar\n   */\n  unselectedIcon?: string;\n  /** function called on star rating click*/\n  onStarRatingSelected?: (ratings: number) => void;\n  /** Star survey strings */\n  strings?: _StarSurveyStrings;\n}\n\n/**\n * A component to allow users to send numerical ratings regarding call quality\n *\n * @internal\n */\nexport const _StarSurvey = (props: _StarSurveyProps): JSX.Element => {\n  const { onStarRatingSelected, selectedIcon, unselectedIcon, strings } = props;\n\n  const [rating, setRating] = useState(0);\n\n  const [ratingHelperText, setRatingHelperText] = useState<string | undefined>('');\n\n  const theme = useTheme();\n\n  const onRatingChange = useCallback(\n    (ev: React.FormEvent<HTMLElement>, rating?: number | undefined): void => {\n      if (rating) {\n        setRating(rating);\n\n        switch (rating) {\n          case 1:\n            setRatingHelperText(strings?.starSurveyOneStarText);\n            break;\n          case 2:\n            setRatingHelperText(strings?.starSurveyTwoStarText);\n            break;\n          case 3:\n            setRatingHelperText(strings?.starSurveyThreeStarText);\n            break;\n          case 4:\n            setRatingHelperText(strings?.starSurveyFourStarText);\n            break;\n          case 5:\n            setRatingHelperText(strings?.starSurveyFiveStarText);\n            break;\n          default:\n            break;\n        }\n\n        onStarRatingSelected?.(rating);\n      }\n    },\n    [\n      strings?.starSurveyOneStarText,\n      strings?.starSurveyTwoStarText,\n      strings?.starSurveyThreeStarText,\n      strings?.starSurveyFourStarText,\n      strings?.starSurveyFiveStarText,\n      onStarRatingSelected\n    ]\n  );\n\n  return (\n    <Stack verticalAlign=\"center\">\n      <Stack className={titleContainerClassName}>\n        <Text className={helperTextStyle(theme)}>{strings?.starSurveyHelperText}</Text>\n      </Stack>\n      <Rating\n        max={5}\n        size={RatingSize.Large}\n        defaultRating={0}\n        allowZeroStars\n        rating={rating}\n        onChange={onRatingChange}\n        styles={ratingStyles(theme)}\n        icon={selectedIcon ?? 'SurveyStarIconFilled'}\n        unselectedIcon={unselectedIcon ?? 'SurveyStarIcon'}\n        ariaLabelFormat={strings?.starRatingAriaLabel}\n      />\n      <Text className={ratingHelperTextStyle(theme)}>{ratingHelperText}</Text>\n    </Stack>\n  );\n};\n"]}

package/dist/dist-esm/react-components/src/components/Survey/StarSurvey/StarSurvey.styles.d.ts

@@ -1,18 +0,0 @@
-import { IRatingStyles, Theme } from '@fluentui/react';
-/**
- * @private
- */
-export declare const helperTextStyle: (theme: Theme) => string;
-/**
- * @private
- */
-export declare const ratingHelperTextStyle: (theme: Theme) => string;
-/**
- * @private
- */
-export declare const ratingStyles: (theme: Theme) => Partial<IRatingStyles>;
-/**
- * @private
- */
-export declare const titleContainerClassName: string;
-//# sourceMappingURL=StarSurvey.styles.d.ts.map

package/dist/dist-esm/react-components/src/components/Survey/StarSurvey/StarSurvey.styles.js

@@ -1,57 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-import { mergeStyles } from '@fluentui/react';
-import { _pxToRem } from "../../../../../acs-ui-common/src";
-/**
- * @private
- */
-export const helperTextStyle = (theme) => mergeStyles({
-    fontWeight: 600,
-    fontSize: _pxToRem(16),
-    lineHeight: _pxToRem(20),
-    color: theme.palette.neutralPrimary,
-    paddingTop: _pxToRem(24)
-});
-/**
- * @private
- */
-export const ratingHelperTextStyle = (theme) => mergeStyles({
-    fontWeight: 400,
-    fontSize: _pxToRem(12),
-    lineHeight: _pxToRem(12),
-    color: theme.palette.themePrimary,
-    marginBottom: _pxToRem(8),
-    marginTop: _pxToRem(8),
-    textAlign: 'center'
-});
-/**
- * @private
- */
-export const ratingStyles = (theme) => {
-    return {
-        root: {
-            textAlign: 'center',
-            height: 'auto',
-            marginTop: _pxToRem(8)
-        },
-        ratingStarIsLarge: {
-            height: 'auto',
-            padding: 0
-        },
-        ratingStar: {
-            transform: 'scale(1.4)',
-            margin: _pxToRem(6),
-            height: 'auto'
-        },
-        ratingStarFront: {
-            color: theme.palette.themePrimary
-        }
-    };
-};
-/**
- * @private
- */
-export const titleContainerClassName = mergeStyles({
-    paddingBottom: _pxToRem(6)
-});
-//# sourceMappingURL=StarSurvey.styles.js.map

package/dist/dist-esm/react-components/src/components/Survey/StarSurvey/StarSurvey.styles.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"StarSurvey.styles.js","sourceRoot":"","sources":["../../../../../../../../react-components/src/components/Survey/StarSurvey/StarSurvey.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAwB,WAAW,EAAE,MAAM,iBAAiB,CAAC;AACpE,OAAO,EAAE,QAAQ,EAAE,yCAAgC;AAEnD;;GAEG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,KAAY,EAAU,EAAE,CACtD,WAAW,CAAC;IACV,UAAU,EAAE,GAAG;IACf,QAAQ,EAAE,QAAQ,CAAC,EAAE,CAAC;IACtB,UAAU,EAAE,QAAQ,CAAC,EAAE,CAAC;IACxB,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc;IACnC,UAAU,EAAE,QAAQ,CAAC,EAAE,CAAC;CACzB,CAAC,CAAC;AAEL;;GAEG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,KAAY,EAAU,EAAE,CAC5D,WAAW,CAAC;IACV,UAAU,EAAE,GAAG;IACf,QAAQ,EAAE,QAAQ,CAAC,EAAE,CAAC;IACtB,UAAU,EAAE,QAAQ,CAAC,EAAE,CAAC;IACxB,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,YAAY;IACjC,YAAY,EAAE,QAAQ,CAAC,CAAC,CAAC;IACzB,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC;IACtB,SAAS,EAAE,QAAQ;CACpB,CAAC,CAAC;AAEL;;GAEG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,KAAY,EAA0B,EAAE;IACnE,OAAO;QACL,IAAI,EAAE;YACJ,SAAS,EAAE,QAAQ;YACnB,MAAM,EAAE,MAAM;YACd,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC;SACvB;QACD,iBAAiB,EAAE;YACjB,MAAM,EAAE,MAAM;YACd,OAAO,EAAE,CAAC;SACX;QACD,UAAU,EAAE;YACV,SAAS,EAAE,YAAY;YACvB,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC;YACnB,MAAM,EAAE,MAAM;SACf;QACD,eAAe,EAAE;YACf,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,YAAY;SAClC;KACF,CAAC;AACJ,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAAG,WAAW,CAAC;IACjD,aAAa,EAAE,QAAQ,CAAC,CAAC,CAAC;CAC3B,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IRatingStyles, Theme, mergeStyles } from '@fluentui/react';\nimport { _pxToRem } from '@internal/acs-ui-common';\n\n/**\n * @private\n */\nexport const helperTextStyle = (theme: Theme): string =>\n  mergeStyles({\n    fontWeight: 600,\n    fontSize: _pxToRem(16),\n    lineHeight: _pxToRem(20),\n    color: theme.palette.neutralPrimary,\n    paddingTop: _pxToRem(24)\n  });\n\n/**\n * @private\n */\nexport const ratingHelperTextStyle = (theme: Theme): string =>\n  mergeStyles({\n    fontWeight: 400,\n    fontSize: _pxToRem(12),\n    lineHeight: _pxToRem(12),\n    color: theme.palette.themePrimary,\n    marginBottom: _pxToRem(8),\n    marginTop: _pxToRem(8),\n    textAlign: 'center'\n  });\n\n/**\n * @private\n */\nexport const ratingStyles = (theme: Theme): Partial<IRatingStyles> => {\n  return {\n    root: {\n      textAlign: 'center',\n      height: 'auto',\n      marginTop: _pxToRem(8)\n    },\n    ratingStarIsLarge: {\n      height: 'auto',\n      padding: 0\n    },\n    ratingStar: {\n      transform: 'scale(1.4)',\n      margin: _pxToRem(6),\n      height: 'auto'\n    },\n    ratingStarFront: {\n      color: theme.palette.themePrimary\n    }\n  };\n};\n\n/**\n * @private\n */\nexport const titleContainerClassName = mergeStyles({\n  paddingBottom: _pxToRem(6)\n});\n"]}

package/dist/dist-esm/react-components/src/components/Survey/SurveyTypes.d.ts

@@ -1,141 +0,0 @@
-/**
- *
- * Represents a call survey rating.
- *
- * @internal
- */
-export declare interface _CallRating<TIssue extends _AudioIssue | _OverallIssue | _ScreenshareIssue | _VideoIssue> {
-    /**
-     * The rating value should follow rating scale.
-     */
-    score: number;
-    /**
-     * Call rating type with issues.
-     */
-    issues?: TIssue[];
-    /**
-     * Rating scale default 1-5 rating
-     */
-    scale?: _RatingScale;
-}
-/**
- * Represents the end of call survey.
- * @internal
- */
-export declare interface _CallSurvey {
-    /**
-     * Overall call rating with optional overall issues
-     */
-    overallRating?: _CallRating<_OverallIssue>;
-    /**
-     * Audio rating with optional audio issues
-     */
-    audioRating?: _CallRating<_AudioIssue>;
-    /**
-     * Video rating with optional video issues
-     */
-    videoRating?: _CallRating<_VideoIssue>;
-    /**
-     * Screenshare rating with optional screenshare issues
-     */
-    screenshareRating?: _CallRating<_ScreenshareIssue>;
-}
-/**
- * Represents the end of call survey response.
- * @internal
- */
-export declare interface _CallSurveyResponse extends _CallSurvey {
-    /**
-     * Uniquely identify the call survey
-     */
-    readonly id: string;
-    /**
-     * Uniquely identify the call being served
-     */
-    readonly callId: string;
-    /**
-     * The participant submitting the survey
-     */
-    readonly localParticipantId: string;
-}
-/**
- * Represents the end of call survey call issues.
- * @example
- * CallCannotJoin - participant is unable to join the call.
- * CallCannotInvite - participant is unable to add another participant in the call.
- * HadToRejoin - participant rejoined the call due the call quality issue.
- * CallEndedUnexpectedly - when the call ended unexpectedly.
- * OtherIssues - any other overall call issue not listed here.
- *
- * @internal
- *
- */
-export declare type _OverallIssue = 'CallCannotJoin' | 'CallCannotInvite' | 'HadToRejoin' | 'CallEndedUnexpectedly' | 'OtherIssues';
-/**
- * Represents the end of call survey audio issues.
- * @example
- * NoLocalAudio - other participants unable to hear me.
- * NoRemoteAudio - participant unable to hear another participant's audio.
- * Echo - heard echo.
- * AudioNoise - heard audio noise.
- * LowVolume - call audio volume was low.
- * AudioStoppedUnexpectedly - call audio stopped unexpectedly.
- * DistortedSpeech - audio was distorted.
- * AudioInterruption - audio was interrupted.
- * OtherIssues - any other audio issue not listed here.
- *
- * @internal
- *
- */
-export declare type _AudioIssue = 'NoLocalAudio' | 'NoRemoteAudio' | 'Echo' | 'AudioNoise' | 'LowVolume' | 'AudioStoppedUnexpectedly' | 'DistortedSpeech' | 'AudioInterruption' | 'OtherIssues';
-/**
- * Represents the end of call survey screenshare issues.
- * @example
- * NoContentLocal - other participants unable to see my screen.
- * NoContentRemote - participant unable to saw another participant's screen share.
- * CannotPresent - participant was unable to share the screen.
- * LowQuality - screen share video quality was low.
- * Freezes - screen share freezes.
- * StoppedUnexpectedly - screen share stopped unexpectedly.
- * LargeDelay - watch screen share having large delay.
- * OtherIssues - any other screen share issue not listed here.
- *
- * @internal
- *
- */
-export declare type _ScreenshareIssue = 'NoContentLocal' | 'NoContentRemote' | 'CannotPresent' | 'LowQuality' | 'Freezes' | 'StoppedUnexpectedly' | 'LargeDelay' | 'OtherIssues';
-/**
- * Represents the end of call survey video issues.
- * @example
- * NoVideoReceived - participant unable to saw another participant's video.
- * NoVideoSent - other participants unable to see me.
- * LowQuality - video quality was low.
- * Freezes - video freezes.
- * StoppedUnexpectedly - video stopped unexpectedly.
- * DarkVideoReceived - participant receives dark video.
- * AudioVideoOutOfSync - participant watch video and audio out of sync.
- * OtherIssues - any other video issue not listed here.
- *
- * @internal
- *
- */
-export declare type _VideoIssue = 'NoVideoReceived' | 'NoVideoSent' | 'LowQuality' | 'Freezes' | 'StoppedUnexpectedly' | 'DarkVideoReceived' | 'AudioVideoOutOfSync' | 'OtherIssues';
-/**
- * Rating scale to override the default scale
- * @internal
- */
-export declare interface _RatingScale {
-    /**
-     * Lower bound of the rating value 0 to 100 (default 1)
-     */
-    lowerBound: number;
-    /**
-     * Upper bound of the rating value 0 to 100 (default 5)
-     */
-    upperBound: number;
-    /**
-     * The rating value greater than the threshold will be considered as good
-     */
-    lowScoreThreshold: number;
-}
-//# sourceMappingURL=SurveyTypes.d.ts.map

package/dist/dist-esm/react-components/src/components/Survey/SurveyTypes.js

@@ -1,4 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-export {};
-//# sourceMappingURL=SurveyTypes.js.map