@azure/communication-react 1.18.0 → 1.19.0-alpha-202407240016

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

@@ -1 +1 @@
-{"version":3,"file":"ReactionOverlay.style.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/styles/ReactionOverlay.style.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,SAAS,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAE7D;;;GAGG;AACH,MAAM,UAAU,cAAc,CAAC,QAAgB,EAAE,QAAgB;IAC/D,OAAO,QAAQ,GAAG,IAAI,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,GAAG,QAAQ,CAAC,CAAC;AAC1D,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,YAAY,CAAC,QAAgB,EAAE,QAAgB;IAC7D,OAAO,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,QAAQ,EAAE,QAAQ,GAAG,CAAC,CAAC,CAAC,CAAC;AAC5D,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,yBAAyB,CAAC,KAAa,EAAE,eAAuB,EAAE,yBAAkC,IAAI;IACtH,MAAM,kBAAkB,GAAG,sBAAsB,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC;IAExE,4FAA4F;IAC5F,8EAA8E;IAC9E,wFAAwF;IACxF,+CAA+C;IAC/C,MAAM,SAAS,GAAG,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACtD,IAAI,SAAS,KAAK,CAAC,EAAE,CAAC;QACpB,OAAO,kBAAkB,CAAC;IAC5B,CAAC;IAED,qDAAqD;IACrD,MAAM,UAAU,GAAG,aAAa,CAAC,KAAK,CAAC,CAAC;IACxC,OAAO,kBAAkB,GAAG,SAAS,GAAG,UAAU,GAAG,eAAe,CAAC;AACvE,CAAC;AAED;;GAEG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAwB;IACvD,MAAM,EAAE,GAAG;IACX,MAAM,EAAE,KAAK;IACb,aAAa,EAAE,MAAM;IACrB,QAAQ,EAAE,UAAU;IACpB,KAAK,EAAE,MAAM;CACd,CAAC;AAEF;;GAEG;AACH,MAAM,UAAU,wBAAwB,CAAC,cAAsB;IAC7D,OAAO;QACL,QAAQ,EAAE,UAAU;QACpB,IAAI,EAAE,GAAG,cAAc,IAAI;KAC5B,CAAC;AACJ,CAAC;AAED;;;GAGG;AACH,SAAS,aAAa,CAAC,KAAa;IAClC,QAAQ,KAAK,EAAE,CAAC;QACd,KAAK,CAAC,CAAC;QACP,KAAK,CAAC;YACJ,OAAO,GAAG,CAAC;QACb,KAAK,CAAC,CAAC;QACP,KAAK,CAAC;YACJ,OAAO,GAAG,CAAC;QACb,KAAK,CAAC,CAAC;QACP,KAAK,CAAC;YACJ,OAAO,GAAG,CAAC;QACb,KAAK,CAAC,CAAC;QACP,KAAK,CAAC;YACJ,OAAO,IAAI,CAAC;QACd,KAAK,CAAC,CAAC;QACP,KAAK,EAAE;YACL,OAAO,KAAK,CAAC;QACf,KAAK,EAAE,CAAC;QACR,KAAK,EAAE;YACL,OAAO,KAAK,CAAC;QACf,KAAK,EAAE,CAAC;QACR,KAAK,EAAE;YACL,OAAO,IAAI,CAAC;QACd,KAAK,EAAE,CAAC;QACR,KAAK,EAAE;YACL,OAAO,KAAK,CAAC;QACf,KAAK,EAAE,CAAC;QACR,KAAK,EAAE;YACL,OAAO,KAAK,CAAC;QACf,KAAK,EAAE,CAAC;QACR,KAAK,EAAE;YACL,OAAO,IAAI,CAAC;QACd,KAAK,EAAE,CAAC;QACR,KAAK,EAAE;YACL,OAAO,KAAK,CAAC;QACf,KAAK,EAAE,CAAC;QACR,KAAK,EAAE;YACL,OAAO,KAAK,CAAC;QACf;YACE,OAAO,CAAC,CAAC;IACb,CAAC;AACH,CAAC;AAED;;;;;;;GAOG;AACH,MAAM,oBAAoB,GAAgC,CAAC;QACzD,SAAS,EAAE,GAAG;QACd,cAAc,EAAE,GAAG,GAAG,IAAI;QAC1B,UAAU,EAAE,GAAG;KAChB,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,yBAAyB,GAAgC,CAAC;QAC9D,SAAS,EAAE,GAAG;QACd,UAAU,EAAE,IAAI;QAChB,cAAc,EAAE,IAAI;QACpB,cAAc,EAAE,IAAI;KACrB,EAAE;QACD,SAAS,EAAE,GAAG;QACd,UAAU,EAAE,IAAI;QAChB,cAAc,EAAE,GAAG;QACnB,cAAc,EAAE,IAAI;KACrB,EAAE;QACD,SAAS,EAAE,GAAG;QACd,UAAU,EAAE,IAAI;QAChB,cAAc,EAAE,IAAI;QACpB,cAAc,EAAE,CAAC;KAClB,CAAC,CAAC;AAYH;;;;;GAKG;AACH,MAAM,UAAU,sBAAsB;IACpC,gGAAgG;IAChG,wDAAwD;IACxD,MAAM,KAAK,GAAG,CAAC,CAAC;IAChB,OAAO,oBAAoB,CAAC,KAAK,CAAC,CAAC;AACrC,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,2BAA2B;IACzC,MAAM,KAAK,GAAG,YAAY,CAAC,CAAC,EAAE,yBAAyB,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;IACpE,OAAO,yBAAyB,CAAC,KAAK,CAAC,CAAC;AAC1C,CAAC;AAED;;GAEG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,eAAe,CAAC,CAAC,SAAS,EAAE,YAAY,EAAE,EAAE,CAAC,SAAS,CAAC;IAC/E,IAAI,EAAE;QACJ,SAAS,EAAE,cAAc,SAAS,KAAK;KACxC;IACD,MAAM,EAAE;QACN,SAAS,EAAE,cAAc,YAAY,KAAK;KAC3C;CACF,CAAC,CAAC,CAAC;AAEJ;;GAEG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,SAAiB,EAAE,YAAoB,EAAuB,EAAE;IAClG,OAAO;QACL,aAAa,EAAE,UAAU,CAAC,SAAS,EAAE,YAAY,CAAC;QAClD,iBAAiB,EAAE,UAAU;QAC7B,iBAAiB,EAAE,QAAQ;QAC3B,uBAAuB,EAAE,mCAAmC;KAC7D,CAAC;AACJ,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,eAAe,CAAC,UAAU,CAAC,EAAE,CAAC,SAAS,CAAC;IACvE,IAAI,EAAE;QACJ,OAAO,EAAE,CAAC;KACX;IACD,OAAO,EAAE;QACP,OAAO,EAAE,UAAU;KACpB;IACD,OAAO,EAAE;QACP,OAAO,EAAE,UAAU;KACpB;IACD,MAAM,EAAE;QACN,OAAO,EAAE,CAAC;QACV,OAAO,EAAE,MAAM;QACf,UAAU,EAAE,QAAQ;KACrB;CACF,CAAC,CAAC,CAAC;AAEJ;;GAEG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,UAAkB,EAAuB,EAAE;IAChF,OAAO;QACL,aAAa,EAAE,iBAAiB,CAAC,UAAU,CAAC;QAC5C,iBAAiB,EAAE,UAAU;QAC7B,iBAAiB,EAAE,QAAQ;KAC5B,CAAC;AACJ,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,eAAe,CAAC,CAAC,WAAW,EAAE,aAAa,EAAE,EAAE,CAAC,SAAS,CAAC;IACpF,IAAI,EAAE;QACJ,kBAAkB,EAAE,SAAS;KAC9B;IACD,EAAE,EAAE;QACF,kBAAkB,EAAE,QAAQ,WAAW,GAAG,aAAa,IAAI;KAC5D;CACF,CAAC,CAAC,CAAC;AAEJ;;GAEG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,WAAmB,EAAE,aAAqB,EAAE,QAAgB,EAAuB,EAAE;IACzH,OAAO;QACL,MAAM,EAAE,GAAG,aAAa,IAAI;QAC5B,KAAK,EAAE,GAAG,aAAa,IAAI;QAC3B,eAAe,EAAE,OAAO,QAAQ,GAAG;QACnC,gBAAgB,EAAE,WAAW;QAC7B,aAAa,EAAE,YAAY,CAAC,WAAW,EAAE,aAAa,CAAC;QACvD,iBAAiB,EAAE,GAAG,WAAW,GAAG,EAAE,GAAG;QACzC,iBAAiB,EAAE,UAAU;QAC7B,uBAAuB,EAAE,UAAU;QACnC,uBAAuB,EAAE,SAAS,WAAW,GAAG;QAChD,cAAc,EAAE,GAAG,aAAa,MAAM,WAAW,GAAG,aAAa,IAAI;QACrE,SAAS,EAAE,SAAS,aAAa,OAAO;KACzC,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { keyframes, memoizeFunction } from '@fluentui/react';\n\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/**\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/**\n * Calculate the start position for a new reaction in the prescriptive wave pattern\n * @private\n */\nexport function generateStartPositionWave(index: number, halfCanvasWidth: number, isOriginAtCanvasCenter: boolean = true): 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/**\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/**\n * @private\n */\nexport function getReactionMovementStyle(reactionXPoint: number): React.CSSProperties {\n  return {\n    position: 'absolute',\n    left: `${reactionXPoint}px`\n  };\n}\n\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/**\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  sizeScale: 0.9,\n  heightMaxScale: 0.7 * 0.95,\n  opacityMax: 0.9\n}];\n\n/**\n * @private\n */\nconst ReactionBurstStyleBuckets: Array<IReactionStyleBucket> = [{\n  sizeScale: 0.6,\n  opacityMax: 0.75,\n  heightMaxScale: 0.93,\n  heightMinScale: 0.27\n}, {\n  sizeScale: 0.6,\n  opacityMax: 0.75,\n  heightMaxScale: 0.8,\n  heightMinScale: 0.13\n}, {\n  sizeScale: 0.6,\n  opacityMax: 0.75,\n  heightMaxScale: 0.67,\n  heightMinScale: 0\n}];\n\n/**\n * @private\n */\nexport interface IReactionStyleBucket {\n  sizeScale: number;\n  opacityMax: number;\n  heightMaxScale: number;\n  heightMinScale?: number;\n}\n\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/**\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/**\n * @private\n */\nexport const moveFrames = memoizeFunction((maxHeight, travelHeight) => keyframes({\n  '0%': {\n    transform: `translateY(${maxHeight}px)`\n  },\n  '100%': {\n    transform: `translateY(${travelHeight}px)`\n  }\n}));\n\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/**\n * @private\n */\nexport const opacityTransition = memoizeFunction(maxOpacity => 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 * @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/**\n * @private\n */\nexport const spriteFrames = memoizeFunction((numOfFrames, displaySizePx) => keyframes({\n  from: {\n    backgroundPosition: '0px 0px'\n  },\n  to: {\n    backgroundPosition: `0px -${numOfFrames * displaySizePx}px`\n  }\n}));\n\n/**\n * @private\n */\nexport const spriteAnimationStyles = (numOfFrames: number, displaySizePx: number, imageUrl: string): 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};"]}
+{"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\nimport { keyframes, memoizeFunction } from '@fluentui/react';\n\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/**\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/**\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/**\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/**\n * @private\n */\nexport function getReactionMovementStyle(reactionXPoint: number): React.CSSProperties {\n  return {\n    position: 'absolute',\n    left: `${reactionXPoint}px`\n  };\n}\n\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/**\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/**\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/**\n * @private\n */\nexport interface IReactionStyleBucket {\n  sizeScale: number;\n  opacityMax: number;\n  heightMaxScale: number;\n  heightMinScale?: number;\n}\n\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/**\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/**\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/**\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/**\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/**\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/**\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/**\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) => 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 toolbarButtonStyle: (theme: Theme) => Partial<IButtonStyles>;
+/**
+ * @private
+ */
+export declare const toolbarTableButtonStyle: (theme: Theme) => Partial<IButtonStyles>;
+/**
+ * @private
+ */
+export declare const ribbonDividerStyle: (theme: Theme) => string;
+/**
+ * @private
+ */
+export declare const richTextToolbarStyle: 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

@@ -0,0 +1,293 @@
+// 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%',
+        paddingTop: '0.5rem'
+    });
+};
+/**
+ * @private
+ */
+export const richTextEditorWrapperStyle = (theme) => {
+    return mergeStyles({
+        paddingInlineStart: `0.75rem`,
+        paddingInlineEnd: `0.75rem`,
+        maxWidth: '100%',
+        color: theme.palette.neutralPrimary,
+        '& img': {
+            margin: '0.2rem'
+        },
+        '& table': {
+            background: 'transparent',
+            borderCollapse: 'collapse',
+            width: '100%',
+            borderSpacing: '0',
+            tableLayout: 'auto',
+            '& tr': {
+                background: 'transparent',
+                border: `1px solid ${theme.palette.neutralSecondary}`,
+                '& td': {
+                    background: 'transparent',
+                    border: `1px solid ${theme.palette.neutralSecondary}`,
+                    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 0.25rem 0 0.25rem',
+                width: '1.25rem',
+                height: '1.25rem'
+            },
+            '.ribbon-table-button-filled-icon': {
+                display: 'none'
+            }
+        }
+    };
+};
+const ribbonButtonRootStyles = (iconColor, hoverIconColor) => {
+    return {
+        backgroundColor: 'transparent',
+        selectors: {
+            // media query applies only if the device allows real hover interactions
+            // and hover styles are not applied on touch- only devices where the hover state cannot be accurately detected
+            '@media (hover: hover)': {
+                ':hover .ms-Button-icon': {
+                    color: hoverIconColor
+                },
+                ':hover .ms-Button-menuIcon': {
+                    color: hoverIconColor
+                }
+            },
+            // the classes needs here to apply to styles for icons because of the specificity
+            '.ms-Button-icon': {
+                color: iconColor
+            },
+            '.ms-Button-menuIcon': {
+                color: iconColor
+            }
+        }
+    };
+};
+/**
+ * @private
+ */
+export const toolbarButtonStyle = (theme) => {
+    return {
+        icon: { color: theme.palette.neutralPrimary, height: 'auto', paddingTop: '0.25rem' },
+        menuIcon: { color: theme.palette.neutralPrimary, height: 'auto', paddingTop: '0.25rem' },
+        root: { minWidth: 'auto', backgroundColor: 'transparent' },
+        rootChecked: ribbonButtonRootStyles(theme.palette.themePrimary, theme.palette.themePrimary),
+        // there is a bug for Android where the press action is considered hover sometimes
+        rootHovered: ribbonButtonRootStyles(theme.palette.neutralPrimary, theme.palette.themePrimary),
+        rootCheckedHovered: ribbonButtonRootStyles(theme.palette.themePrimary, theme.palette.themePrimary),
+        rootCheckedPressed: ribbonButtonRootStyles(theme.palette.themePrimary, theme.palette.themePrimary),
+        rootPressed: ribbonButtonRootStyles(theme.palette.themePrimary, theme.palette.themePrimary),
+        rootExpanded: ribbonButtonRootStyles(theme.palette.themePrimary, theme.palette.themePrimary),
+        rootExpandedHovered: ribbonButtonRootStyles(theme.palette.themePrimary, theme.palette.themePrimary)
+    };
+};
+const rootRibbonTableButtonStyle = (theme) => {
+    // merge IStyles props
+    return Object.assign({ minWidth: 'auto' }, ribbonTableButtonRootStyles(theme, false));
+};
+/**
+ * @private
+ */
+export const toolbarTableButtonStyle = (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',
+                margin: '0 0.25rem 0 0.25rem',
+                color: theme.palette.neutralPrimary,
+                display: isSelected ? 'none' : 'inline-block'
+            },
+            '.ribbon-table-button-filled-icon': {
+                width: '1.25rem',
+                height: '1.25rem',
+                margin: '0 0.25rem 0 0.25rem',
+                color: theme.palette.themePrimary,
+                display: isSelected ? 'inline-block' : 'none'
+            }
+        }
+    };
+};
+/**
+ * @private
+ */
+export const ribbonDividerStyle = (theme) => {
+    return mergeStyles({
+        color: theme.palette.neutralQuaternaryAlt,
+        margin: '0 -0.5rem',
+        paddingTop: '0.25rem'
+    });
+};
+/**
+ * @private
+ */
+export const richTextToolbarStyle = {
+    // Override for the default white color of the Ribbon component
+    root: { backgroundColor: 'transparent', padding: '0.25rem 0 0 0', height: '2rem' }
+};
+/**
+ * @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: '8rem'
+    };
+};
+/**
+ * @private
+ */
+export const sendBoxRichTextEditorStyle = (isExpanded) => {
+    return {
+        minHeight: isExpanded ? '4rem' : '1.25rem',
+        maxHeight: '8rem'
+    };
+};
+/**
+ * @private
+ */
+export const insertTableMenuCellButtonStyles = (theme) => {
+    return {
+        width: '24px',
+        height: '24px',
+        border: `solid 1px ${theme.palette.neutralSecondaryAlt}`,
+        cursor: 'pointer',
+        background: 'transparent'
+    };
+};
+/**
+ * @private
+ */
+export const insertTableMenuCellButtonSelectedStyles = (theme) => {
+    return {
+        background: theme.palette.themePrimary,
+        border: `solid 1px ${theme.palette.themeLighterAlt}`
+    };
+};
+/**
+ * @private
+ */
+export const insertTableMenuTablePane = mergeStyles({
+    padding: '8px 10px 12px 10px',
+    boxSizing: 'content-box',
+    minWidth: 'auto'
+});
+/**
+ * @private
+ */
+export const insertTableMenuFocusZone = (theme) => {
+    return mergeStyles({
+        display: 'inline-grid',
+        gridTemplateColumns: 'auto auto auto auto auto',
+        border: `solid 1px ${theme.palette.neutralSecondaryAlt}`
+    });
+};
+/**
+ * @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

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    paddingTop: '0.5rem'\n  });\n};\n\n/**\n * @private\n */\nexport const richTextEditorWrapperStyle = (theme: Theme): string => {\n  return mergeStyles({\n    paddingInlineStart: `0.75rem`,\n    paddingInlineEnd: `0.75rem`,\n    maxWidth: '100%',\n    color: theme.palette.neutralPrimary,\n    '& img': {\n      margin: '0.2rem'\n    },\n    '& table': {\n      background: 'transparent',\n      borderCollapse: 'collapse',\n      width: '100%',\n      borderSpacing: '0',\n      tableLayout: 'auto',\n\n      '& tr': {\n        background: 'transparent',\n        border: `1px solid ${theme.palette.neutralSecondary}`,\n\n        '& td': {\n          background: 'transparent',\n          border: `1px solid ${theme.palette.neutralSecondary}`,\n          wordBreak: 'normal',\n          padding: '0.125rem 0.25rem',\n          verticalAlign: 'top'\n        }\n      }\n    }\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      '.ribbon-table-button-regular-icon': {\n        display: 'inline-block',\n        margin: '0 0.25rem 0 0.25rem',\n        width: '1.25rem',\n        height: '1.25rem'\n      },\n      '.ribbon-table-button-filled-icon': {\n        display: 'none'\n      }\n    }\n  };\n};\n\nconst ribbonButtonRootStyles = (iconColor: string, hoverIconColor: string): IStyle => {\n  return {\n    backgroundColor: 'transparent',\n    selectors: {\n      // media query applies only if the device allows real hover interactions\n      // and hover styles are not applied on touch- only devices where the hover state cannot be accurately detected\n      '@media (hover: hover)': {\n        ':hover .ms-Button-icon': {\n          color: hoverIconColor\n        },\n        ':hover .ms-Button-menuIcon': {\n          color: hoverIconColor\n        }\n      },\n      // the classes needs here to apply to styles for icons because of the specificity\n      '.ms-Button-icon': {\n        color: iconColor\n      },\n      '.ms-Button-menuIcon': {\n        color: iconColor\n      }\n    }\n  };\n};\n\n/**\n * @private\n */\nexport const toolbarButtonStyle = (theme: Theme): Partial<IButtonStyles> => {\n  return {\n    icon: { color: theme.palette.neutralPrimary, height: 'auto', paddingTop: '0.25rem' },\n    menuIcon: { color: theme.palette.neutralPrimary, height: 'auto', paddingTop: '0.25rem' },\n    root: { minWidth: 'auto', backgroundColor: 'transparent' },\n    rootChecked: ribbonButtonRootStyles(theme.palette.themePrimary, theme.palette.themePrimary),\n    // there is a bug for Android where the press action is considered hover sometimes\n    rootHovered: ribbonButtonRootStyles(theme.palette.neutralPrimary, theme.palette.themePrimary),\n    rootCheckedHovered: ribbonButtonRootStyles(theme.palette.themePrimary, theme.palette.themePrimary),\n    rootCheckedPressed: ribbonButtonRootStyles(theme.palette.themePrimary, theme.palette.themePrimary),\n    rootPressed: ribbonButtonRootStyles(theme.palette.themePrimary, theme.palette.themePrimary),\n    rootExpanded: ribbonButtonRootStyles(theme.palette.themePrimary, theme.palette.themePrimary),\n    rootExpandedHovered: ribbonButtonRootStyles(theme.palette.themePrimary, theme.palette.themePrimary)\n  };\n};\n\nconst rootRibbonTableButtonStyle = (theme: Theme): IStyle => {\n  // merge IStyles props\n  return Object.assign({ minWidth: 'auto' }, ribbonTableButtonRootStyles(theme, false));\n};\n\n/**\n * @private\n */\nexport const toolbarTableButtonStyle = (theme: Theme): Partial<IButtonStyles> => {\n  return {\n    icon: { height: 'auto' },\n    menuIcon: { height: 'auto' },\n    root: rootRibbonTableButtonStyle(theme),\n    rootChecked: ribbonTableButtonRootStyles(theme, true),\n    rootHovered: ribbonTableButtonRootStyles(theme, true),\n    rootCheckedHovered: ribbonTableButtonRootStyles(theme, true),\n    rootCheckedPressed: ribbonTableButtonRootStyles(theme, true),\n    rootPressed: ribbonTableButtonRootStyles(theme, true),\n    rootExpanded: ribbonTableButtonRootStyles(theme, true),\n    rootExpandedHovered: ribbonTableButtonRootStyles(theme, true)\n  };\n};\nconst ribbonTableButtonRootStyles = (theme: Theme, isSelected: boolean): IStyle => {\n  return {\n    backgroundColor: 'transparent',\n    selectors: {\n      '.ribbon-table-button-regular-icon': {\n        width: '1.25rem',\n        height: '1.25rem',\n        margin: '0 0.25rem 0 0.25rem',\n        color: theme.palette.neutralPrimary,\n        display: isSelected ? 'none' : 'inline-block'\n      },\n      '.ribbon-table-button-filled-icon': {\n        width: '1.25rem',\n        height: '1.25rem',\n        margin: '0 0.25rem 0 0.25rem',\n        color: theme.palette.themePrimary,\n        display: isSelected ? 'inline-block' : 'none'\n      }\n    }\n  };\n};\n\n/**\n * @private\n */\nexport const ribbonDividerStyle = (theme: Theme): string => {\n  return mergeStyles({\n    color: theme.palette.neutralQuaternaryAlt,\n    margin: '0 -0.5rem',\n    paddingTop: '0.25rem'\n  });\n};\n\n/**\n * @private\n */\nexport const richTextToolbarStyle: Partial<ICommandBarStyles> = {\n  // Override for the default white color of the Ribbon component\n  root: { backgroundColor: 'transparent', padding: '0.25rem 0 0 0', height: '2rem' }\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: '8rem'\n  };\n};\n\n/**\n * @private\n */\nexport const sendBoxRichTextEditorStyle = (isExpanded: boolean): RichTextEditorStyleProps => {\n  return {\n    minHeight: isExpanded ? '4rem' : '1.25rem',\n    maxHeight: '8rem'\n  };\n};\n\n/**\n * @private\n */\nexport const insertTableMenuCellButtonStyles = (theme: Theme): IStyle => {\n  return {\n    width: '24px',\n    height: '24px',\n    border: `solid 1px ${theme.palette.neutralSecondaryAlt}`,\n    cursor: 'pointer',\n    background: 'transparent'\n  };\n};\n\n/**\n * @private\n */\nexport const insertTableMenuCellButtonSelectedStyles = (theme: Theme): IStyle => {\n  return {\n    background: theme.palette.themePrimary,\n    border: `solid 1px ${theme.palette.themeLighterAlt}`\n  };\n};\n\n/**\n * @private\n */\nexport const insertTableMenuTablePane = mergeStyles({\n  padding: '8px 10px 12px 10px',\n  boxSizing: 'content-box',\n  minWidth: 'auto'\n});\n\n/**\n * @private\n */\nexport const insertTableMenuFocusZone = (theme: Theme): string => {\n  return mergeStyles({\n    display: 'inline-grid',\n    gridTemplateColumns: 'auto auto auto auto auto',\n    border: `solid 1px ${theme.palette.neutralSecondaryAlt}`\n  });\n};\n\n/**\n * @private\n */\nexport const insertTableMenuTitleStyles = mergeStyles({\n  width: '100%',\n  height: '1rem',\n  fontSize: '0.75rem',\n  marginBottom: '0.5rem'\n});\n\n/**\n * @private\n */\nexport const tableContextMenuIconStyles = mergeStyles({\n  marginTop: '0.375rem'\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.neutralSecondary })));
+};
+//# 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,gBAAgB,IACxD,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.neutralSecondary\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;
+    hasAttachment: boolean;
     disabled?: boolean;
     hasErrorMessage: boolean;
     customSendIconStyle?: IStyle;

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

@@ -6,16 +6,8 @@ import { makeStyles } from '@fluentui/react-components';
  * @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
@@ -41,8 +33,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-acs) */ hasAttachment, hasErrorMessage, customSendIconStyle, defaultTextColor = theme.palette.neutralTertiary } = props;
+    const hasNoContent = !hasText && /* @conditional-compile-remove(file-sharing-acs) */ !hasAttachment;
     return mergeStyles(editorTextBoxButtonStyle, {
         color: disabled || hasErrorMessage || hasNoContent ? defaultTextColor : theme.palette.themePrimary
     }, customSendIconStyle);

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

