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

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

@@ -0,0 +1,130 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+/* @conditional-compile-remove(reaction) */
+import { keyframes, memoizeFunction } from '@fluentui/react';
+/* @conditional-compile-remove(reaction) */
+/**
+ * @private
+ */
+export const playFrames = memoizeFunction(() => keyframes({
+    from: {
+        backgroundPosition: '0px 8568px'
+    },
+    to: {
+        backgroundPosition: '0px 0px'
+    }
+}));
+/* @conditional-compile-remove(reaction) */
+/**
+ * @param backgroundImage - the uri for the reaction emoji resource
+ * @param animationPlayState - the value is either 'running' or 'paused' based on the mouse hover event
+ *
+ * @private
+ */
+export const emojiStyles = (backgroundImage, frameCount) => {
+    const imageResourceUrl = `url(${backgroundImage})`;
+    const steps = frameCount !== null && frameCount !== void 0 ? frameCount : 51;
+    return {
+        display: 'flex',
+        flexDirection: 'column',
+        height: '100%',
+        width: '100%',
+        backgroundImage: imageResourceUrl,
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundSize: `2.75rem 133.875rem`,
+        transition: 'opacity 2s',
+        backgroundColor: 'transparent',
+        transform: 'scale(0.6)',
+        ':hover': {
+            transform: 'scale(0.8)',
+            animationName: playFrames(),
+            animationDuration: '8.12s',
+            animationTimingFunction: `steps(${steps})`,
+            animationIterationCount: 'infinite',
+            backgroundColor: 'transparent'
+        },
+        ':active': {
+            backgroundColor: 'transparent'
+        }
+    };
+};
+/* @conditional-compile-remove(reaction) */
+/**
+ *
+ * @private
+ */
+export const reactionEmojiMenuStyles = () => {
+    return {
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        flexDirection: 'row',
+        width: '13.75rem',
+        height: '2.625rem',
+        // Ensure that when one emoji is hovered, the other emojis are partially faded out
+        ':hover > :not(:hover)': {
+            opacity: '0.5'
+        }
+    };
+};
+/* @conditional-compile-remove(reaction) */
+/**
+ *
+ * @private
+ */
+export const reactionToolTipHostStyle = () => {
+    return {
+        root: {
+            display: 'flex',
+            flexDirection: 'column',
+            height: '100%',
+            width: '100%'
+        }
+    };
+};
+/* @conditional-compile-remove(reaction) */
+/**
+ *
+ * @private
+ */
+export const mobileViewMenuItemStyle = () => {
+    return {
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        flexDirection: 'row',
+        width: '100%',
+        height: '2.625rem'
+    };
+};
+/* @conditional-compile-remove(reaction) */
+/**
+ * @param backgroundImage - the uri for the reaction emoji resource
+ * @param animationPlayState - the value is either 'running' or 'paused' based on the mouse hover event
+ *
+ * @private
+ */
+export const mobileViewEmojiStyles = (backgroundImage, animationPlayState) => {
+    const imageResourceUrl = `url(${backgroundImage})`;
+    return {
+        display: 'flex',
+        flexDirection: 'column',
+        height: '100%',
+        width: '2.75rem',
+        backgroundImage: imageResourceUrl,
+        animationName: playFrames(),
+        animationDuration: '8.12s',
+        animationTimingFunction: `steps(102)`,
+        animationPlayState: animationPlayState,
+        animationIterationCount: 'infinite',
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundPosition: 'center',
+        backgroundSize: `2.75rem 133.875rem`,
+        transition: 'opacity 2s',
+        backgroundColor: 'transparent',
+        transform: `${animationPlayState === 'running' ? 'scale(0.8)' : 'scale(0.6)'}`
+    };
+};
+//# sourceMappingURL=ReactionButton.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ReactionButton.styles.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/ReactionButton.styles.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 { ITooltipHostStyles, keyframes, memoizeFunction, IStyle } from '@fluentui/react';\n/* @conditional-compile-remove(reaction) */\nimport React from 'react';\n\n/* @conditional-compile-remove(reaction) */\n/**\n * @private\n */\nexport const playFrames = memoizeFunction(() =>\n  keyframes({\n    from: {\n      backgroundPosition: '0px 8568px'\n    },\n    to: {\n      backgroundPosition: '0px 0px'\n    }\n  })\n);\n\n/* @conditional-compile-remove(reaction) */\n/**\n * @param backgroundImage - the uri for the reaction emoji resource\n * @param animationPlayState - the value is either 'running' or 'paused' based on the mouse hover event\n *\n * @private\n */\nexport const emojiStyles = (backgroundImage: string, frameCount: number): IStyle => {\n  const imageResourceUrl = `url(${backgroundImage})`;\n  const steps = frameCount ?? 51;\n  return {\n    display: 'flex',\n    flexDirection: 'column',\n    height: '100%',\n    width: '100%',\n    backgroundImage: imageResourceUrl,\n    justifyContent: 'center',\n    alignItems: 'center',\n    backgroundSize: `2.75rem 133.875rem`,\n    transition: 'opacity 2s',\n    backgroundColor: 'transparent',\n    transform: 'scale(0.6)',\n    ':hover': {\n      transform: 'scale(0.8)',\n      animationName: playFrames(),\n      animationDuration: '8.12s',\n      animationTimingFunction: `steps(${steps})`,\n      animationIterationCount: 'infinite',\n      backgroundColor: 'transparent'\n    },\n    ':active': {\n      backgroundColor: 'transparent'\n    }\n  };\n};\n\n/* @conditional-compile-remove(reaction) */\n/**\n *\n * @private\n */\nexport const reactionEmojiMenuStyles = (): IStyle => {\n  return {\n    display: 'flex',\n    justifyContent: 'center',\n    alignItems: 'center',\n    flexDirection: 'row',\n    width: '13.75rem',\n    height: '2.625rem',\n\n    // Ensure that when one emoji is hovered, the other emojis are partially faded out\n    ':hover > :not(:hover)': {\n      opacity: '0.5'\n    }\n  };\n};\n\n/* @conditional-compile-remove(reaction) */\n/**\n *\n * @private\n */\nexport const reactionToolTipHostStyle = (): ITooltipHostStyles => {\n  return {\n    root: {\n      display: 'flex',\n      flexDirection: 'column',\n      height: '100%',\n      width: '100%'\n    }\n  };\n};\n\n/* @conditional-compile-remove(reaction) */\n/**\n *\n * @private\n */\nexport const mobileViewMenuItemStyle = (): React.CSSProperties => {\n  return {\n    display: 'flex',\n    justifyContent: 'space-between',\n    alignItems: 'center',\n    flexDirection: 'row',\n    width: '100%',\n    height: '2.625rem'\n  };\n};\n\n/* @conditional-compile-remove(reaction) */\n/**\n * @param backgroundImage - the uri for the reaction emoji resource\n * @param animationPlayState - the value is either 'running' or 'paused' based on the mouse hover event\n *\n * @private\n */\nexport const mobileViewEmojiStyles = (backgroundImage: string, animationPlayState: string): React.CSSProperties => {\n  const imageResourceUrl = `url(${backgroundImage})`;\n  return {\n    display: 'flex',\n    flexDirection: 'column',\n    height: '100%',\n    width: '2.75rem',\n    backgroundImage: imageResourceUrl,\n    animationName: playFrames(),\n    animationDuration: '8.12s',\n    animationTimingFunction: `steps(102)`,\n    animationPlayState: animationPlayState,\n    animationIterationCount: 'infinite',\n    justifyContent: 'center',\n    alignItems: 'center',\n    backgroundPosition: 'center',\n    backgroundSize: `2.75rem 133.875rem`,\n    transition: 'opacity 2s',\n    backgroundColor: 'transparent',\n    transform: `${animationPlayState === 'running' ? 'scale(0.8)' : 'scale(0.6)'}`\n  };\n};\n"]}

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

