botframework-webchat-component 4.18.0 → 4.18.1-main.20240807.dfe788c

package/src/Utils/FixedWidthImage.tsx

@@ -0,0 +1,60 @@
+import classNames from 'classnames';
+import React, { memo } from 'react';
+
+import useStyleToEmotionObject from '../hooks/internal/useStyleToEmotionObject';
+import CSSTokens from '../Styles/CSSTokens';
+
+const ROOT_STYLE = {
+  '&.webchat__fixed-width-image': {
+    display: 'flex',
+    justifyContent: 'center',
+    maxHeight: CSSTokens.MaxHeightImageBubble,
+    minHeight: CSSTokens.MinHeightImageBubble,
+    overflow: 'hidden',
+    position: 'relative',
+
+    '& .webchat__fixed-width-image__filler': {
+      visibility: 'hidden',
+      width: '100%'
+    },
+
+    '& .webchat__fixed-width-image__image': {
+      left: '50%',
+      objectFit: 'cover',
+      position: 'absolute',
+      top: '50%',
+      transform: 'translate(-50%, -50%)',
+      width: '100%'
+    }
+  }
+};
+
+/**
+ * Shows the image with fixed width but cropped top/bottom.
+ */
+const FixedWidthImage = memo(
+  ({
+    alt,
+    className,
+    src
+  }: Readonly<{
+    alt: string;
+    className?: string | undefined;
+    src: string;
+  }>) => (
+    <div
+      className={classNames(
+        'webchat__fixed-width-image',
+        useStyleToEmotionObject()(ROOT_STYLE) + '',
+        (className || '') + ''
+      )}
+    >
+      <img alt="" className="webchat__fixed-width-image__filler" role="none" src={src} />
+      <img alt={alt} className="webchat__fixed-width-image__image" src={src} />
+    </div>
+  )
+);
+
+FixedWidthImage.displayName = 'FixedWidthImage';
+
+export default FixedWidthImage;

package/src/hooks/sendBoxFocus.ts

@@ -3,6 +3,10 @@ import { createPropagation } from 'use-propagate';
 
 export type SendBoxFocusOptions = WaitUntilable<{ noKeyboard: boolean }>;
 
-const { useListen: useRegisterFocusSendBox, usePropagate: useFocusSendBox } = createPropagation<SendBoxFocusOptions>();
+const {
+  PropagationScope: FocusSendBoxScope,
+  useListen: useRegisterFocusSendBox,
+  usePropagate: useFocusSendBox
+} = createPropagation<SendBoxFocusOptions>();
 
-export { useRegisterFocusSendBox, useFocusSendBox };
+export { FocusSendBoxScope, useRegisterFocusSendBox, useFocusSendBox };

package/src/hooks/transcriptScrollRelative.ts

@@ -2,7 +2,10 @@ import { createPropagation } from 'use-propagate';
 
 export type TranscriptScrollRelativeOptions = { direction: 'down' | 'up'; displacement?: number };
 
-const { useListen: useRegisterScrollRelativeTranscript, usePropagate: useScrollRelativeTranscript } =
-  createPropagation<TranscriptScrollRelativeOptions>();
+const {
+  PropagationScope: ScrollRelativeTranscriptScope,
+  useListen: useRegisterScrollRelativeTranscript,
+  usePropagate: useScrollRelativeTranscript
+} = createPropagation<TranscriptScrollRelativeOptions>();
 
-export { useRegisterScrollRelativeTranscript, useScrollRelativeTranscript };
+export { ScrollRelativeTranscriptScope, useRegisterScrollRelativeTranscript, useScrollRelativeTranscript };

package/lib/Utils/CroppedImage.js

