botframework-webchat-component 4.13.0 → 4.14.2

package/src/Activity/CarouselFilmStrip.js

@@ -7,13 +7,13 @@ import PropTypes from 'prop-types';
 import React from 'react';
 
 import Bubble from './Bubble';
+import CarouselFilmStripAttachment from './CarouselFilmStripAttachment';
 import connectToWebChat from '../connectToWebChat';
 import isZeroOrPositive from '../Utils/isZeroOrPositive';
 import ScreenReaderText from '../ScreenReaderText';
 import textFormatToContentType from '../Utils/textFormatToContentType';
 import useStyleSet from '../hooks/useStyleSet';
 import useStyleToEmotionObject from '../hooks/internal/useStyleToEmotionObject';
-import useUniqueId from '../hooks/internal/useUniqueId';
 
 const { useAvatarForBot, useAvatarForUser, useDirection, useLocalizer, useStyleOptions } = hooks;
 
@@ -36,7 +36,7 @@ const ROOT_STYLE = {
       flexShrink: 0
     },
 
-    '& .webchat__carousel-filmstrip__attachment': {
+    '& .webchat__carousel-filmstrip-attachment': {
       flex: 1
     },
 
@@ -127,7 +127,6 @@ const CarouselFilmStrip = ({
   const [{ initials: botInitials }] = useAvatarForBot();
   const [{ initials: userInitials }] = useAvatarForUser();
   const [direction] = useDirection();
-  const ariaLabelId = useUniqueId('webchat__carousel-filmstrip__id');
   const localize = useLocalizer();
   const rootClassName = useStyleToEmotionObject()(ROOT_STYLE) + '';
   const showActivityStatus = typeof renderActivityStatus === 'function';
@@ -146,10 +145,8 @@ const CarouselFilmStrip = ({
   const activityDisplayText = messageBackDisplayText || text;
   const fromUser = role === 'user';
 
-  const attachedAlt = localize(fromUser ? 'ACTIVITY_YOU_ATTACHED_ALT' : 'ACTIVITY_BOT_ATTACHED_ALT');
-  const greetingAlt = (fromUser
-    ? localize('ACTIVITY_YOU_SAID_ALT')
-    : localize('ACTIVITY_BOT_SAID_ALT', botInitials || '')
+  const greetingAlt = (
+    fromUser ? localize('ACTIVITY_YOU_SAID_ALT') : localize('ACTIVITY_BOT_SAID_ALT', botInitials || '')
   ).replace(/\s{2,}/gu, ' ');
 
   const initials = fromUser ? userInitials : botInitials;
@@ -169,15 +166,16 @@ const CarouselFilmStrip = ({
   const showAvatar = showCallout && hasAvatar && !!renderAvatar;
   const showNub = showCallout && hasNub && (topAlignedCallout || !attachments.length);
 
+  const hideNub = hasNub && !showNub;
+
   return (
     <div
-      aria-labelledby={ariaLabelId}
       className={classNames(
         'webchat__carousel-filmstrip',
         {
           'webchat__carousel-filmstrip--extra-trailing': extraTrailing,
           'webchat__carousel-filmstrip--hide-avatar': hasAvatar && !showAvatar,
-          'webchat__carousel-filmstrip--hide-nub': hasNub && !showNub,
+          'webchat__carousel-filmstrip--hide-nub': hideNub,
           'webchat__carousel-filmstrip--no-message': !activityDisplayText,
           'webchat__carousel-filmstrip--rtl': direction === 'rtl',
           'webchat__carousel-filmstrip--show-avatar': showAvatar,
@@ -196,14 +194,7 @@ const CarouselFilmStrip = ({
         <div className="webchat__carousel-filmstrip__avatar-gutter">{showAvatar && renderAvatar({ activity })}</div>
         <div className="webchat__carousel-filmstrip__content">
           {!!activityDisplayText && (
-            <div
-              aria-roledescription="message"
-              className="webchat__carousel-filmstrip__message"
-              // Disable "Prop `id` is forbidden on DOM Nodes" rule because we are using the ID prop for accessibility.
-              /* eslint-disable-next-line react/forbid-dom-props */
-              id={ariaLabelId}
-              role="group"
-            >
+            <div aria-roledescription="message" className="webchat__carousel-filmstrip__message" role="group">
               <ScreenReaderText text={greetingAlt} />
               <Bubble
                 className="webchat__carousel-filmstrip__bubble"
@@ -229,20 +220,20 @@ const CarouselFilmStrip = ({
                 ref={itemContainerCallbackRef}
               >
                 {attachments.map((attachment, index) => (
-                  <li
-                    aria-roledescription="attachment"
-                    className="webchat__carousel-filmstrip__attachment react-film__filmstrip__item"
+                  <CarouselFilmStripAttachment
+                    activity={activity}
+                    attachment={attachment}
+                    fromUser={fromUser}
+                    hasAvatar={hasAvatar}
+                    hideNub={hideNub}
+                    index={index}
                     /* Attachments do not have an ID; it is always indexed by number */
-                    /* eslint-disable-next-line react/no-array-index-key */
+                    // eslint-disable-next-line react/no-array-index-key
                     key={index}
-                    role="listitem"
-                  >
-                    <ScreenReaderText text={attachedAlt} />
-                    {/* eslint-disable-next-line react/no-array-index-key */}
-                    <Bubble fromUser={fromUser} key={index} nub={false}>
-                      {renderAttachment({ activity, attachment })}
-                    </Bubble>
-                  </li>
+                    renderAttachment={renderAttachment}
+                    showAvatar={showAvatar}
+                    showNub={showNub}
+                  />
                 ))}
               </ul>
             </div>

package/src/Activity/CarouselFilmStripAttachment.js

@@ -0,0 +1,92 @@
+import { hooks } from 'botframework-webchat-api';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import React from 'react';
+
+import Bubble from './Bubble';
+import ScreenReaderText from '../ScreenReaderText';
+import useStyleSet from '../hooks/useStyleSet';
+
+const { useDirection, useLocalizer } = hooks;
+
+const CarouselFilmStripAttachment = ({
+  activity,
+  attachment,
+  className,
+  fromUser,
+  hasAvatar,
+  hideNub,
+  index,
+  renderAttachment,
+  showAvatar,
+  showNub
+}) => {
+  const [direction] = useDirection();
+  const localize = useLocalizer();
+  const [{ carouselFilmStripAttachment: carouselFilmStripAttachmentStyleSet }] = useStyleSet();
+
+  const attachedAlt = localize(fromUser ? 'ACTIVITY_YOU_ATTACHED_ALT' : 'ACTIVITY_BOT_ATTACHED_ALT');
+
+  return (
+    <li
+      aria-roledescription="attachment"
+      className={classNames(
+        'webchat__carousel-filmstrip-attachment',
+        {
+          'webchat__carousel-filmstrip-attachment--hide-avatar': hasAvatar && !showAvatar,
+          'webchat__carousel-filmstrip-attachment--hide-nub': hideNub,
+          'webchat__carousel-filmstrip-attachment--rtl': direction === 'rtl',
+          'webchat__carousel-filmstrip-attachment--show-avatar': showAvatar,
+          'webchat__carousel-filmstrip-attachment--show-nub': showNub
+        },
+        'react-film__filmstrip__item',
+        carouselFilmStripAttachmentStyleSet + '',
+        (className || '') + ''
+      )}
+      role="listitem"
+      tabIndex={0}
+    >
+      <ScreenReaderText text={attachedAlt} />
+      {/* eslint-disable-next-line react/no-array-index-key */}
+      <Bubble fromUser={fromUser} key={index} nub={false}>
+        {renderAttachment({ activity, attachment })}
+        <div className="webchat__carousel-filmstrip-attachment--focus" />
+      </Bubble>
+    </li>
+  );
+};
+
+CarouselFilmStripAttachment.defaultProps = {
+  className: ''
+};
+
+CarouselFilmStripAttachment.propTypes = {
+  activity: PropTypes.shape({
+    attachments: PropTypes.array,
+    channelData: PropTypes.shape({
+      messageBack: PropTypes.shape({
+        displayText: PropTypes.string
+      }),
+      state: PropTypes.string
+    }),
+    from: PropTypes.shape({
+      role: PropTypes.string.isRequired
+    }).isRequired,
+    text: PropTypes.string,
+    textFormat: PropTypes.string,
+    timestamp: PropTypes.string
+  }).isRequired,
+  attachment: PropTypes.shape({
+    content: PropTypes.any
+  }).isRequired,
+  className: PropTypes.string,
+  fromUser: PropTypes.any.isRequired,
+  hasAvatar: PropTypes.any.isRequired,
+  hideNub: PropTypes.bool.isRequired,
+  index: PropTypes.number.isRequired,
+  renderAttachment: PropTypes.func.isRequired,
+  showAvatar: PropTypes.bool.isRequired,
+  showNub: PropTypes.bool.isRequired
+};
+
+export default CarouselFilmStripAttachment;

package/src/Activity/{Speak.js → Speak.tsx}

@@ -1,6 +1,7 @@
+import { DirectLineActivity } from 'botframework-webchat-core';
 import { hooks } from 'botframework-webchat-api';
 import PropTypes from 'prop-types';
-import React, { useCallback, useMemo } from 'react';
+import React, { FC, useCallback, useMemo } from 'react';
 import Say, { SayUtterance } from 'react-say';
 
 import connectToWebChat from '../connectToWebChat';
@@ -22,7 +23,11 @@ const connectSpeakActivity = (...selectors) =>
     ...selectors
   );
 
-const Speak = ({ activity }) => {
+type SpeakProps = {
+  activity: DirectLineActivity;
+};
+
+const Speak: FC<SpeakProps> = ({ activity }) => {
   const [{ showSpokenText }] = useStyleOptions();
   const markActivityAsSpoken = useMarkActivityAsSpoken();
   const selectVoice = useVoiceSelector(activity);
@@ -40,14 +45,16 @@ const Speak = ({ activity }) => {
         speak || text,
         ...attachments
           .filter(({ contentType }) => contentType === 'application/vnd.microsoft.card.adaptive')
-          .map(({ content: { speak } = {} }) => speak)
+          .map(attachment => attachment?.content?.speak)
       ]
         .filter(line => line)
         .join('\r\n')
     );
   }, [activity]);
 
-  const { channelData: { speechSynthesisUtterance } = {} } = activity;
+  const {
+    channelData: { speechSynthesisUtterance } = {}
+  }: { channelData: { speechSynthesisUtterance?: SpeechSynthesisUtterance } } = activity;
 
   return (
     !!activity && (
@@ -57,7 +64,7 @@ const Speak = ({ activity }) => {
         ) : (
           <Say onEnd={markAsSpoken} onError={markAsSpoken} text={singleLine} voice={selectVoice} />
         )}
-        {!!showSpokenText && <SayAlt speak={singleLine} voice={selectVoice} />}
+        {!!showSpokenText && <SayAlt speak={singleLine} />}
       </React.Fragment>
     )
   );

package/src/Activity/{StackedLayout.js → StackedLayout.tsx}

@@ -1,9 +1,10 @@
 /* eslint complexity: ["error", 30] */
 
-import { hooks } from 'botframework-webchat-api';
+import { DirectLineActivity } from 'botframework-webchat-core';
+import { hooks, RenderAttachment } from 'botframework-webchat-api';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { FC, ReactNode } from 'react';
 
 import Bubble from './Bubble';
 import connectToWebChat from '../connectToWebChat';
@@ -73,7 +74,7 @@ const connectStackedLayout = (...selectors) =>
           options: { botAvatarInitials, userAvatarInitials }
         }
       },
-      { activity: { from: { role } = {} } = {} }
+      { activity: { from: { role = undefined } = {} } = {} }
     ) => ({
       avatarInitials: role === 'user' ? userAvatarInitials : botAvatarInitials,
       language,
@@ -85,7 +86,16 @@ const connectStackedLayout = (...selectors) =>
     ...selectors
   );
 
-const StackedLayout = ({
+type StackedLayoutProps = {
+  activity: DirectLineActivity;
+  hideTimestamp?: boolean;
+  renderActivityStatus?: (({ hideTimestamp: boolean }) => Exclude<ReactNode, boolean | null | undefined>) | false;
+  renderAttachment?: RenderAttachment;
+  renderAvatar?: (activity: DirectLineActivity) => (() => Exclude<ReactNode, boolean | null | undefined>) | false;
+  showCallout?: boolean;
+};
+
+const StackedLayout: FC<StackedLayoutProps> = ({
   activity,
   hideTimestamp,
   renderActivityStatus,
@@ -93,14 +103,15 @@ const StackedLayout = ({
   renderAvatar,
   showCallout
 }) => {
-  const [{ bubbleNubOffset, bubbleNubSize, bubbleFromUserNubOffset, bubbleFromUserNubSize }] = useStyleOptions();
+  const [styleOptions] = useStyleOptions();
   const [{ initials: botInitials }] = useAvatarForBot();
   const [{ initials: userInitials }] = useAvatarForUser();
   const [{ stackedLayout: stackedLayoutStyleSet }] = useStyleSet();
   const ariaLabelId = useUniqueId('webchat__stacked-layout__id');
   const localize = useLocalizer();
   const rootClassName = useStyleToEmotionObject()(ROOT_STYLE) + '';
-  const showActivityStatus = typeof renderActivityStatus === 'function';
+
+  const { bubbleNubOffset, bubbleNubSize, bubbleFromUserNubOffset, bubbleFromUserNubSize } = styleOptions;
 
   const {
     attachments = [],
@@ -108,6 +119,12 @@ const StackedLayout = ({
     from: { role } = {},
     text,
     textFormat
+  }: {
+    attachments?: [];
+    channelData?: { messageBack?: { displayText?: string } };
+    from?: { role?: 'bot' | 'user' };
+    text?: string;
+    textFormat?: string;
   } = activity;
 
   const activityDisplayText = messageBackDisplayText || text;
@@ -153,7 +170,9 @@ const StackedLayout = ({
       role="group"
     >
       <div className="webchat__stacked-layout__main">
-        <div className="webchat__stacked-layout__avatar-gutter">{showAvatar && renderAvatar({ activity })}</div>
+        <div className="webchat__stacked-layout__avatar-gutter">
+          {showAvatar && renderAvatar && renderAvatar({ activity })}
+        </div>
         <div className="webchat__stacked-layout__content">
           {!!activityDisplayText && (
             <div
@@ -168,7 +187,7 @@ const StackedLayout = ({
               <Bubble
                 className="webchat__stacked-layout__message"
                 fromUser={fromUser}
-                nub={showNub || ((hasAvatar || hasNub) && 'hidden')}
+                nub={showNub || (hasAvatar || hasNub ? 'hidden' : false)}
               >
                 {renderAttachment({
                   activity,
@@ -197,7 +216,7 @@ const StackedLayout = ({
                 fromUser={fromUser}
                 /* eslint-disable-next-line react/no-array-index-key */
                 key={index}
-                nub={(hasAvatar || hasNub) && 'hidden'}
+                nub={hasAvatar || hasNub ? 'hidden' : false}
               >
                 {renderAttachment({ activity, attachment })}
               </Bubble>
@@ -206,7 +225,7 @@ const StackedLayout = ({
         </div>
         <div className="webchat__stacked-layout__alignment-pad" />
       </div>
-      {showActivityStatus && (
+      {typeof renderActivityStatus === 'function' && (
         <div className="webchat__stacked-layout__status">
           <div className="webchat__stacked-layout__avatar-gutter" />
           <div className="webchat__stacked-layout__nub-pad" />
@@ -221,7 +240,7 @@ const StackedLayout = ({
 StackedLayout.defaultProps = {
   hideTimestamp: false,
   renderActivityStatus: false,
-  renderAvatar: false,
+  renderAvatar: undefined,
   showCallout: true
 };
 
@@ -242,8 +261,14 @@ StackedLayout.propTypes = {
     type: PropTypes.string.isRequired
   }).isRequired,
   hideTimestamp: PropTypes.bool,
+
+  // PropTypes cannot validate precisely with its TypeScript counterpart.
+  // @ts-ignore
   renderActivityStatus: PropTypes.oneOfType([PropTypes.oneOf([false]), PropTypes.func]),
   renderAttachment: PropTypes.func.isRequired,
+
+  // PropTypes cannot validate precisely with its TypeScript counterpart.
+  // @ts-ignore
   renderAvatar: PropTypes.oneOfType([PropTypes.oneOf([false]), PropTypes.func]),
   showCallout: PropTypes.bool
 };

package/src/Attachment/Assets/DownloadIcon.js

@@ -4,7 +4,14 @@ import React from 'react';
 const ICON_SIZE_FACTOR = 22;
 
 const DownloadIcon = ({ className, size }) => (
-  <svg className={className} height={ICON_SIZE_FACTOR * size} viewBox="0 0 31.8 46" width={ICON_SIZE_FACTOR * size}>
+  <svg
+    className={className}
+    focusable={false}
+    height={ICON_SIZE_FACTOR * size}
+    role="presentation"
+    viewBox="0 0 31.8 46"
+    width={ICON_SIZE_FACTOR * size}
+  >
     <path d="M26.8,23.8l-10.9,11L5,23.8l1.6-1.6l8.2,8.3V5H17v25.5l8.2-8.3L26.8,23.8z M5.8,41v-2.2H26V41H5.8z" />
   </svg>
 );

package/src/Attachment/{AudioContent.js → AudioContent.tsx}

@@ -1,9 +1,17 @@
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { FC } from 'react';
 
 import useStyleSet from '../hooks/useStyleSet';
 
-const AudioContent = ({ alt, autoPlay, loop, poster, src }) => {
+type AudioContentProps = {
+  alt?: string;
+  autoPlay?: boolean;
+  loop?: boolean;
+  poster?: string;
+  src: string;
+};
+
+const AudioContent: FC<AudioContentProps> = ({ alt, autoPlay, loop, src }) => {
   const [{ audioContent: audioContentStyleSet }] = useStyleSet();
 
   return (
@@ -13,7 +21,6 @@ const AudioContent = ({ alt, autoPlay, loop, poster, src }) => {
       className={audioContentStyleSet}
       controls={true}
       loop={loop}
-      poster={poster}
       src={src}
     />
   );
@@ -30,6 +37,8 @@ AudioContent.propTypes = {
   alt: PropTypes.string,
   autoPlay: PropTypes.bool,
   loop: PropTypes.bool,
+  // We will keep the "poster" prop for #3315.
+  // eslint-disable-next-line react/no-unused-prop-types
   poster: PropTypes.string,
   src: PropTypes.string.isRequired
 };

package/src/Attachment/{FileContent.js → FileContent.tsx}

@@ -1,10 +1,9 @@
 import { hooks } from 'botframework-webchat-api';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { FC } from 'react';
 
 import DownloadIcon from './Assets/DownloadIcon';
-import ScreenReaderText from '../ScreenReaderText';
 import useStyleSet from '../hooks/useStyleSet';
 import useStyleToEmotionObject from '../hooks/internal/useStyleToEmotionObject';
 
@@ -61,7 +60,14 @@ FileContentBadge.propTypes = {
   size: PropTypes.number
 };
 
-const FileContent = ({ className, href, fileName, size }) => {
+type FileContentProps = {
+  className?: string;
+  fileName: string;
+  href?: string;
+  size?: number;
+};
+
+const FileContent: FC<FileContentProps> = ({ className, href, fileName, size }) => {
   const [{ fileContent: fileContentStyleSet }] = useStyleSet();
   const localize = useLocalizer();
   const localizeBytes = useByteFormatter();
@@ -83,20 +89,17 @@ const FileContent = ({ className, href, fileName, size }) => {
 
   return (
     <div
-      aria-hidden={true}
       className={classNames('webchat__fileContent', rootClassName, fileContentStyleSet + '', (className || '') + '')}
     >
-      <ScreenReaderText text={alt} />
       {href ? (
         <a
-          aria-hidden={true}
+          aria-label={alt}
           className="webchat__fileContent__buttonLink"
           download={fileName}
           href={href}
           rel="noopener noreferrer"
           target="_blank"
         >
-          {/* Although nested, Chrome v75 does not respect the above aria-hidden and makes the below aria-hidden in FileContentBadge necessary */}
           <FileContentBadge downloadIcon={true} fileName={fileName} size={size} />
         </a>
       ) : (

package/src/Attachment/{HTMLVideoContent.js → HTMLVideoContent.tsx}

@@ -1,9 +1,17 @@
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { FC } from 'react';
 
 import useStyleSet from '../hooks/useStyleSet';
 
-const HTMLVideoContent = ({ alt, autoPlay, loop, poster, src }) => {
+type HTMLVideoContentProps = {
+  alt?: string;
+  autoPlay?: boolean;
+  loop?: boolean;
+  poster?: string;
+  src: string;
+};
+
+const HTMLVideoContent: FC<HTMLVideoContentProps> = ({ alt, autoPlay, loop, poster, src }) => {
   const [{ videoContent: videoContentStyleSet }] = useStyleSet();
 
   return (

package/src/Attachment/{ImageContent.js → ImageContent.tsx}

@@ -1,12 +1,17 @@
 import { hooks } from 'botframework-webchat-api';
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { FC } from 'react';
 
 import CroppedImage from '../Utils/CroppedImage';
 
 const { useStyleOptions } = hooks;
 
-const ImageContent = ({ alt, src }) => {
+type ImageContentProps = {
+  alt?: string;
+  src: string;
+};
+
+const ImageContent: FC<ImageContentProps> = ({ alt, src }) => {
   const [{ bubbleImageHeight }] = useStyleOptions();
 
   return <CroppedImage alt={alt} height={bubbleImageHeight} src={src} width="100%" />;

package/src/Attachment/{TextContent.js → TextContent.tsx}

@@ -5,12 +5,17 @@
 
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { FC } from 'react';
 
 import useRenderMarkdownAsHTML from '../hooks/useRenderMarkdownAsHTML';
 import useStyleSet from '../hooks/useStyleSet';
 
-const TextContent = ({ contentType, text }) => {
+type TextContentProps = {
+  contentType?: string;
+  text: string;
+};
+
+const TextContent: FC<TextContentProps> = ({ contentType, text }) => {
   const [{ textContent: textContentStyleSet }] = useStyleSet();
   const renderMarkdownAsHTML = useRenderMarkdownAsHTML();
   const contentTypeMarkdown = contentType === 'text/markdown';
@@ -21,11 +26,13 @@ const TextContent = ({ contentType, text }) => {
       dangerouslySetInnerHTML={{ __html: renderMarkdownAsHTML(text || '') }}
     />
   ) : (
-    (text || '').split('\n').map((line, index) => (
-      <p className={classNames('plain', textContentStyleSet + '')} key={index}>
-        {line.trim()}
-      </p>
-    ))
+    <React.Fragment>
+      {(text || '').split('\n').map((line, index) => (
+        <p className={classNames('plain', textContentStyleSet + '')} key={index}>
+          {line.trim()}
+        </p>
+      ))}
+    </React.Fragment>
   );
 };
 

package/src/Attachment/{VideoContent.js → VideoContent.tsx}

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { FC } from 'react';
 
 import HTMLVideoContent from './HTMLVideoContent';
 import VimeoContent from './VimeoContent';
@@ -30,7 +30,15 @@ function parseURL(url) {
   return { hostname, pathname, search };
 }
 
-const VideoContent = ({ alt, autoPlay, loop, poster, src }) => {
+type VideoContentProps = {
+  alt?: string;
+  autoPlay?: boolean;
+  loop?: boolean;
+  poster?: string;
+  src: string;
+};
+
+const VideoContent: FC<VideoContentProps> = ({ alt, autoPlay, loop, poster, src }) => {
   const { hostname, pathname, search } = parseURL(src);
   const lastSegment = pathname.split('/').pop();
   const searchParams = new URLSearchParams(search);

package/src/Attachment/{VimeoContent.js → VimeoContent.tsx}

@@ -1,18 +1,25 @@
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { FC } from 'react';
 
 import useStyleSet from '../hooks/useStyleSet';
 
-const VimeoContent = ({ alt, autoPlay, embedID, loop }) => {
+type VimeoContentProps = {
+  alt?: string;
+  autoPlay?: boolean;
+  embedID: string;
+  loop?: boolean;
+};
+
+const VimeoContent: FC<VimeoContentProps> = ({ alt, autoPlay, embedID, loop }) => {
   const [{ vimeoContent: vimeoContentStyleSet }] = useStyleSet();
 
   const search = new URLSearchParams({
-    autoplay: autoPlay ? 1 : 0,
-    badge: 0,
-    byline: 0,
-    loop: loop ? 1 : 0,
-    portrait: 0,
-    title: 0
+    autoplay: autoPlay ? '1' : '0',
+    badge: '0',
+    byline: '0',
+    loop: loop ? '1' : '0',
+    portrait: '0',
+    title: '0'
   }).toString();
 
   return (

package/src/Attachment/{YouTubeContent.js → YouTubeContent.tsx}

@@ -1,15 +1,22 @@
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { FC } from 'react';
 
 import useStyleSet from '../hooks/useStyleSet';
 
-const YouTubeContent = ({ alt, autoPlay, embedID, loop }) => {
+type YouTubeContentProps = {
+  alt?: string;
+  autoPlay?: boolean;
+  embedID: string;
+  loop?: boolean;
+};
+
+const YouTubeContent: FC<YouTubeContentProps> = ({ alt, autoPlay, embedID, loop }) => {
   const [{ youTubeContent: youTubeContentStyleSet }] = useStyleSet();
 
   const search = new URLSearchParams({
-    autoplay: autoPlay ? 1 : 0,
-    loop: loop ? 1 : 0,
-    modestbranding: 1
+    autoplay: autoPlay ? '1' : '0',
+    loop: loop ? '1' : '0',
+    modestbranding: '1'
   }).toString();
 
   return (