@azure/communication-react 1.14.0 → 1.14.1-alpha-202403261958

package/dist/dist-esm/react-components/src/components/styles/ReactionOverlay.style.js

@@ -0,0 +1,259 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+/* @conditional-compile-remove(reaction) */
+import { keyframes, memoizeFunction } from '@fluentui/react';
+/* @conditional-compile-remove(reaction) */
+/**
+ * Generate random float between two numbers, including min and max
+ * @private
+ */
+export function getRandomFloat(minValue, maxValue) {
+    return minValue + Math.random() * (maxValue - minValue);
+}
+/* @conditional-compile-remove(reaction) */
+/**
+ * Generate random int between two numbers, including min and max
+ * @private
+ */
+export function getRandomInt(minValue, maxValue) {
+    return Math.floor(getRandomFloat(minValue, maxValue + 1));
+}
+/* @conditional-compile-remove(reaction) */
+/**
+ * Calculate the start position for a new reaction in the prescriptive wave pattern
+ * @private
+ */
+export function generateStartPositionWave(index, halfCanvasWidth, isOriginAtCanvasCenter = true) {
+    const midPointCoordinate = isOriginAtCanvasCenter ? halfCanvasWidth : 0;
+    // If the # of reactions on the screen is 0 or a multiple of 25, then we set direction to 0.
+    // Otherwise, every other reaction goes right, left in alternating directions.
+    // To get alternating sequence, we take n % 2 (which gives 0 or 1), multiple result by 2
+    // and subtract 1, which will result in -1 or 1
+    const direction = index === 0 ? 0 : (index % 2) * 2 - 1;
+    if (direction === 0) {
+        return midPointCoordinate;
+    }
+    // Now we get how far the reaction starts from center
+    const adjustment = scaleStartPos(index);
+    return midPointCoordinate + direction * adjustment * halfCanvasWidth;
+}
+/* @conditional-compile-remove(reaction) */
+/**
+ * @private
+ */
+export const reactionOverlayStyle = {
+    bottom: '0',
+    height: '50%',
+    pointerEvents: 'none',
+    position: 'absolute',
+    width: '100%'
+};
+/* @conditional-compile-remove(reaction) */
+/**
+ * @private
+ */
+export function getReactionMovementStyle(reactionXPoint) {
+    return {
+        position: 'absolute',
+        left: `${reactionXPoint}px`
+    };
+}
+/* @conditional-compile-remove(reaction) */
+/**
+ * Scale metric to determine the start position of a reaction in presentation mode to avoid overlap.
+ * @private
+ */
+function scaleStartPos(index) {
+    switch (index) {
+        case 1:
+        case 2:
+            return 0.3;
+        case 3:
+        case 4:
+            return 0.6;
+        case 5:
+        case 6:
+            return 0.9;
+        case 7:
+        case 8:
+            return 0.75;
+        case 9:
+        case 18:
+            return 0.375;
+        case 10:
+        case 23:
+            return 0.525;
+        case 11:
+        case 16:
+            return 0.15;
+        case 12:
+        case 15:
+            return 0.225;
+        case 13:
+        case 14:
+            return 0.075;
+        case 17:
+        case 24:
+            return 0.45;
+        case 19:
+        case 20:
+            return 0.675;
+        case 21:
+        case 22:
+            return 0.825;
+        default:
+            return 0;
+    }
+}
+/* @conditional-compile-remove(reaction) */
+/**
+ * @private
+ */
+const ReactionStyleBuckets = [
+    {
+        sizeScale: 1,
+        heightMaxScale: 1 * 0.95,
+        opacityMax: 1
+    },
+    {
+        sizeScale: 0.9,
+        heightMaxScale: 0.7 * 0.95,
+        opacityMax: 0.9
+    },
+    {
+        sizeScale: 0.8,
+        heightMaxScale: 0.4 * 0.95,
+        opacityMax: 0.8
+    }
+];
+/* @conditional-compile-remove(reaction) */
+/**
+ * @private
+ */
+const ReactionBurstStyleBuckets = [
+    {
+        sizeScale: 0.6,
+        opacityMax: 0.75,
+        heightMaxScale: 0.93,
+        heightMinScale: 0.27
+    },
+    {
+        sizeScale: 0.6,
+        opacityMax: 0.75,
+        heightMaxScale: 0.8,
+        heightMinScale: 0.13
+    },
+    {
+        sizeScale: 0.6,
+        opacityMax: 0.75,
+        heightMaxScale: 0.67,
+        heightMinScale: 0
+    }
+];
+/* @conditional-compile-remove(reaction) */
+/**
+ * Return a style bucket based on the number of active sprites.
+ * For example, the first three reactions should appear at maximum
+ * height, width, and opacity.
+ * @private
+ */
+export function getReactionStyleBucket(activeSpritesCount) {
+    const index = activeSpritesCount < 3 ? 0 : activeSpritesCount < 5 ? getRandomInt(0, 1) : getRandomInt(0, 2);
+    return ReactionStyleBuckets[index];
+}
+/* @conditional-compile-remove(reaction) */
+/**
+ * Return a style bucket for burst scenario
+ * @private
+ */
+export function getReactionBurstStyleBucket() {
+    const index = getRandomInt(0, ReactionBurstStyleBuckets.length - 1);
+    return ReactionBurstStyleBuckets[index];
+}
+/* @conditional-compile-remove(reaction) */
+/**
+ * @private
+ */
+export const moveFrames = memoizeFunction((maxHeight, travelHeight) => keyframes({
+    '0%': {
+        transform: `translateY(${maxHeight}px)`
+    },
+    '100%': {
+        transform: `translateY(${travelHeight}px)`
+    }
+}));
+/* @conditional-compile-remove(reaction) */
+/**
+ * @private
+ */
+export const moveAnimationStyles = (maxHeight, travelHeight) => {
+    return {
+        animationName: moveFrames(maxHeight, travelHeight),
+        animationFillMode: 'forwards',
+        animationDuration: `4.133s`,
+        animationTimingFunction: 'cubic-bezier(0, 0.83, 0.19, 1.09)'
+    };
+};
+/* @conditional-compile-remove(reaction) */
+/**
+ * @private
+ */
+export const opacityTransition = memoizeFunction((maxOpacity) => keyframes({
+    '0%': {
+        opacity: 0
+    },
+    '31.2%': {
+        opacity: maxOpacity
+    },
+    '67.2%': {
+        opacity: maxOpacity
+    },
+    '100%': {
+        opacity: 0,
+        display: 'none',
+        visibility: 'hidden'
+    }
+}));
+/* @conditional-compile-remove(reaction) */
+/**
+ * @private
+ */
+export const opacityAnimationStyles = (maxOpacity) => {
+    return {
+        animationName: opacityTransition(maxOpacity),
+        animationFillMode: 'forwards',
+        animationDuration: `4.133s`
+    };
+};
+/* @conditional-compile-remove(reaction) */
+/**
+ * @private
+ */
+export const spriteFrames = memoizeFunction((numOfFrames, displaySizePx) => keyframes({
+    from: {
+        backgroundPosition: '0px 0px'
+    },
+    to: {
+        backgroundPosition: `0px -${numOfFrames * displaySizePx}px`
+    }
+}));
+/* @conditional-compile-remove(reaction) */
+/**
+ * @private
+ */
+export const spriteAnimationStyles = (numOfFrames, displaySizePx, imageUrl) => {
+    return {
+        height: `${displaySizePx}px`,
+        width: `${displaySizePx}px`,
+        backgroundImage: `url(${imageUrl})`,
+        backgroundRepeat: 'no-repeat',
+        animationName: spriteFrames(numOfFrames, displaySizePx),
+        animationDuration: `${numOfFrames / 24}s`,
+        animationFillMode: `forwards`,
+        animationIterationCount: 'infinite',
+        animationTimingFunction: `steps(${numOfFrames})`,
+        backgroundSize: `${displaySizePx}px ${numOfFrames * displaySizePx}px`,
+        transform: `scale(${displaySizePx}/128)`
+    };
+};
+//# sourceMappingURL=ReactionOverlay.style.js.map