@@ -1,61 +0,0 @@
-"use strict";
-
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _classnames = _interopRequireDefault(require("classnames"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _react = _interopRequireWildcard(require("react"));
-var _useStyleToEmotionObject = _interopRequireDefault(require("../hooks/internal/useStyleToEmotionObject"));
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-var ROOT_STYLE = {
-  overflow: 'hidden',
-  position: 'relative',
-  '& > img': {
-    height: 'auto',
-    left: '50%',
-    position: 'absolute',
-    top: '50%',
-    transform: 'translate(-50%, -50%)',
-    width: '100%'
-  }
-};
-var CroppedImage = function CroppedImage(_ref) {
-  var alt = _ref.alt,
-    className = _ref.className,
-    height = _ref.height,
-    src = _ref.src,
-    width = _ref.width;
-  var rootClassName = (0, _useStyleToEmotionObject.default)()(ROOT_STYLE) + '';
-  var sizeStyle = (0, _react.useMemo)(function () {
-    return {
-      height: height,
-      width: width
-    };
-  }, [height, width]);
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)(rootClassName, (className || '') + ''),
-    style: sizeStyle
-  }, /*#__PURE__*/_react.default.createElement("img", {
-    alt: alt,
-    src: src
-  }));
-};
-CroppedImage.defaultProps = {
-  alt: '',
-  className: ''
-};
-CroppedImage.propTypes = {
-  alt: _propTypes.default.string,
-  className: _propTypes.default.string,
-  height: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
-  src: _propTypes.default.string.isRequired,
-  width: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired
-};
-var _default = CroppedImage;
-exports.default = _default;
-//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJuYW1lcyI6WyJfY2xhc3NuYW1lcyIsIl9pbnRlcm9wUmVxdWlyZURlZmF1bHQiLCJyZXF1aXJlIiwiX3Byb3BUeXBlcyIsIl9yZWFjdCIsIl9pbnRlcm9wUmVxdWlyZVdpbGRjYXJkIiwiX3VzZVN0eWxlVG9FbW90aW9uT2JqZWN0IiwiX2dldFJlcXVpcmVXaWxkY2FyZENhY2hlIiwibm9kZUludGVyb3AiLCJXZWFrTWFwIiwiY2FjaGVCYWJlbEludGVyb3AiLCJjYWNoZU5vZGVJbnRlcm9wIiwib2JqIiwiX19lc01vZHVsZSIsIl90eXBlb2YiLCJkZWZhdWx0IiwiY2FjaGUiLCJoYXMiLCJnZXQiLCJuZXdPYmoiLCJoYXNQcm9wZXJ0eURlc2NyaXB0b3IiLCJPYmplY3QiLCJkZWZpbmVQcm9wZXJ0eSIsImdldE93blByb3BlcnR5RGVzY3JpcHRvciIsImtleSIsInByb3RvdHlwZSIsImhhc093blByb3BlcnR5IiwiY2FsbCIsImRlc2MiLCJzZXQiLCJST09UX1NUWUxFIiwib3ZlcmZsb3ciLCJwb3NpdGlvbiIsImhlaWdodCIsImxlZnQiLCJ0b3AiLCJ0cmFuc2Zvcm0iLCJ3aWR0aCIsIkNyb3BwZWRJbWFnZSIsIl9yZWYiLCJhbHQiLCJjbGFzc05hbWUiLCJzcmMiLCJyb290Q2xhc3NOYW1lIiwidXNlU3R5bGVUb0Vtb3Rpb25PYmplY3QiLCJzaXplU3R5bGUiLCJ1c2VNZW1vIiwiY3JlYXRlRWxlbWVudCIsImNsYXNzTmFtZXMiLCJzdHlsZSIsImRlZmF1bHRQcm9wcyIsInByb3BUeXBlcyIsIlByb3BUeXBlcyIsInN0cmluZyIsIm9uZU9mVHlwZSIsIm51bWJlciIsImlzUmVxdWlyZWQiLCJfZGVmYXVsdCIsImV4cG9ydHMiXSwic291cmNlUm9vdCI6ImNvbXBvbmVudDovLy8iLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9VdGlscy9Dcm9wcGVkSW1hZ2UuanMiXSwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IGNsYXNzTmFtZXMgZnJvbSAnY2xhc3NuYW1lcyc7XG5pbXBvcnQgUHJvcFR5cGVzIGZyb20gJ3Byb3AtdHlwZXMnO1xuaW1wb3J0IFJlYWN0LCB7IHVzZU1lbW8gfSBmcm9tICdyZWFjdCc7XG5cbmltcG9ydCB1c2VTdHlsZVRvRW1vdGlvbk9iamVjdCBmcm9tICcuLi9ob29rcy9pbnRlcm5hbC91c2VTdHlsZVRvRW1vdGlvbk9iamVjdCc7XG5cbmNvbnN0IFJPT1RfU1RZTEUgPSB7XG4gIG92ZXJmbG93OiAnaGlkZGVuJyxcbiAgcG9zaXRpb246ICdyZWxhdGl2ZScsXG5cbiAgJyYgPiBpbWcnOiB7XG4gICAgaGVpZ2h0OiAnYXV0bycsXG4gICAgbGVmdDogJzUwJScsXG4gICAgcG9zaXRpb246ICdhYnNvbHV0ZScsXG4gICAgdG9wOiAnNTAlJyxcbiAgICB0cmFuc2Zvcm06ICd0cmFuc2xhdGUoLTUwJSwgLTUwJSknLFxuICAgIHdpZHRoOiAnMTAwJSdcbiAgfVxufTtcblxuY29uc3QgQ3JvcHBlZEltYWdlID0gKHsgYWx0LCBjbGFzc05hbWUsIGhlaWdodCwgc3JjLCB3aWR0aCB9KSA9PiB7XG4gIGNvbnN0IHJvb3RDbGFzc05hbWUgPSB1c2VTdHlsZVRvRW1vdGlvbk9iamVjdCgpKFJPT1RfU1RZTEUpICsgJyc7XG4gIGNvbnN0IHNpemVTdHlsZSA9IHVzZU1lbW8oKCkgPT4gKHsgaGVpZ2h0LCB3aWR0aCB9KSwgW2hlaWdodCwgd2lkdGhdKTtcblxuICByZXR1cm4gKFxuICAgIDxkaXYgY2xhc3NOYW1lPXtjbGFzc05hbWVzKHJvb3RDbGFzc05hbWUsIChjbGFzc05hbWUgfHwgJycpICsgJycpfSBzdHlsZT17c2l6ZVN0eWxlfT5cbiAgICAgIDxpbWcgYWx0PXthbHR9IHNyYz17c3JjfSAvPlxuICAgIDwvZGl2PlxuICApO1xufTtcblxuQ3JvcHBlZEltYWdlLmRlZmF1bHRQcm9wcyA9IHtcbiAgYWx0OiAnJyxcbiAgY2xhc3NOYW1lOiAnJ1xufTtcblxuQ3JvcHBlZEltYWdlLnByb3BUeXBlcyA9IHtcbiAgYWx0OiBQcm9wVHlwZXMuc3RyaW5nLFxuICBjbGFzc05hbWU6IFByb3BUeXBlcy5zdHJpbmcsXG4gIGhlaWdodDogUHJvcFR5cGVzLm9uZU9mVHlwZShbUHJvcFR5cGVzLm51bWJlciwgUHJvcFR5cGVzLnN0cmluZ10pLmlzUmVxdWlyZWQsXG4gIHNyYzogUHJvcFR5cGVzLnN0cmluZy5pc1JlcXVpcmVkLFxuICB3aWR0aDogUHJvcFR5cGVzLm9uZU9mVHlwZShbUHJvcFR5cGVzLm51bWJlciwgUHJvcFR5cGVzLnN0cmluZ10pLmlzUmVxdWlyZWRcbn07XG5cbmV4cG9ydCBkZWZhdWx0IENyb3BwZWRJbWFnZTtcbiJdLCJtYXBwaW5ncyI6Ijs7Ozs7OztBQUFBLElBQUFBLFdBQUEsR0FBQUMsc0JBQUEsQ0FBQUMsT0FBQTtBQUNBLElBQUFDLFVBQUEsR0FBQUYsc0JBQUEsQ0FBQUMsT0FBQTtBQUNBLElBQUFFLE1BQUEsR0FBQUMsdUJBQUEsQ0FBQUgsT0FBQTtBQUVBLElBQUFJLHdCQUFBLEdBQUFMLHNCQUFBLENBQUFDLE9BQUE7QUFBZ0YsU0FBQUsseUJBQUFDLFdBQUEsZUFBQUMsT0FBQSxrQ0FBQUMsaUJBQUEsT0FBQUQsT0FBQSxRQUFBRSxnQkFBQSxPQUFBRixPQUFBLFlBQUFGLHdCQUFBLFlBQUFBLHlCQUFBQyxXQUFBLFdBQUFBLFdBQUEsR0FBQUcsZ0JBQUEsR0FBQUQsaUJBQUEsS0FBQUYsV0FBQTtBQUFBLFNBQUFILHdCQUFBTyxHQUFBLEVBQUFKLFdBQUEsU0FBQUEsV0FBQSxJQUFBSSxHQUFBLElBQUFBLEdBQUEsQ0FBQUMsVUFBQSxXQUFBRCxHQUFBLFFBQUFBLEdBQUEsYUFBQUUsT0FBQSxDQUFBRixHQUFBLHlCQUFBQSxHQUFBLDRCQUFBRyxPQUFBLEVBQUFILEdBQUEsVUFBQUksS0FBQSxHQUFBVCx3QkFBQSxDQUFBQyxXQUFBLE9BQUFRLEtBQUEsSUFBQUEsS0FBQSxDQUFBQyxHQUFBLENBQUFMLEdBQUEsWUFBQUksS0FBQSxDQUFBRSxHQUFBLENBQUFOLEdBQUEsU0FBQU8sTUFBQSxXQUFBQyxxQkFBQSxHQUFBQyxNQUFB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

package/src/Utils/CroppedImage.js

@@ -1,45 +0,0 @@
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import React, { useMemo } from 'react';
-
-import useStyleToEmotionObject from '../hooks/internal/useStyleToEmotionObject';
-
-const ROOT_STYLE = {
-  overflow: 'hidden',
-  position: 'relative',
-
-  '& > img': {
-    height: 'auto',
-    left: '50%',
-    position: 'absolute',
-    top: '50%',
-    transform: 'translate(-50%, -50%)',
-    width: '100%'
-  }
-};
-
-const CroppedImage = ({ alt, className, height, src, width }) => {
-  const rootClassName = useStyleToEmotionObject()(ROOT_STYLE) + '';
-  const sizeStyle = useMemo(() => ({ height, width }), [height, width]);
-
-  return (
-    <div className={classNames(rootClassName, (className || '') + '')} style={sizeStyle}>
-      <img alt={alt} src={src} />
-    </div>
-  );
-};
-
-CroppedImage.defaultProps = {
-  alt: '',
-  className: ''
-};
-
-CroppedImage.propTypes = {
-  alt: PropTypes.string,
-  className: PropTypes.string,
-  height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
-  src: PropTypes.string.isRequired,
-  width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired
-};
-
-export default CroppedImage;