@azure/communication-react 1.15.0-alpha-202404100012 → 1.15.0-beta.2

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

@@ -1,257 +0,0 @@
-// 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) */
-/**
- * We have only one bucket item for presentation style of the reaction animation.
- * We are choosing to keep the array so that, in future, with styles needed to get updated, one
- * can add new styles and apply from here, rather than updating over the same style. Later we can remove
- * the old ones.
- * It is for the ease of testing and implementation.
- * @private
- */
-const ReactionStyleBuckets = [
-    {
-        sizeScale: 0.9,
-        heightMaxScale: 0.7 * 0.95,
-        opacityMax: 0.9
-    }
-];
-/* @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() {
-    // Having dynamic emoji size on rendering animation impacts performance of the animation itself.
-    // So we are choosing to use a fixed size for all cases.
-    const index = 0;
-    return ReactionStyleBuckets[index];
-}
-/* @conditional-compile-remove(reaction) */
-/**
- * Return a style bucket for burst scenario
- * We can utilize this style when we allow more than 50 reactions at a time. Can be configured through ECS.
- * @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

@@ -1 +0,0 @@
-{"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 * We have only one bucket item for presentation style of the reaction animation.\n * We are choosing to keep the array so that, in future, with styles needed to get updated, one\n * can add new styles and apply from here, rather than updating over the same style. Later we can remove\n * the old ones.\n * It is for the ease of testing and implementation.\n * @private\n */\nconst ReactionStyleBuckets: Array<IReactionStyleBucket> = [\n  {\n    sizeScale: 0.9,\n    heightMaxScale: 0.7 * 0.95,\n    opacityMax: 0.9\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(): IReactionStyleBucket {\n  // Having dynamic emoji size on rendering animation impacts performance of the animation itself.\n  // So we are choosing to use a fixed size for all cases.\n  const index = 0;\n  return ReactionStyleBuckets[index];\n}\n\n/* @conditional-compile-remove(reaction) */\n/**\n * Return a style bucket for burst scenario\n * We can utilize this style when we allow more than 50 reactions at a time. Can be configured through ECS.\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

@@ -1,82 +0,0 @@
-import { IButtonStyles, ICommandBarStyles, IContextualMenuStyles, IStyle, 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 ribbonTableButtonStyle: (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;
-/**
- * @private
- */
-export declare const insertTableMenuCellButtonStyles: (theme: Theme) => IStyle;
-/**
- * @private
- */
-export declare const insertTableMenuCellButtonSelectedStyles: (theme: Theme) => IStyle;
-/**
- * @private
- */
-export declare const insertTableMenuTablePane: string;
-/**
- * @private
- */
-export declare const insertTableMenuFocusZone: (theme: Theme) => string;
-/**
- * @private
- */
-export declare const insertTableMenuTitleStyles: string;
-/**
- * @private
- */
-export declare const tableContextMenuIconStyles: string;
-//# sourceMappingURL=RichTextEditor.styles.d.ts.map

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

@@ -1,297 +0,0 @@
-// 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%',
-        // this is needed to fix an issue when text has some indentation, indentation uses blockquote tag and
-        // it gets both horizontal margins because of the user agent stylesheet
-        // remove this code when RoosterJS content model packages are used as they use different approach for indentation
-        '& blockquote': {
-            marginInlineEnd: '0'
-        }
-    });
-};
-/**
- * @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,
-        '& table': {
-            background: 'transparent',
-            borderCollapse: 'collapse',
-            width: '100%',
-            borderSpacing: '0',
-            tableLayout: 'auto',
-            '& tr': {
-                background: 'transparent',
-                border: `1px solid ${theme.palette.neutralLight}`,
-                '& td': {
-                    background: 'transparent',
-                    border: `1px solid ${theme.palette.neutralLight}`,
-                    wordBreak: 'normal',
-                    padding: '0.125rem 0.25rem',
-                    verticalAlign: 'top'
-                }
-            }
-        }
-    });
-};
-/**
- * @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
-                    }
-                }
-            },
-            '.ribbon-table-button-regular-icon': {
-                display: 'inline-block',
-                margin: '-0.25rem 0.25rem 0 0.25rem',
-                width: '1.25rem',
-                height: '1.25rem'
-            },
-            '.ribbon-table-button-filled-icon': {
-                display: 'none'
-            }
-        }
-    };
-};
-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)
-    };
-};
-const rootRibbonTableButtonStyle = (theme) => {
-    // merge IStyles props
-    return Object.assign({ minWidth: 'auto' }, ribbonTableButtonRootStyles(theme, false));
-};
-/**
- * @private
- */
-export const ribbonTableButtonStyle = (theme) => {
-    return {
-        icon: { height: 'auto' },
-        menuIcon: { height: 'auto' },
-        root: rootRibbonTableButtonStyle(theme),
-        rootChecked: ribbonTableButtonRootStyles(theme, true),
-        rootHovered: ribbonTableButtonRootStyles(theme, true),
-        rootCheckedHovered: ribbonTableButtonRootStyles(theme, true),
-        rootCheckedPressed: ribbonTableButtonRootStyles(theme, true),
-        rootPressed: ribbonTableButtonRootStyles(theme, true),
-        rootExpanded: ribbonTableButtonRootStyles(theme, true),
-        rootExpandedHovered: ribbonTableButtonRootStyles(theme, true)
-    };
-};
-const ribbonTableButtonRootStyles = (theme, isSelected) => {
-    return {
-        backgroundColor: 'transparent',
-        selectors: {
-            '.ribbon-table-button-regular-icon': {
-                width: '1.25rem',
-                height: '1.25rem',
-                marginTop: '-0.25rem',
-                color: theme.palette.neutralPrimary,
-                display: isSelected ? 'none' : 'inline-block'
-            },
-            '.ribbon-table-button-filled-icon': {
-                width: '1.25rem',
-                height: '1.25rem',
-                marginTop: '-0.25rem',
-                color: theme.palette.themePrimary,
-                display: isSelected ? 'inline-block' : 'none'
-            }
-        }
-    };
-};
-/**
- * @private
- */
-export const ribbonDividerStyle = (theme) => {
-    return {
-        icon: { color: theme.palette.neutralQuaternaryAlt, margin: '0 -0.5rem', height: 'auto' },
-        root: { margin: '0', padding: '0', minWidth: 'auto' },
-        rootHovered: {
-            backgroundColor: 'transparent',
-            selectors: {
-                // Icon's color doesn't work here because of the specificity
-                '.ms-Button-icon': {
-                    color: theme.palette.neutralQuaternaryAlt
-                },
-                '.ms-Button-menuIcon': {
-                    color: theme.palette.neutralQuaternaryAlt
-                }
-            }
-        }
-    };
-};
-/**
- * @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'
-    };
-};
-/**
- * @private
- */
-export const insertTableMenuCellButtonStyles = (theme) => {
-    return {
-        width: '1rem',
-        height: '1rem',
-        border: `solid 0.0625rem ${theme.palette.neutralTertiaryAlt}`,
-        display: 'inline-block',
-        cursor: 'pointer',
-        background: 'transparent'
-    };
-};
-/**
- * @private
- */
-export const insertTableMenuCellButtonSelectedStyles = (theme) => {
-    return {
-        background: theme.palette.themePrimary
-    };
-};
-/**
- * @private
- */
-export const insertTableMenuTablePane = mergeStyles({
-    padding: '0.5rem 0.625rem 0.75rem 0.625rem',
-    boxSizing: 'content-box',
-    minWidth: 'auto'
-});
-/**
- * @private
- */
-export const insertTableMenuFocusZone = (theme) => {
-    return mergeStyles({
-        lineHeight: '12px',
-        width: '5rem',
-        border: `solid 0.0625rem ${theme.palette.neutralTertiaryAlt}`
-    });
-};
-/**
- * @private
- */
-export const insertTableMenuTitleStyles = mergeStyles({
-    width: '100%',
-    height: '1rem',
-    fontSize: '0.75rem',
-    marginBottom: '0.5rem'
-});
-/**
- * @private
- */
-export const tableContextMenuIconStyles = mergeStyles({
-    marginTop: '0.375rem'
-});
-//# sourceMappingURL=RichTextEditor.styles.js.map