package/dist/dist-esm/react-components/src/components/styles/ReactionOverlay.style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReactionOverlay.style.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/ReactionOverlay.style.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n/* @conditional-compile-remove(reaction) */\nimport { keyframes, memoizeFunction } from '@fluentui/react';\n\n/* @conditional-compile-remove(reaction) */\n/**\n * Generate random float between two numbers, including min and max\n * @private\n */\nexport function getRandomFloat(minValue: number, maxValue: number): number {\n  return minValue + Math.random() * (maxValue - minValue);\n}\n\n/* @conditional-compile-remove(reaction) */\n/**\n * Generate random int between two numbers, including min and max\n * @private\n */\nexport function getRandomInt(minValue: number, maxValue: number): number {\n  return Math.floor(getRandomFloat(minValue, maxValue + 1));\n}\n\n/* @conditional-compile-remove(reaction) */\n/**\n * Calculate the start position for a new reaction in the prescriptive wave pattern\n * @private\n */\nexport function generateStartPositionWave(\n  index: number,\n  halfCanvasWidth: number,\n  isOriginAtCanvasCenter: boolean = true\n): number {\n  const midPointCoordinate = isOriginAtCanvasCenter ? halfCanvasWidth : 0;\n\n  // If the # of reactions on the screen is 0 or a multiple of 25, then we set direction to 0.\n  // Otherwise, every other reaction goes right, left in alternating directions.\n  // To get alternating sequence, we take n % 2 (which gives 0 or 1), multiple result by 2\n  // and subtract 1, which will result in -1 or 1\n  const direction = index === 0 ? 0 : (index % 2) * 2 - 1;\n  if (direction === 0) {\n    return midPointCoordinate;\n  }\n\n  // Now we get how far the reaction starts from center\n  const adjustment = scaleStartPos(index);\n  return midPointCoordinate + direction * adjustment * halfCanvasWidth;\n}\n\n/* @conditional-compile-remove(reaction) */\n/**\n * @private\n */\nexport const reactionOverlayStyle: React.CSSProperties = {\n  bottom: '0',\n  height: '50%',\n  pointerEvents: 'none',\n  position: 'absolute',\n  width: '100%'\n};\n\n/* @conditional-compile-remove(reaction) */\n/**\n * @private\n */\nexport function getReactionMovementStyle(reactionXPoint: number): React.CSSProperties {\n  return {\n    position: 'absolute',\n    left: `${reactionXPoint}px`\n  };\n}\n\n/* @conditional-compile-remove(reaction) */\n/**\n * Scale metric to determine the start position of a reaction in presentation mode to avoid overlap.\n * @private\n */\nfunction scaleStartPos(index: number): number {\n  switch (index) {\n    case 1:\n    case 2:\n      return 0.3;\n    case 3:\n    case 4:\n      return 0.6;\n    case 5:\n    case 6:\n      return 0.9;\n    case 7:\n    case 8:\n      return 0.75;\n    case 9:\n    case 18:\n      return 0.375;\n    case 10:\n    case 23:\n      return 0.525;\n    case 11:\n    case 16:\n      return 0.15;\n    case 12:\n    case 15:\n      return 0.225;\n    case 13:\n    case 14:\n      return 0.075;\n    case 17:\n    case 24:\n      return 0.45;\n    case 19:\n    case 20:\n      return 0.675;\n    case 21:\n    case 22:\n      return 0.825;\n    default:\n      return 0;\n  }\n}\n\n/* @conditional-compile-remove(reaction) */\n/**\n * @private\n */\nconst ReactionStyleBuckets: Array<IReactionStyleBucket> = [\n  {\n    sizeScale: 1,\n    heightMaxScale: 1 * 0.95,\n    opacityMax: 1\n  },\n  {\n    sizeScale: 0.9,\n    heightMaxScale: 0.7 * 0.95,\n    opacityMax: 0.9\n  },\n  {\n    sizeScale: 0.8,\n    heightMaxScale: 0.4 * 0.95,\n    opacityMax: 0.8\n  }\n];\n\n/* @conditional-compile-remove(reaction) */\n/**\n * @private\n */\nconst ReactionBurstStyleBuckets: Array<IReactionStyleBucket> = [\n  {\n    sizeScale: 0.6,\n    opacityMax: 0.75,\n    heightMaxScale: 0.93,\n    heightMinScale: 0.27\n  },\n  {\n    sizeScale: 0.6,\n    opacityMax: 0.75,\n    heightMaxScale: 0.8,\n    heightMinScale: 0.13\n  },\n  {\n    sizeScale: 0.6,\n    opacityMax: 0.75,\n    heightMaxScale: 0.67,\n    heightMinScale: 0\n  }\n];\n\n/* @conditional-compile-remove(reaction) */\n/**\n * @private\n */\nexport interface IReactionStyleBucket {\n  sizeScale: number;\n  opacityMax: number;\n  heightMaxScale: number;\n  heightMinScale?: number;\n}\n\n/* @conditional-compile-remove(reaction) */\n/**\n * Return a style bucket based on the number of active sprites.\n * For example, the first three reactions should appear at maximum\n * height, width, and opacity.\n * @private\n */\nexport function getReactionStyleBucket(activeSpritesCount: number): IReactionStyleBucket {\n  const index = activeSpritesCount < 3 ? 0 : activeSpritesCount < 5 ? getRandomInt(0, 1) : getRandomInt(0, 2);\n  return ReactionStyleBuckets[index];\n}\n\n/* @conditional-compile-remove(reaction) */\n/**\n * Return a style bucket for burst scenario\n * @private\n */\nexport function getReactionBurstStyleBucket(): IReactionStyleBucket {\n  const index = getRandomInt(0, ReactionBurstStyleBuckets.length - 1);\n  return ReactionBurstStyleBuckets[index];\n}\n\n/* @conditional-compile-remove(reaction) */\n/**\n * @private\n */\nexport const moveFrames = memoizeFunction((maxHeight, travelHeight) =>\n  keyframes({\n    '0%': {\n      transform: `translateY(${maxHeight}px)`\n    },\n    '100%': {\n      transform: `translateY(${travelHeight}px)`\n    }\n  })\n);\n\n/* @conditional-compile-remove(reaction) */\n/**\n * @private\n */\nexport const moveAnimationStyles = (maxHeight: number, travelHeight: number): React.CSSProperties => {\n  return {\n    animationName: moveFrames(maxHeight, travelHeight),\n    animationFillMode: 'forwards',\n    animationDuration: `4.133s`,\n    animationTimingFunction: 'cubic-bezier(0, 0.83, 0.19, 1.09)'\n  };\n};\n\n/* @conditional-compile-remove(reaction) */\n/**\n * @private\n */\nexport const opacityTransition = memoizeFunction((maxOpacity) =>\n  keyframes({\n    '0%': {\n      opacity: 0\n    },\n    '31.2%': {\n      opacity: maxOpacity\n    },\n    '67.2%': {\n      opacity: maxOpacity\n    },\n    '100%': {\n      opacity: 0,\n      display: 'none',\n      visibility: 'hidden'\n    }\n  })\n);\n\n/* @conditional-compile-remove(reaction) */\n/**\n * @private\n */\nexport const opacityAnimationStyles = (maxOpacity: number): React.CSSProperties => {\n  return {\n    animationName: opacityTransition(maxOpacity),\n    animationFillMode: 'forwards',\n    animationDuration: `4.133s`\n  };\n};\n\n/* @conditional-compile-remove(reaction) */\n/**\n * @private\n */\nexport const spriteFrames = memoizeFunction((numOfFrames, displaySizePx) =>\n  keyframes({\n    from: {\n      backgroundPosition: '0px 0px'\n    },\n    to: {\n      backgroundPosition: `0px -${numOfFrames * displaySizePx}px`\n    }\n  })\n);\n\n/* @conditional-compile-remove(reaction) */\n/**\n * @private\n */\nexport const spriteAnimationStyles = (\n  numOfFrames: number,\n  displaySizePx: number,\n  imageUrl: string\n): React.CSSProperties => {\n  return {\n    height: `${displaySizePx}px`,\n    width: `${displaySizePx}px`,\n    backgroundImage: `url(${imageUrl})`,\n    backgroundRepeat: 'no-repeat',\n    animationName: spriteFrames(numOfFrames, displaySizePx),\n    animationDuration: `${numOfFrames / 24}s`,\n    animationFillMode: `forwards`,\n    animationIterationCount: 'infinite',\n    animationTimingFunction: `steps(${numOfFrames})`,\n    backgroundSize: `${displaySizePx}px ${numOfFrames * displaySizePx}px`,\n    transform: `scale(${displaySizePx}/128)`\n  };\n};\n"]}

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

@@ -0,0 +1,54 @@
+import { IButtonStyles, ICommandBarStyles, IContextualMenuStyles, Theme } from '@fluentui/react';
+import { RichTextEditorStyleProps } from '../RichTextEditor/RichTextEditor';
+/**
+ * @private
+ */
+export declare const richTextEditorStyle: (props: {
+    minHeight: string;
+    maxHeight: string;
+}) => string;
+/**
+ * @private
+ */
+export declare const richTextEditorWrapperStyle: (theme: Theme, addTopOffset: boolean) => string;
+/**
+ * @private
+ */
+export declare const richTextActionButtonsStackStyle: string;
+/**
+ * @private
+ */
+export declare const richTextActionButtonsStyle: string;
+/**
+ * @private
+ */
+export declare const richTextActionButtonsDividerStyle: (theme: Theme) => string;
+/**
+ * @private
+ */
+export declare const ribbonOverflowButtonStyle: (theme: Theme) => Partial<IContextualMenuStyles>;
+/**
+ * @private
+ */
+export declare const ribbonButtonStyle: (theme: Theme) => Partial<IButtonStyles>;
+/**
+ * @private
+ */
+export declare const ribbonDividerStyle: (theme: Theme) => Partial<IButtonStyles>;
+/**
+ * @private
+ */
+export declare const ribbonStyle: Partial<ICommandBarStyles>;
+/**
+ * @private
+ */
+export declare const richTextFormatButtonIconStyle: (theme: Theme, isSelected: boolean) => string;
+/**
+ * @private
+ */
+export declare const editBoxRichTextEditorStyle: () => RichTextEditorStyleProps;
+/**
+ * @private
+ */
+export declare const sendBoxRichTextEditorStyle: (isExpanded: boolean) => RichTextEditorStyleProps;
+//# sourceMappingURL=RichTextEditor.styles.d.ts.map

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

@@ -0,0 +1,156 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+import { mergeStyles } from '@fluentui/react';
+import { editorTextBoxButtonStyle } from './SendBox.styles';
+/**
+ * @private
+ */
+export const richTextEditorStyle = (props) => {
+    return mergeStyles({
+        border: 'none',
+        overflow: 'auto',
+        outline: 'none',
+        minHeight: props.minHeight,
+        maxHeight: props.maxHeight,
+        maxWidth: '100%'
+    });
+};
+/**
+ * @private
+ */
+export const richTextEditorWrapperStyle = (theme, addTopOffset) => {
+    return mergeStyles({
+        paddingTop: `${addTopOffset ? '0.5rem' : '0'}`,
+        paddingInlineStart: `0.75rem`,
+        paddingInlineEnd: `0.75rem`,
+        lineHeight: '1.25rem',
+        maxWidth: '100%',
+        color: theme.palette.neutralPrimary
+    });
+};
+/**
+ * @private
+ */
+export const richTextActionButtonsStackStyle = mergeStyles({
+    paddingRight: `0.125rem`
+});
+/**
+ * @private
+ */
+export const richTextActionButtonsStyle = mergeStyles({
+    height: '2.25rem',
+    width: '2.25rem',
+    margin: 'auto'
+});
+/**
+ * @private
+ */
+export const richTextActionButtonsDividerStyle = (theme) => {
+    return mergeStyles({
+        color: theme.palette.neutralQuaternaryAlt,
+        margin: '0.375rem -0.5rem 0 -0.5rem',
+        backgroundColor: 'transparent'
+    });
+};
+/**
+ * @private
+ */
+export const ribbonOverflowButtonStyle = (theme) => {
+    return {
+        subComponentStyles: {
+            menuItem: {
+                icon: { color: theme.palette.neutralPrimary, paddingTop: '0.5rem' },
+                root: ribbonOverflowButtonRootStyles(theme)
+            },
+            callout: {}
+        }
+    };
+};
+const ribbonOverflowButtonRootStyles = (theme) => {
+    return {
+        selectors: {
+            // Icon's color doesn't work here because of the specificity
+            '&:hover': {
+                selectors: {
+                    '.ms-ContextualMenu-icon': {
+                        color: theme.palette.neutralPrimary
+                    }
+                }
+            }
+        }
+    };
+};
+const ribbonButtonRootStyles = (theme) => {
+    return {
+        backgroundColor: 'transparent',
+        selectors: {
+            // Icon's color doesn't work here because of the specificity
+            '.ms-Button-icon': {
+                color: theme.palette.themePrimary
+            },
+            '.ms-Button-menuIcon': {
+                color: theme.palette.themePrimary
+            }
+        }
+    };
+};
+/**
+ * @private
+ */
+export const ribbonButtonStyle = (theme) => {
+    return {
+        icon: { color: theme.palette.neutralPrimary, height: 'auto' },
+        menuIcon: { color: theme.palette.neutralPrimary, height: 'auto' },
+        root: { minWidth: 'auto', backgroundColor: 'transparent' },
+        rootChecked: ribbonButtonRootStyles(theme),
+        rootHovered: ribbonButtonRootStyles(theme),
+        rootCheckedHovered: ribbonButtonRootStyles(theme),
+        rootCheckedPressed: ribbonButtonRootStyles(theme),
+        rootPressed: ribbonButtonRootStyles(theme),
+        rootExpanded: ribbonButtonRootStyles(theme),
+        rootExpandedHovered: ribbonButtonRootStyles(theme)
+    };
+};
+/**
+ * @private
+ */
+export const ribbonDividerStyle = (theme) => {
+    return {
+        icon: { color: theme.palette.neutralQuaternaryAlt, margin: '0 -0.5rem', height: 'auto' },
+        root: { margin: '0', padding: '0', minWidth: 'auto' }
+    };
+};
+/**
+ * @private
+ */
+export const ribbonStyle = {
+    // Override for the default white color of the Ribbon component
+    root: { backgroundColor: 'transparent' }
+};
+/**
+ * @private
+ */
+export const richTextFormatButtonIconStyle = (theme, isSelected) => {
+    return mergeStyles(editorTextBoxButtonStyle, {
+        color: isSelected ? theme.palette.themePrimary : theme.palette.neutralSecondary
+    });
+};
+/**
+ * @private
+ */
+export const editBoxRichTextEditorStyle = () => {
+    return {
+        minHeight: '2.25rem',
+        maxHeight: '2.25rem'
+    };
+};
+/**
+ * @private
+ */
+export const sendBoxRichTextEditorStyle = (isExpanded) => {
+    return {
+        minHeight: isExpanded ? '5rem' : '1.25rem',
+        maxHeight: '5rem'
+    };
+};
+//# sourceMappingURL=RichTextEditor.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RichTextEditor.styles.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/RichTextEditor.styles.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\nimport { IButtonStyles, ICommandBarStyles, IContextualMenuStyles, IStyle, Theme, mergeStyles } from '@fluentui/react';\nimport { editorTextBoxButtonStyle } from './SendBox.styles';\nimport { RichTextEditorStyleProps } from '../RichTextEditor/RichTextEditor';\n\n/**\n * @private\n */\nexport const richTextEditorStyle = (props: { minHeight: string; maxHeight: string }): string => {\n  return mergeStyles({\n    border: 'none',\n    overflow: 'auto',\n    outline: 'none',\n    minHeight: props.minHeight,\n    maxHeight: props.maxHeight,\n    maxWidth: '100%'\n  });\n};\n\n/**\n * @private\n */\nexport const richTextEditorWrapperStyle = (theme: Theme, addTopOffset: boolean): string => {\n  return mergeStyles({\n    paddingTop: `${addTopOffset ? '0.5rem' : '0'}`,\n    paddingInlineStart: `0.75rem`,\n    paddingInlineEnd: `0.75rem`,\n    lineHeight: '1.25rem',\n    maxWidth: '100%',\n    color: theme.palette.neutralPrimary\n  });\n};\n\n/**\n * @private\n */\nexport const richTextActionButtonsStackStyle = mergeStyles({\n  paddingRight: `0.125rem`\n});\n\n/**\n * @private\n */\nexport const richTextActionButtonsStyle = mergeStyles({\n  height: '2.25rem',\n  width: '2.25rem',\n  margin: 'auto'\n});\n\n/**\n * @private\n */\nexport const richTextActionButtonsDividerStyle = (theme: Theme): string => {\n  return mergeStyles({\n    color: theme.palette.neutralQuaternaryAlt,\n    margin: '0.375rem -0.5rem 0 -0.5rem',\n    backgroundColor: 'transparent'\n  });\n};\n\n/**\n * @private\n */\nexport const ribbonOverflowButtonStyle = (theme: Theme): Partial<IContextualMenuStyles> => {\n  return {\n    subComponentStyles: {\n      menuItem: {\n        icon: { color: theme.palette.neutralPrimary, paddingTop: '0.5rem' },\n        root: ribbonOverflowButtonRootStyles(theme)\n      },\n      callout: {}\n    }\n  };\n};\n\nconst ribbonOverflowButtonRootStyles = (theme: Theme): IStyle => {\n  return {\n    selectors: {\n      // Icon's color doesn't work here because of the specificity\n      '&:hover': {\n        selectors: {\n          '.ms-ContextualMenu-icon': {\n            color: theme.palette.neutralPrimary\n          }\n        }\n      }\n    }\n  };\n};\n\nconst ribbonButtonRootStyles = (theme: Theme): IStyle => {\n  return {\n    backgroundColor: 'transparent',\n    selectors: {\n      // Icon's color doesn't work here because of the specificity\n      '.ms-Button-icon': {\n        color: theme.palette.themePrimary\n      },\n      '.ms-Button-menuIcon': {\n        color: theme.palette.themePrimary\n      }\n    }\n  };\n};\n\n/**\n * @private\n */\nexport const ribbonButtonStyle = (theme: Theme): Partial<IButtonStyles> => {\n  return {\n    icon: { color: theme.palette.neutralPrimary, height: 'auto' },\n    menuIcon: { color: theme.palette.neutralPrimary, height: 'auto' },\n    root: { minWidth: 'auto', backgroundColor: 'transparent' },\n    rootChecked: ribbonButtonRootStyles(theme),\n    rootHovered: ribbonButtonRootStyles(theme),\n    rootCheckedHovered: ribbonButtonRootStyles(theme),\n    rootCheckedPressed: ribbonButtonRootStyles(theme),\n    rootPressed: ribbonButtonRootStyles(theme),\n    rootExpanded: ribbonButtonRootStyles(theme),\n    rootExpandedHovered: ribbonButtonRootStyles(theme)\n  };\n};\n\n/**\n * @private\n */\nexport const ribbonDividerStyle = (theme: Theme): Partial<IButtonStyles> => {\n  return {\n    icon: { color: theme.palette.neutralQuaternaryAlt, margin: '0 -0.5rem', height: 'auto' },\n    root: { margin: '0', padding: '0', minWidth: 'auto' }\n  };\n};\n\n/**\n * @private\n */\nexport const ribbonStyle: Partial<ICommandBarStyles> = {\n  // Override for the default white color of the Ribbon component\n  root: { backgroundColor: 'transparent' }\n};\n\n/**\n * @private\n */\nexport const richTextFormatButtonIconStyle = (theme: Theme, isSelected: boolean): string => {\n  return mergeStyles(editorTextBoxButtonStyle, {\n    color: isSelected ? theme.palette.themePrimary : theme.palette.neutralSecondary\n  });\n};\n\n/**\n * @private\n */\nexport const editBoxRichTextEditorStyle = (): RichTextEditorStyleProps => {\n  return {\n    minHeight: '2.25rem',\n    maxHeight: '2.25rem'\n  };\n};\n\n/**\n * @private\n */\nexport const sendBoxRichTextEditorStyle = (isExpanded: boolean): RichTextEditorStyleProps => {\n  return {\n    minHeight: isExpanded ? '5rem' : '1.25rem',\n    maxHeight: '5rem'\n  };\n};\n"]}

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

@@ -0,0 +1,21 @@
+import { Theme } from '@fluentui/react';
+/**
+ * @private
+ */
+export declare const inputBoxRichTextStackStyle: string;
+/**
+ * @private
+ */
+export declare const inputBoxRichTextStackItemStyle: string;
+/**
+ * @private
+ */
+export declare const inputBoxContentStackStyle: string;
+/**
+ * @private
+ */
+export declare const richTextBorderBoxStyle: (props: {
+    theme: Theme;
+    disabled: boolean;
+}) => string;
+//# sourceMappingURL=RichTextInputBoxComponent.styles.d.ts.map

package/dist/dist-esm/react-components/src/components/styles/RichTextInputBoxComponent.styles.js

@@ -0,0 +1,34 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+import { mergeStyles } from '@fluentui/react';
+import { borderEditBoxStyle, defaultSendBoxActiveBorderThicknessREM, defaultSendBoxInactiveBorderThicknessREM } from './SendBox.styles';
+/**
+ * @private
+ */
+export const inputBoxRichTextStackStyle = mergeStyles({ overflow: 'hidden' });
+/**
+ * @private
+ */
+export const inputBoxRichTextStackItemStyle = mergeStyles({ paddingBottom: '0.25rem' });
+/**
+ * @private
+ */
+export const inputBoxContentStackStyle = mergeStyles({ overflow: 'hidden' });
+/**
+ * @private
+ */
+export const richTextBorderBoxStyle = (props) => {
+    const disabledStyles = {
+        pointerEvents: 'none',
+        backgroundColor: props.theme.palette.neutralLighter,
+        borderRadius: props.theme.effects.roundedCorner4,
+        border: `${defaultSendBoxInactiveBorderThicknessREM}rem solid transparent`,
+        margin: `${defaultSendBoxActiveBorderThicknessREM - defaultSendBoxInactiveBorderThicknessREM}rem`
+    };
+    return mergeStyles(props.disabled
+        ? disabledStyles
+        : borderEditBoxStyle(Object.assign(Object.assign({}, props), { 
+            // should always be false as we don't want to show the border when there is an error
+            hasErrorMessage: false, defaultBorderColor: props.theme.palette.neutralQuaternaryAlt })));
+};
+//# sourceMappingURL=RichTextInputBoxComponent.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RichTextInputBoxComponent.styles.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/RichTextInputBoxComponent.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAClC,OAAO,EAAiB,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC7D,OAAO,EACL,kBAAkB,EAClB,sCAAsC,EACtC,wCAAwC,EACzC,MAAM,kBAAkB,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,0BAA0B,GAAG,WAAW,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAC;AAE9E;;GAEG;AACH,MAAM,CAAC,MAAM,8BAA8B,GAAG,WAAW,CAAC,EAAE,aAAa,EAAE,SAAS,EAAE,CAAC,CAAC;AAExF;;GAEG;AACH,MAAM,CAAC,MAAM,yBAAyB,GAAG,WAAW,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAC;AAE7E;;GAEG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,KAA0C,EAAU,EAAE;IAC3F,MAAM,cAAc,GAAW;QAC7B,aAAa,EAAE,MAAM;QACrB,eAAe,EAAE,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,cAAc;QACnD,YAAY,EAAE,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,cAAc;QAChD,MAAM,EAAE,GAAG,wCAAwC,uBAAuB;QAC1E,MAAM,EAAE,GAAG,sCAAsC,GAAG,wCAAwC,KAAK;KAClG,CAAC;IACF,OAAO,WAAW,CAChB,KAAK,CAAC,QAAQ;QACZ,CAAC,CAAC,cAAc;QAChB,CAAC,CAAC,kBAAkB,iCACb,KAAK;YACR,oFAAoF;YACpF,eAAe,EAAE,KAAK,EACtB,kBAAkB,EAAE,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,oBAAoB,IAC5D,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\nimport { IStyle, Theme, mergeStyles } from '@fluentui/react';\nimport {\n  borderEditBoxStyle,\n  defaultSendBoxActiveBorderThicknessREM,\n  defaultSendBoxInactiveBorderThicknessREM\n} from './SendBox.styles';\n\n/**\n * @private\n */\nexport const inputBoxRichTextStackStyle = mergeStyles({ overflow: 'hidden' });\n\n/**\n * @private\n */\nexport const inputBoxRichTextStackItemStyle = mergeStyles({ paddingBottom: '0.25rem' });\n\n/**\n * @private\n */\nexport const inputBoxContentStackStyle = mergeStyles({ overflow: 'hidden' });\n\n/**\n * @private\n */\nexport const richTextBorderBoxStyle = (props: { theme: Theme; disabled: boolean }): string => {\n  const disabledStyles: IStyle = {\n    pointerEvents: 'none',\n    backgroundColor: props.theme.palette.neutralLighter,\n    borderRadius: props.theme.effects.roundedCorner4,\n    border: `${defaultSendBoxInactiveBorderThicknessREM}rem solid transparent`,\n    margin: `${defaultSendBoxActiveBorderThicknessREM - defaultSendBoxInactiveBorderThicknessREM}rem`\n  };\n  return mergeStyles(\n    props.disabled\n      ? disabledStyles\n      : borderEditBoxStyle({\n          ...props,\n          // should always be false as we don't want to show the border when there is an error\n          hasErrorMessage: false,\n          defaultBorderColor: props.theme.palette.neutralQuaternaryAlt\n        })\n  );\n};\n"]}

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

@@ -28,6 +28,7 @@ export declare const sendButtonStyle: string;
 export declare const sendIconStyle: (props: {
     theme: Theme;
     hasText: boolean;
+    hasFile: boolean;
     disabled?: boolean;
     hasErrorMessage: boolean;
     customSendIconStyle?: IStyle;
@@ -40,11 +41,11 @@ export declare const editorTextBoxButtonStyle: IStyle;
 /**
  * @private
  */
-export declare const fileUploadCardsStyles: string;
+export declare const attachmentUploadCardsStyles: string;
 /**
  * @private
  */
-export declare const fileCardBoxStyle: string;
+export declare const attachmentCardBoxStyle: string;
 /**
  * @private
  */

package/dist/dist-esm/react-components/src/components/styles/SendBox.styles.js

@@ -5,16 +5,8 @@ import { mergeStyles } from '@fluentui/react';
  * @private
  */
 export const suppressIconStyle = {
-    iconContainer: {
-        minHeight: '0',
-        minWidth: '0',
-        height: '0',
-        width: '0',
-        margin: '0'
-    },
-    icon: {
-        display: 'none'
-    }
+    iconContainer: { minHeight: '0', minWidth: '0', height: '0', width: '0', margin: '0' },
+    icon: { display: 'none' }
 };
 /**
  * @private
@@ -40,8 +32,9 @@ export const sendButtonStyle = mergeStyles({
  * @private
  */
 export const sendIconStyle = (props) => {
-    const { theme, hasText, disabled = false, hasErrorMessage, customSendIconStyle, defaultTextColor = theme.palette.neutralTertiary } = props;
-    const hasNoContent = !hasText;
+    const { theme, hasText, disabled = false, 
+    /* @conditional-compile-remove(file-sharing) */ hasFile, hasErrorMessage, customSendIconStyle, defaultTextColor = theme.palette.neutralTertiary } = props;
+    const hasNoContent = !hasText && /* @conditional-compile-remove(file-sharing) */ !hasFile;
     return mergeStyles(editorTextBoxButtonStyle, {
         color: disabled || hasErrorMessage || hasNoContent ? defaultTextColor : theme.palette.themePrimary
     }, customSendIconStyle);
@@ -57,7 +50,7 @@ export const editorTextBoxButtonStyle = {
 /**
  * @private
  */
-export const fileUploadCardsStyles = mergeStyles({
+export const attachmentUploadCardsStyles = mergeStyles({
     margin: '0 0.25rem 0.25rem 0.25rem',
     maxHeight: '12.5rem',
     overflow: 'auto'
@@ -65,7 +58,7 @@ export const fileUploadCardsStyles = mergeStyles({
 /**
  * @private
  */
-export const fileCardBoxStyle = mergeStyles({
+export const attachmentCardBoxStyle = mergeStyles({
     width: '100%',
     padding: '0.50rem'
 });