@@ -0,0 +1,71 @@
+/// <reference types="react" />
+/**
+ * Generate random float between two numbers, including min and max
+ * @private
+ */
+export declare function getRandomFloat(minValue: number, maxValue: number): number;
+/**
+ * Generate random int between two numbers, including min and max
+ * @private
+ */
+export declare function getRandomInt(minValue: number, maxValue: number): number;
+/**
+ * Calculate the start position for a new reaction in the prescriptive wave pattern
+ * @private
+ */
+export declare function generateStartPositionWave(index: number, halfCanvasWidth: number, isOriginAtCanvasCenter?: boolean): number;
+/**
+ * @private
+ */
+export declare const reactionOverlayStyle: React.CSSProperties;
+/**
+ * @private
+ */
+export declare function getReactionMovementStyle(reactionXPoint: number): React.CSSProperties;
+/**
+ * @private
+ */
+export interface IReactionStyleBucket {
+    sizeScale: number;
+    opacityMax: number;
+    heightMaxScale: number;
+    heightMinScale?: number;
+}
+/**
+ * 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 declare function getReactionStyleBucket(): IReactionStyleBucket;
+/**
+ * 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 declare function getReactionBurstStyleBucket(): IReactionStyleBucket;
+/**
+ * @private
+ */
+export declare const moveFrames: (maxHeight: any, travelHeight: any) => string;
+/**
+ * @private
+ */
+export declare const moveAnimationStyles: (maxHeight: number, travelHeight: number) => React.CSSProperties;
+/**
+ * @private
+ */
+export declare const opacityTransition: (maxOpacity: any) => string;
+/**
+ * @private
+ */
+export declare const opacityAnimationStyles: (maxOpacity: number) => React.CSSProperties;
+/**
+ * @private
+ */
+export declare const spriteFrames: (numOfFrames: any, displaySizePx: any) => string;
+/**
+ * @private
+ */
+export declare const spriteAnimationStyles: (numOfFrames: number, displaySizePx: number, imageUrl: string) => React.CSSProperties;
+//# sourceMappingURL=ReactionOverlay.style.d.ts.map

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

@@ -0,0 +1,257 @@
+// 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

@@ -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 * 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

@@ -0,0 +1,82 @@
+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