@@ -1 +1 @@
-{"version":3,"file":"SendBox.styles.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/styles/SendBox.styles.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IStyle, mergeStyles, Theme } from '@fluentui/react';\nimport { makeStyles } from '@fluentui/react-components';\n\n/**\n * @private\n */\nexport const suppressIconStyle = {\n  iconContainer: {\n    minHeight: '0',\n    minWidth: '0',\n    height: '0',\n    width: '0',\n    margin: '0'\n  },\n  icon: {\n    display: 'none'\n  }\n};\n\n/**\n * @private\n */\nexport const sendBoxWrapperStyles = mergeStyles({\n  margin: '0.25rem',\n  overflow: 'hidden',\n  /**\n   * margin-top set for all the child components of sendbox except first\n   */\n  ':not(:first-child)': {\n    marginTop: '0.25rem'\n  }\n});\n\n/**\n * @private\n */\nexport const sendButtonStyle = mergeStyles({\n  height: '2.25rem',\n  width: '2.25rem'\n});\n\n/**\n * @private\n */\nexport const sendIconStyle = (props: {\n  theme: Theme;\n  hasText: boolean;\n  disabled?: boolean;\n  hasErrorMessage: boolean;\n  customSendIconStyle?: IStyle;\n  defaultTextColor?: string;\n}): string => {\n  const {\n    theme,\n    hasText,\n    disabled = false,\n    hasErrorMessage,\n    customSendIconStyle,\n    defaultTextColor = theme.palette.neutralTertiary\n  } = props;\n  const hasNoContent = !hasText;\n  return mergeStyles(editorTextBoxButtonStyle, {\n    color: disabled || hasErrorMessage || hasNoContent ? defaultTextColor : theme.palette.themePrimary\n  }, customSendIconStyle);\n};\n\n/**\n * @private\n */\nexport const editorTextBoxButtonStyle: IStyle = {\n  width: '1.25rem',\n  height: '1.25rem',\n  margin: 'auto'\n};\n\n/**\n * @private\n */\nexport const attachmentUploadCardsStyles = mergeStyles({\n  margin: '0 0.25rem 0.25rem 0.25rem',\n  overflow: 'auto'\n});\n\n/**\n * @private\n */\nexport const useV9CustomStyles = makeStyles({\n  clearBackground: {\n    backgroundColor: 'transparent'\n  }\n});\n\n/**\n * @private\n */\nexport const attachmentCardBoxStyle = mergeStyles({\n  width: '100%',\n  padding: '0.50rem'\n});\n\n/**\n * @private\n */\nexport const defaultSendBoxInactiveBorderThicknessREM = 0.0625;\n/**\n * @private\n */\nexport const defaultSendBoxActiveBorderThicknessREM = 0.125;\n\n/**\n * @private\n */\nexport const borderAndBoxShadowStyle = (props: {\n  theme: Theme;\n  hasErrorMessage: boolean;\n  disabled: boolean;\n}): string => {\n  return mergeStyles(borderEditBoxStyle({\n    ...props,\n    defaultBorderColor: props.theme.palette.neutralSecondary\n  }));\n};\n\n/**\n * @private\n */\nexport const borderEditBoxStyle = (props: {\n  theme: Theme;\n  defaultBorderColor?: string;\n  hasErrorMessage: boolean;\n  disabled: boolean;\n}): IStyle => {\n  const {\n    theme,\n    hasErrorMessage,\n    disabled,\n    defaultBorderColor\n  } = props;\n  const borderColor = hasErrorMessage ? theme.semanticColors.errorText : defaultBorderColor;\n  const borderColorActive = hasErrorMessage ? theme.semanticColors.errorText : theme.palette.themePrimary;\n  const borderThickness = disabled ? 0 : defaultSendBoxInactiveBorderThicknessREM;\n  const borderActiveThickness = disabled ? 0 : defaultSendBoxActiveBorderThicknessREM;\n  return {\n    borderRadius: theme.effects.roundedCorner4,\n    border: `${borderThickness}rem solid ${borderColor}`,\n    // The border thickness of the sendbox wrapper changes on hover, to prevent the border thickness change causing the\n    // input box to shift we apply a margin to compensate. This margin is then removed on hover when the border is thicker.\n    margin: `${defaultSendBoxActiveBorderThicknessREM - borderThickness}rem`,\n    ':hover, :active, :focus, :focus-within': {\n      border: `${borderActiveThickness}rem solid ${borderColorActive}`,\n      margin: `${defaultSendBoxActiveBorderThicknessREM - borderActiveThickness}rem`\n    }\n  };\n};"]}
+{"version":3,"file":"SendBox.styles.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/SendBox.styles.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IStyle, mergeStyles, Theme } from '@fluentui/react';\nimport { makeStyles } from '@fluentui/react-components';\n\n/**\n * @private\n */\nexport const suppressIconStyle = {\n  iconContainer: { minHeight: '0', minWidth: '0', height: '0', width: '0', margin: '0' },\n  icon: { display: 'none' }\n};\n\n/**\n * @private\n */\nexport const sendBoxWrapperStyles = mergeStyles({\n  margin: '0.25rem',\n  overflow: 'hidden',\n  /**\n   * margin-top set for all the child components of sendbox except first\n   */\n  ':not(:first-child)': {\n    marginTop: '0.25rem'\n  }\n});\n\n/**\n * @private\n */\nexport const sendButtonStyle = mergeStyles({\n  height: '2.25rem',\n  width: '2.25rem'\n});\n\n/**\n * @private\n */\nexport const sendIconStyle = (props: {\n  theme: Theme;\n  hasText: boolean;\n  /* @conditional-compile-remove(file-sharing-acs) */ hasAttachment: boolean;\n  disabled?: boolean;\n  hasErrorMessage: boolean;\n  customSendIconStyle?: IStyle;\n  defaultTextColor?: string;\n}): string => {\n  const {\n    theme,\n    hasText,\n    disabled = false,\n    /* @conditional-compile-remove(file-sharing-acs) */ hasAttachment,\n    hasErrorMessage,\n    customSendIconStyle,\n    defaultTextColor = theme.palette.neutralTertiary\n  } = props;\n  const hasNoContent = !hasText && /* @conditional-compile-remove(file-sharing-acs) */ !hasAttachment;\n  return mergeStyles(\n    editorTextBoxButtonStyle,\n    {\n      color: disabled || hasErrorMessage || hasNoContent ? defaultTextColor : theme.palette.themePrimary\n    },\n    customSendIconStyle\n  );\n};\n\n/**\n * @private\n */\nexport const editorTextBoxButtonStyle: IStyle = {\n  width: '1.25rem',\n  height: '1.25rem',\n  margin: 'auto'\n};\n\n/**\n * @private\n */\nexport const attachmentUploadCardsStyles = mergeStyles({\n  margin: '0 0.25rem 0.25rem 0.25rem',\n  overflow: 'auto'\n});\n\n/**\n * @private\n */\nexport const useV9CustomStyles = makeStyles({\n  clearBackground: {\n    backgroundColor: 'transparent'\n  }\n});\n\n/**\n * @private\n */\nexport const attachmentCardBoxStyle = mergeStyles({\n  width: '100%',\n  padding: '0.50rem'\n});\n\n/**\n * @private\n */\nexport const defaultSendBoxInactiveBorderThicknessREM = 0.0625;\n/**\n * @private\n */\nexport const defaultSendBoxActiveBorderThicknessREM = 0.125;\n\n/**\n * @private\n */\nexport const borderAndBoxShadowStyle = (props: {\n  theme: Theme;\n  hasErrorMessage: boolean;\n  disabled: boolean;\n}): string => {\n  return mergeStyles(borderEditBoxStyle({ ...props, defaultBorderColor: props.theme.palette.neutralSecondary }));\n};\n\n/**\n * @private\n */\nexport const borderEditBoxStyle = (props: {\n  theme: Theme;\n  defaultBorderColor?: string;\n  hasErrorMessage: boolean;\n  disabled: boolean;\n}): IStyle => {\n  const { theme, hasErrorMessage, disabled, defaultBorderColor } = props;\n  const borderColor = hasErrorMessage ? theme.semanticColors.errorText : defaultBorderColor;\n  const borderColorActive = hasErrorMessage ? theme.semanticColors.errorText : theme.palette.themePrimary;\n\n  const borderThickness = disabled ? 0 : defaultSendBoxInactiveBorderThicknessREM;\n  const borderActiveThickness = disabled ? 0 : defaultSendBoxActiveBorderThicknessREM;\n\n  return {\n    borderRadius: theme.effects.roundedCorner4,\n    border: `${borderThickness}rem solid ${borderColor}`,\n\n    // The border thickness of the sendbox wrapper changes on hover, to prevent the border thickness change causing the\n    // input box to shift we apply a margin to compensate. This margin is then removed on hover when the border is thicker.\n    margin: `${defaultSendBoxActiveBorderThicknessREM - borderThickness}rem`,\n\n    ':hover, :active, :focus, :focus-within': {\n      border: `${borderActiveThickness}rem solid ${borderColorActive}`,\n      margin: `${defaultSendBoxActiveBorderThicknessREM - borderActiveThickness}rem`\n    }\n  };\n};\n"]}

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

@@ -0,0 +1,38 @@
+import { IButtonStyles, IIconStyles, ILinkStyles, IStackStyles, ITextStyles, Theme } from '@fluentui/react';
+/**
+ * @internal
+ */
+export declare const iconContainerStyles: IStackStyles;
+/**
+ * @internal
+ */
+export declare const iconBannerContainerStyles: IStackStyles;
+/**
+ * @internal
+ */
+export declare const textContainerStyles: IStackStyles;
+/**
+ * @internal
+ */
+export declare const iconPrimaryStyles: IIconStyles;
+/**
+ * @internal
+ */
+export declare const sparkleIconBackdropStyles: (theme: Theme) => IIconStyles;
+/**
+ * @internal
+ */
+export declare const primaryTextStyles: ITextStyles;
+/**
+ * @internal
+ */
+export declare const secondaryTextStyles: ITextStyles;
+/**
+ * @internal
+ */
+export declare const linkTextStyles: ILinkStyles;
+/**
+ * @internal
+ */
+export declare const primaryButtonStyles: IButtonStyles;
+//# sourceMappingURL=SitePermissions.styles.d.ts.map