botframework-webchat 4.13.0 → 4.15.0

package/src/adaptiveCards/Attachment/{AnimationCardContent.js → AnimationCardContent.tsx}

@@ -1,15 +1,22 @@
 /* eslint react/no-array-index-key: "off" */
 
+import { DirectLineAnimationCard } from 'botframework-webchat-core';
 import { Components, hooks } from 'botframework-webchat-component';
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { FC } from 'react';
 
 import CommonCard from './CommonCard';
 
 const { ImageContent, VideoContent } = Components;
 const { useStyleSet } = hooks;
 
-const AnimationCardContent = ({ actionPerformedClassName, content, disabled }) => {
+type AnimationCardContentProps = {
+  actionPerformedClassName?: string;
+  content: DirectLineAnimationCard;
+  disabled?: boolean;
+};
+
+const AnimationCardContent: FC<AnimationCardContentProps> = ({ actionPerformedClassName, content, disabled }) => {
   const { media = [] } = content;
   const [{ animationCardAttachment: animationCardAttachmentStyleSet }] = useStyleSet();
 

package/src/adaptiveCards/Attachment/{AudioCardContent.js → AudioCardContent.tsx}

@@ -1,15 +1,22 @@
 /* eslint react/no-array-index-key: "off" */
 
+import { DirectLineAudioCard } from 'botframework-webchat-core';
 import { Components, hooks } from 'botframework-webchat-component';
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { FC } from 'react';
 
 import CommonCard from './CommonCard';
 
 const { AudioContent } = Components;
 const { useStyleSet } = hooks;
 
-const AudioCardContent = ({ actionPerformedClassName, content, disabled }) => {
+type AudioCardContentProps = {
+  actionPerformedClassName?: string;
+  content: DirectLineAudioCard;
+  disabled?: boolean;
+};
+
+const AudioCardContent: FC<AudioCardContentProps> = ({ actionPerformedClassName, content, disabled }) => {
   const [{ audioCardAttachment: audioCardAttachmentStyleSet }] = useStyleSet();
   const { autostart = false, autoloop = false, image: { url: imageURL = '' } = {}, media = [] } = content;
 

package/src/adaptiveCards/Attachment/CommonCard.js

@@ -6,8 +6,9 @@ import { hooks } from 'botframework-webchat-component';
 import AdaptiveCardBuilder from './AdaptiveCardBuilder';
 import AdaptiveCardRenderer from './AdaptiveCardRenderer';
 import useAdaptiveCardsPackage from '../hooks/useAdaptiveCardsPackage';
+import useStyleOptions from '../../hooks/useStyleOptions';
 
-const { useDirection, useStyleOptions } = hooks;
+const { useDirection } = hooks;
 
 const CommonCard = ({ actionPerformedClassName, content, disabled }) => {
   const [adaptiveCardsPackage] = useAdaptiveCardsPackage();

package/src/adaptiveCards/Attachment/{HeroCardContent.js → HeroCardContent.tsx}

@@ -1,17 +1,26 @@
+import { DirectLineHeroCard } from 'botframework-webchat-core';
 import { hooks } from 'botframework-webchat-component';
 import PropTypes from 'prop-types';
-import React, { useMemo } from 'react';
+import React, { FC, useMemo } from 'react';
 
 import AdaptiveCardBuilder from './AdaptiveCardBuilder';
 import AdaptiveCardRenderer from './AdaptiveCardRenderer';
 import useAdaptiveCardsPackage from '../hooks/useAdaptiveCardsPackage';
+import useStyleOptions from '../../hooks/useStyleOptions';
 
-const { useDirection, useStyleOptions } = hooks;
+const { useDirection } = hooks;
 
-const HeroCardContent = ({ actionPerformedClassName, content, disabled }) => {
+type HeroCardContentProps = {
+  actionPerformedClassName?: string;
+  content: DirectLineHeroCard;
+  disabled?: boolean;
+};
+
+const HeroCardContent: FC<HeroCardContentProps> = ({ actionPerformedClassName, content, disabled }) => {
   const [adaptiveCardsPackage] = useAdaptiveCardsPackage();
   const [styleOptions] = useStyleOptions();
   const [direction] = useDirection();
+
   const builtCard = useMemo(() => {
     const builder = new AdaptiveCardBuilder(adaptiveCardsPackage, styleOptions, direction);
 

package/src/adaptiveCards/Attachment/{OAuthCardContent.js → OAuthCardContent.tsx}

@@ -1,14 +1,22 @@
+import { DirectLineOAuthCard } from 'botframework-webchat-core';
 import { hooks } from 'botframework-webchat-component';
 import PropTypes from 'prop-types';
-import React, { useMemo } from 'react';
+import React, { FC, useMemo } from 'react';
 
 import AdaptiveCardBuilder from './AdaptiveCardBuilder';
 import AdaptiveCardRenderer from './AdaptiveCardRenderer';
 import useAdaptiveCardsPackage from '../hooks/useAdaptiveCardsPackage';
+import useStyleOptions from '../../hooks/useStyleOptions';
 
-const { useDirection, useStyleOptions } = hooks;
+const { useDirection } = hooks;
 
-const OAuthCardContent = ({ actionPerformedClassName, content, disabled }) => {
+type OAuthCardContentProps = {
+  actionPerformedClassName?: string;
+  content: DirectLineOAuthCard;
+  disabled?: boolean;
+};
+
+const OAuthCardContent: FC<OAuthCardContentProps> = ({ actionPerformedClassName, content, disabled }) => {
   const [adaptiveCardsPackage] = useAdaptiveCardsPackage();
   const [direction] = useDirection();
   const [styleOptions] = useStyleOptions();

package/src/adaptiveCards/Attachment/{ReceiptCardContent.js → ReceiptCardContent.tsx}

@@ -1,20 +1,28 @@
 /* eslint no-magic-numbers: ["error", { "ignore": [0, 1, 10, 15, 25, 50, 75] }] */
 
+import { DirectLineReceiptCard } from 'botframework-webchat-core';
 import { hooks } from 'botframework-webchat-component';
 import PropTypes from 'prop-types';
-import React, { useMemo } from 'react';
+import React, { FC, useMemo } from 'react';
 
 import AdaptiveCardBuilder from './AdaptiveCardBuilder';
 import AdaptiveCardRenderer from './AdaptiveCardRenderer';
 import useAdaptiveCardsPackage from '../hooks/useAdaptiveCardsPackage';
+import useStyleOptions from '../../hooks/useStyleOptions';
 
-const { useDirection, useLocalizer, useStyleOptions } = hooks;
+const { useDirection, useLocalizer } = hooks;
 
 function nullOrUndefined(obj) {
   return obj === null || typeof obj === 'undefined';
 }
 
-const ReceiptCardContent = ({ actionPerformedClassName, content, disabled }) => {
+type ReceiptCardContentProps = {
+  actionPerformedClassName?: string;
+  content: DirectLineReceiptCard;
+  disabled?: boolean;
+};
+
+const ReceiptCardContent: FC<ReceiptCardContentProps> = ({ actionPerformedClassName, content, disabled }) => {
   const [adaptiveCardsPackage] = useAdaptiveCardsPackage();
   const [direction] = useDirection();
   const [styleOptions] = useStyleOptions();
@@ -47,32 +55,54 @@ const ReceiptCardContent = ({ actionPerformedClassName, content, disabled }) =>
       }
 
       items &&
-        items.map(({ image: { alt, tap: imageTap, url } = {}, price, quantity, subtitle, tap, text, title }) => {
-          let itemColumns;
-
-          if (url) {
-            const [itemImageColumn, ...columns] = builder.addColumnSet([15, 75, 10]);
-
-            itemColumns = columns;
-            builder.addImage(url, itemImageColumn, imageTap, alt);
-          } else {
-            itemColumns = builder.addColumnSet([75, 25], undefined, tap && tap);
-          }
-
-          const [itemTitleColumn, itemPriceColumn] = itemColumns;
-
-          builder.addTextBlock(
-            quantity ? `${title} &times; ${quantity}` : title,
-            { size: TextSize.Medium, weight: TextWeight.Bolder, wrap: richCardWrapTitle },
-            itemTitleColumn
-          );
-          builder.addTextBlock(subtitle, { size: TextSize.Medium, wrap: richCardWrapTitle }, itemTitleColumn);
-          builder.addTextBlock(price, { horizontalAlignment: HorizontalAlignment.Right }, itemPriceColumn);
-
-          if (text) {
-            builder.addTextBlock(text, { size: TextSize.Medium, wrap: richCardWrapTitle }, itemTitleColumn);
+        items.map(
+          ({
+            image: { alt, tap: imageTap, url } = {},
+            price,
+            quantity,
+            subtitle,
+            tap,
+            text,
+            title
+          }: {
+            image: {
+              alt?: string;
+              tap?: any;
+              url?: string;
+            };
+            price: string;
+            quantity: string;
+            subtitle: string;
+            tap: any;
+            text: string;
+            title: string;
+          }) => {
+            let itemColumns;
+
+            if (url) {
+              const [itemImageColumn, ...columns] = builder.addColumnSet([15, 75, 10]);
+
+              itemColumns = columns;
+              builder.addImage(url, itemImageColumn, imageTap, alt);
+            } else {
+              itemColumns = builder.addColumnSet([75, 25], undefined, tap && tap);
+            }
+
+            const [itemTitleColumn, itemPriceColumn] = itemColumns;
+
+            builder.addTextBlock(
+              quantity ? `${title} &times; ${quantity}` : title,
+              { size: TextSize.Medium, weight: TextWeight.Bolder, wrap: richCardWrapTitle },
+              itemTitleColumn
+            );
+            builder.addTextBlock(subtitle, { size: TextSize.Medium, wrap: richCardWrapTitle }, itemTitleColumn);
+            builder.addTextBlock(price, { horizontalAlignment: HorizontalAlignment.Right }, itemPriceColumn);
+
+            if (text) {
+              builder.addTextBlock(text, { size: TextSize.Medium, wrap: richCardWrapTitle }, itemTitleColumn);
+            }
           }
-        });
+        );
 
       if (!nullOrUndefined(vat)) {
         const vatCol = builder.addColumnSet([75, 25]);

package/src/adaptiveCards/Attachment/{SignInCardContent.js → SignInCardContent.tsx}

@@ -1,12 +1,19 @@
+import { DirectLineSignInCard } from 'botframework-webchat-core';
 import { hooks } from 'botframework-webchat-component';
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { FC } from 'react';
 
 import CommonCard from './CommonCard';
 
 const { useStyleSet } = hooks;
 
-const SignInCardContent = ({ actionPerformedClassName, content, disabled }) => {
+type SignInCardContentProps = {
+  actionPerformedClassName?: string;
+  content: DirectLineSignInCard;
+  disabled?: boolean;
+};
+
+const SignInCardContent: FC<SignInCardContentProps> = ({ actionPerformedClassName, content, disabled }) => {
   const [{ animationCardAttachment: animationCardAttachmentStyleSet }] = useStyleSet();
 
   return (

package/src/adaptiveCards/Attachment/{ThumbnailCardContent.js → ThumbnailCardContent.tsx}

@@ -1,19 +1,28 @@
 /* eslint no-magic-numbers: ["error", { "ignore": [25, 75] }] */
 
+import { DirectLineThumbnailCard } from 'botframework-webchat-core';
 import { hooks } from 'botframework-webchat-component';
 import PropTypes from 'prop-types';
-import React, { useMemo } from 'react';
+import React, { FC, useMemo } from 'react';
 
 import AdaptiveCardBuilder from './AdaptiveCardBuilder';
 import AdaptiveCardRenderer from './AdaptiveCardRenderer';
 import useAdaptiveCardsPackage from '../hooks/useAdaptiveCardsPackage';
+import useStyleOptions from '../../hooks/useStyleOptions';
 
-const { useDirection, useStyleOptions } = hooks;
+const { useDirection } = hooks;
 
-const ThumbnailCardContent = ({ actionPerformedClassName, content, disabled }) => {
+type ThumbnailCardContentProps = {
+  actionPerformedClassName?: string;
+  content: DirectLineThumbnailCard;
+  disabled?: boolean;
+};
+
+const ThumbnailCardContent: FC<ThumbnailCardContentProps> = ({ actionPerformedClassName, content, disabled }) => {
   const [adaptiveCardsPackage] = useAdaptiveCardsPackage();
   const [direction] = useDirection();
   const [styleOptions] = useStyleOptions();
+
   const builtCard = useMemo(() => {
     if (content) {
       const builder = new AdaptiveCardBuilder(adaptiveCardsPackage, styleOptions, direction);

package/src/adaptiveCards/Attachment/{VideoCardContent.js → VideoCardContent.tsx}

@@ -1,16 +1,28 @@
 /* eslint react/no-array-index-key: "off" */
 
+import { DirectLineVideoCard } from 'botframework-webchat-core';
 import { Components, hooks } from 'botframework-webchat-component';
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { FC } from 'react';
 
 import CommonCard from './CommonCard';
 
 const { useStyleSet } = hooks;
 const { VideoContent } = Components;
 
-const VideoCardContent = ({ actionPerformedClassName, content, disabled }) => {
-  const { media, autostart, autoloop, image: { url: imageURL } = {} } = content;
+type VideoCardContentProps = {
+  actionPerformedClassName?: string;
+  content: DirectLineVideoCard & {
+    autoloop?: boolean;
+    autostart?: boolean;
+    image?: { url?: string };
+    media?: { profile?: string; url?: string }[];
+  };
+  disabled?: boolean;
+};
+
+const VideoCardContent: FC<VideoCardContentProps> = ({ actionPerformedClassName, content, disabled }) => {
+  const { autoloop, autostart, image: { url: imageURL } = { url: undefined }, media } = content;
   const [{ audioCardAttachment: audioCardAttachmentStyleSet }] = useStyleSet();
 
   return (

package/src/adaptiveCards/Styles/StyleSet/AdaptiveCardRenderer.ts

@@ -1,4 +1,4 @@
-import FullBundleStyleOptions from '../../../FullBundleStyleOptions';
+import FullBundleStyleOptions from '../../../types/FullBundleStyleOptions';
 
 export default function ({
   cardPushButtonBackgroundColor,
@@ -9,6 +9,14 @@ export default function ({
 }: FullBundleStyleOptions) {
   return {
     '&.webchat__adaptive-card-renderer': {
+      // Related to #4075.
+      // Adaptive Cards assume its host is in "forced border-box" mode.
+      // In CSS, the default is "content-box" mode.
+      // https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing#values
+      '& *': {
+        boxSizing: 'border-box'
+      },
+
       '& .ac-input, & .ac-inlineActionButton, & .ac-quickActionButton': {
         fontFamily: primaryFont
       },

package/src/adaptiveCards/Styles/adaptiveCardHostConfig.ts

@@ -1,6 +1,6 @@
 import { normalizeStyleOptions } from 'botframework-webchat-api';
 
-import FullBundleStyleOptions from '../../FullBundleStyleOptions';
+import FullBundleStyleOptions from '../../types/FullBundleStyleOptions';
 import normalizeAdaptiveCardsStyleOptions from '../normalizeStyleOptions';
 
 // https://docs.microsoft.com/en-us/adaptive-cards/rendering-cards/host-config
@@ -21,7 +21,27 @@ export default function createAdaptiveCardsHostConfig(styleOptions: FullBundleSt
           },
           accent: {
             default: accent,
-            subtle: accent
+            subtle: '#0078D4'
+          },
+          attention: {
+            default: '#D13438',
+            subtle: '#A4262C'
+          },
+          dark: {
+            default: '#000000',
+            subtle: '#646464'
+          },
+          good: {
+            default: '#0B6A0B',
+            subtle: '#028A02'
+          },
+          light: {
+            default: '#FFFFFF',
+            subtle
+          },
+          warning: {
+            default: '#B75C00',
+            subtle: '#986F0B'
           }
         }
       },
@@ -29,8 +49,8 @@ export default function createAdaptiveCardsHostConfig(styleOptions: FullBundleSt
         backgroundColor: cardEmphasisBackgroundColor,
         foregroundColors: {
           default: {
-            default: bubbleTextColor,
-            subtle
+            default: '#000000',
+            subtle: '#484644'
           }
         }
       },
@@ -39,7 +59,7 @@ export default function createAdaptiveCardsHostConfig(styleOptions: FullBundleSt
         foregroundColors: {
           default: {
             default: '#333333',
-            subtle: '#EE333333'
+            subtle: '#484644'
           }
         }
       },
@@ -48,7 +68,7 @@ export default function createAdaptiveCardsHostConfig(styleOptions: FullBundleSt
         foregroundColors: {
           default: {
             default: '#333333',
-            subtle: '#EE333333'
+            subtle: '#484644'
           }
         }
       },
@@ -57,7 +77,7 @@ export default function createAdaptiveCardsHostConfig(styleOptions: FullBundleSt
         foregroundColors: {
           default: {
             default: '#333333',
-            subtle: '#EE333333'
+            subtle: '#484644'
           }
         }
       },
@@ -66,7 +86,7 @@ export default function createAdaptiveCardsHostConfig(styleOptions: FullBundleSt
         foregroundColors: {
           default: {
             default: '#333333',
-            subtle: '#EE333333'
+            subtle: '#484644'
           }
         }
       }

package/src/adaptiveCards/Styles/createAdaptiveCardsStyleSet.spec.js

@@ -1,3 +1,5 @@
+/** @jest-environment jsdom */
+
 import createStyleSet from './createAdaptiveCardsStyleSet';
 
 describe('createAdaptiveCardsStyleSet', () => {

package/src/adaptiveCards/Styles/createAdaptiveCardsStyleSet.ts

@@ -1,6 +1,7 @@
-import { normalizeStyleOptions, StyleOptions } from 'botframework-webchat-api';
+import { normalizeStyleOptions, StrictStyleOptions, StyleOptions } from 'botframework-webchat-api';
 
-import AdaptiveCardsStyleOptions from '../AdaptiveCardsStyleOptions';
+import AdaptiveCardsStyleOptions, { StrictAdaptiveCardsStyleOptions } from '../AdaptiveCardsStyleOptions';
+import AdaptiveCardsStyleSet from '../AdaptiveCardsStyleSet';
 import createAdaptiveCardRendererStyle from './StyleSet/AdaptiveCardRenderer';
 import createAnimationCardAttachmentStyle from './StyleSet/AnimationCardAttachment';
 import createAudioCardAttachmentStyle from './StyleSet/AudioCardAttachment';
@@ -10,8 +11,10 @@ import normalizeAdaptiveCardsStyleOptions from '../normalizeStyleOptions';
 //       "styleSet" is actually CSS stylesheet and it is based on the DOM tree.
 //       DOM tree may change from time to time, thus, maintaining "styleSet" becomes a constant effort.
 
-export default function createAdaptiveCardsStyleSet(options: StyleOptions & AdaptiveCardsStyleOptions): any {
-  const strictOptions = {
+export default function createAdaptiveCardsStyleSet(
+  options: StyleOptions & AdaptiveCardsStyleOptions
+): AdaptiveCardsStyleSet {
+  const strictOptions: StrictStyleOptions & StrictAdaptiveCardsStyleOptions = {
     ...normalizeStyleOptions(options),
     ...normalizeAdaptiveCardsStyleOptions(options)
   };

package/src/adaptiveCards/{createAdaptiveCardsAttachmentForScreenReaderMiddleware.js → createAdaptiveCardsAttachmentForScreenReaderMiddleware.tsx}

@@ -1,3 +1,4 @@
+import { AttachmentForScreenReaderMiddleware } from 'botframework-webchat-api';
 import React from 'react';
 
 import AdaptiveCardAttachment from './AttachmentForScreenReader/AdaptiveCardAttachment';
@@ -14,20 +15,20 @@ const RICH_CARD_CONTENT_TYPES = [
   'application/vnd.microsoft.card.video'
 ];
 
-export default function createAdaptiveCardsAttachmentMiddleware() {
-  return () => next => (...args) => {
-    const [
-      {
-        activity,
-        attachment,
-        attachment: { content, contentType }
-      }
-    ] = args;
+export default function createAdaptiveCardsAttachmentMiddleware(): AttachmentForScreenReaderMiddleware {
+  return () =>
+    next =>
+    (...args) => {
+      const [
+        {
+          attachment: { content, contentType }
+        }
+      ] = args;
 
-    return content && RICH_CARD_CONTENT_TYPES.includes(contentType)
-      ? () => <RichCardAttachment content={content} />
-      : content && contentType === 'application/vnd.microsoft.card.adaptive'
-      ? () => <AdaptiveCardAttachment content={content} />
-      : next({ activity, attachment });
-  };
+      return content && RICH_CARD_CONTENT_TYPES.includes(contentType)
+        ? () => <RichCardAttachment content={content} />
+        : content && contentType === 'application/vnd.microsoft.card.adaptive'
+        ? () => <AdaptiveCardAttachment content={content} />
+        : next(...args);
+    };
 }

package/src/adaptiveCards/createAdaptiveCardsAttachmentMiddleware.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+
+import { AttachmentMiddleware } from 'botframework-webchat-api';
+
+import AdaptiveCardAttachment from './Attachment/AdaptiveCardAttachment';
+import AnimationCardAttachment from './Attachment/AnimationCardAttachment';
+import AudioCardAttachment from './Attachment/AudioCardAttachment';
+import HeroCardAttachment from './Attachment/HeroCardAttachment';
+import OAuthCardAttachment from './Attachment/OAuthCardAttachment';
+import ReceiptCardAttachment from './Attachment/ReceiptCardAttachment';
+import SignInCardAttachment from './Attachment/SignInCardAttachment';
+import ThumbnailCardAttachment from './Attachment/ThumbnailCardAttachment';
+import VideoCardAttachment from './Attachment/VideoCardAttachment';
+
+export default function createAdaptiveCardsAttachmentMiddleware(): AttachmentMiddleware {
+  // This is not returning a React component, but a render function.
+  return () =>
+    next =>
+    (...args) => {
+      const [{ attachment }] = args;
+
+      return attachment.contentType === 'application/vnd.microsoft.card.hero' ? (
+        <HeroCardAttachment attachment={attachment} />
+      ) : attachment.contentType === 'application/vnd.microsoft.card.adaptive' ? (
+        <AdaptiveCardAttachment attachment={attachment} />
+      ) : attachment.contentType === 'application/vnd.microsoft.card.animation' ? (
+        <AnimationCardAttachment attachment={attachment} />
+      ) : attachment.contentType === 'application/vnd.microsoft.card.audio' ? (
+        <AudioCardAttachment attachment={attachment} />
+      ) : attachment.contentType === 'application/vnd.microsoft.card.oauth' ? (
+        <OAuthCardAttachment attachment={attachment} />
+      ) : attachment.contentType === 'application/vnd.microsoft.card.receipt' ? (
+        <ReceiptCardAttachment attachment={attachment} />
+      ) : attachment.contentType === 'application/vnd.microsoft.card.signin' ? (
+        <SignInCardAttachment attachment={attachment} />
+      ) : attachment.contentType === 'application/vnd.microsoft.card.thumbnail' ? (
+        <ThumbnailCardAttachment attachment={attachment} />
+      ) : attachment.contentType === 'application/vnd.microsoft.card.video' ? (
+        <VideoCardAttachment attachment={attachment} />
+      ) : (
+        next(...args)
+      );
+    };
+}

package/src/adaptiveCards/defaultStyleOptions.ts

@@ -1,9 +1,10 @@
 import AdaptiveCardsStyleOptions from './AdaptiveCardsStyleOptions';
 
 const ADAPTIVE_CARDS_DEFAULT_STYLE_OPTIONS: Required<AdaptiveCardsStyleOptions> = {
+  adaptiveCardsParserMaxVersion: undefined,
   cardEmphasisBackgroundColor: '#F0F0F0',
   cardPushButtonBackgroundColor: '#0063B1',
-  cardPushButtonTextColor: 'white',
+  cardPushButtonTextColor: 'White',
   richCardWrapTitle: false
 };
 

package/src/adaptiveCards/hooks/internal/{useAdaptiveCardsContext.js → useAdaptiveCardsContext.ts}

@@ -2,7 +2,7 @@ import { useContext } from 'react';
 
 import AdaptiveCardsContext from '../../AdaptiveCardsContext';
 
-export default function useAdaptiveCardsContext() {
+export default function useAdaptiveCardsContext(): AdaptiveCardsContext {
   const context = useContext(AdaptiveCardsContext);
 
   if (!context) {

package/src/adaptiveCards/hooks/internal/{useParseAdaptiveCardJSON.js → useParseAdaptiveCardJSON.ts}

@@ -2,8 +2,9 @@ import { hooks } from 'botframework-webchat-component';
 import { useCallback, useMemo } from 'react';
 
 import useAdaptiveCardsPackage from '../useAdaptiveCardsPackage';
+import useStyleOptions from '../../../hooks/useStyleOptions';
 
-const { useDirection, useStyleOptions } = hooks;
+const { useDirection } = hooks;
 
 function updateRTLInline(element, rtl, adaptiveCardsPackage) {
   if (element instanceof adaptiveCardsPackage.Container) {
@@ -33,7 +34,9 @@ export default function useParseAdaptiveCardJSON() {
     const maxVersion = Version.parse(adaptiveCardsParserMaxVersion, new SerializationContext());
 
     if (maxVersion && !maxVersion.isValid) {
-      return console.warn('botframework-webchat: "adaptiveCardsParserMaxVersion" specified is not a valid version.');
+      console.warn('botframework-webchat: "adaptiveCardsParserMaxVersion" specified is not a valid version.');
+
+      return;
     }
 
     return maxVersion;

package/src/adaptiveCards/hooks/internal/{useUniqueId.js → useUniqueId.ts}

@@ -3,7 +3,7 @@
 import { useMemo } from 'react';
 import random from 'math-random';
 
-export default function useUniqueId(prefix) {
+export default function useUniqueId(prefix?: string): string {
   const id = useMemo(() => random().toString(36).substr(2, 5), []);
 
   prefix = prefix ? `${prefix}--` : '';

package/src/adaptiveCards/hooks/{useAdaptiveCardsHostConfig.js → useAdaptiveCardsHostConfig.ts}

@@ -1,19 +1,17 @@
-import { hooks } from 'botframework-webchat-component';
 import { useMemo } from 'react';
 
 import createDefaultAdaptiveCardHostConfig from '../Styles/adaptiveCardHostConfig';
 import useAdaptiveCardsContext from './internal/useAdaptiveCardsContext';
+import useStyleOptions from '../../hooks/useStyleOptions';
 
-const { useStyleOptions } = hooks;
-
-export default function useAdaptiveCardsHostConfig() {
+export default function useAdaptiveCardsHostConfig(): [any] {
   const { hostConfigFromProps } = useAdaptiveCardsContext();
   const [styleOptions] = useStyleOptions();
 
-  const patchedHostConfig = useMemo(() => hostConfigFromProps || createDefaultAdaptiveCardHostConfig(styleOptions), [
-    hostConfigFromProps,
-    styleOptions
-  ]);
+  const patchedHostConfig = useMemo(
+    () => hostConfigFromProps || createDefaultAdaptiveCardHostConfig(styleOptions),
+    [hostConfigFromProps, styleOptions]
+  );
 
   return [patchedHostConfig];
 }

package/src/adaptiveCards/hooks/{useAdaptiveCardsPackage.js → useAdaptiveCardsPackage.ts}

@@ -1,6 +1,7 @@
+import AdaptiveCardsPackage from '../../types/AdaptiveCardsPackage';
 import useAdaptiveCardsContext from './internal/useAdaptiveCardsContext';
 
-export default function useAdaptiveCardsPackage() {
+export default function useAdaptiveCardsPackage(): [AdaptiveCardsPackage] {
   const { adaptiveCardsPackage } = useAdaptiveCardsContext();
 
   return [adaptiveCardsPackage];