botframework-webchat-component 4.18.2 → 4.19.0

package/src/Activity/Bubble.tsx

@@ -1,35 +1,19 @@
 /* eslint no-magic-numbers: ["error", { "ignore": [-1, 0, 1, 2, 10] }] */
 
+import { reactNode, validateProps } from '@msinternal/botframework-webchat-react-valibot';
+import { useStyles } from '@msinternal/botframework-webchat-styles/react';
 import { hooks } from 'botframework-webchat-api';
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import React, { FC, ReactNode, memo } from 'react';
+import cx from 'classnames';
+import React, { memo } from 'react';
+import { boolean, literal, object, optional, pipe, readonly, string, union, type InferInput } from 'valibot';
 
 import isZeroOrPositive from '../Utils/isZeroOrPositive';
-import useStyleSet from '../hooks/useStyleSet';
-import useStyleToEmotionObject from '../hooks/internal/useStyleToEmotionObject';
 
-const { useDirection, useStyleOptions } = hooks;
+import styles from './Bubble.module.css';
 
-const ROOT_STYLE = {
-  '&.webchat__bubble': {
-    display: 'flex',
-    position: 'relative',
+const { useStyleOptions } = hooks;
 
-    '& .webchat__bubble__nub-pad': {
-      flexShrink: 0
-    },
-
-    '& .webchat__bubble__content': {
-      flexGrow: 1,
-
-      // This is for hiding content outside of the bubble, for example, content outside of border radius
-      overflow: 'hidden'
-    }
-  }
-};
-
-function acuteNubSVG(nubSize, strokeWidth, side, upSideDown = false) {
+function acuteNubSVG(nubSize, strokeWidth, side, upSideDown = false, classNames) {
   if (typeof nubSize !== 'number') {
     return false;
   }
@@ -50,29 +34,40 @@ function acuteNubSVG(nubSize, strokeWidth, side, upSideDown = false) {
 
   return (
     <svg
-      className="webchat__bubble__nub"
+      className={classNames['bubble__nub']}
       version="1.1"
       viewBox={`0 0 ${nubSize} ${nubSize}`}
       xmlns="http://www.w3.org/2000/svg"
     >
       <g transform={`${horizontalTransform} ${verticalTransform}`}>
-        <path className="webchat__bubble__nub-outline" d={`M${p1} L${p2} L${p3}`} />
+        <path className={classNames['bubble__nub-outline']} d={`M${p1} L${p2} L${p3}`} />
       </g>
     </svg>
   );
 }
 
-type BubbleProps = {
-  'aria-hidden'?: boolean;
-  children?: ReactNode;
-  className?: string;
-  fromUser?: boolean;
-  nub?: boolean | 'hidden';
-};
-
-const Bubble: FC<BubbleProps> = ({ 'aria-hidden': ariaHidden, children, className, fromUser, nub }) => {
-  const [{ bubble: bubbleStyleSet }] = useStyleSet();
-  const [direction] = useDirection();
+const bubblePropsSchema = pipe(
+  object({
+    'aria-hidden': optional(boolean()),
+    children: optional(reactNode()),
+    className: optional(string()),
+    fromUser: optional(boolean()),
+    nub: optional(union([boolean(), literal('hidden')]))
+  }),
+  readonly()
+);
+
+type BubbleProps = InferInput<typeof bubblePropsSchema>;
+
+function Bubble(props: BubbleProps) {
+  const {
+    'aria-hidden': ariaHidden,
+    children,
+    className,
+    fromUser,
+    nub = false
+  } = validateProps(bubblePropsSchema, props);
+
   const [
     {
       bubbleBorderWidth,
@@ -83,7 +78,7 @@ const Bubble: FC<BubbleProps> = ({ 'aria-hidden': ariaHidden, children, classNam
       bubbleFromUserNubOffset
     }
   ] = useStyleOptions();
-  const rootClassName = useStyleToEmotionObject()(ROOT_STYLE) + '';
+  const classNames = useStyles(styles);
 
   const { borderWidth, nubOffset, nubSize, side } = fromUser
     ? {
@@ -102,43 +97,23 @@ const Bubble: FC<BubbleProps> = ({ 'aria-hidden': ariaHidden, children, classNam
   return (
     <div
       aria-hidden={ariaHidden}
-      className={classNames(
-        'webchat__bubble',
+      className={cx(
+        classNames.bubble,
         {
-          'webchat__bubble--from-user': fromUser,
-          'webchat__bubble--hide-nub': nub !== true && nub !== false,
-          'webchat__bubble--nub-on-top': isZeroOrPositive(nubOffset),
-          'webchat__bubble--rtl': direction === 'rtl',
-          'webchat__bubble--show-nub': nub === true
+          [classNames['bubble--from-user']]: fromUser,
+          [classNames['bubble--hide-nub']]: nub !== true && nub !== false,
+          [classNames['bubble--nub-on-top']]: isZeroOrPositive(nubOffset),
+          [classNames['bubble--show-nub']]: nub === true
         },
-        rootClassName,
-        bubbleStyleSet + '',
-        (className || '') + ''
+        className
       )}
     >
-      <div className="webchat__bubble__nub-pad" />
-      <div className="webchat__bubble__content">{children}</div>
-      {nub === true && acuteNubSVG(nubSize, borderWidth, side, !isZeroOrPositive(nubOffset))}
+      <div className={classNames['bubble__nub-pad']} />
+      <div className={classNames['bubble__content']}>{children}</div>
+      {nub === true && acuteNubSVG(nubSize, borderWidth, side, !isZeroOrPositive(nubOffset), classNames)}
     </div>
   );
-};
-
-Bubble.defaultProps = {
-  'aria-hidden': undefined,
-  children: undefined,
-  className: '',
-  fromUser: false,
-  nub: false
-};
-
-Bubble.propTypes = {
-  'aria-hidden': PropTypes.bool,
-  children: PropTypes.any,
-  className: PropTypes.string,
-  fromUser: PropTypes.bool,
-  nub: PropTypes.oneOf([true, false, 'hidden'])
-};
-
-Bubble.displayName = 'Bubble';
+}
 
 export default memo(Bubble);
+export { bubblePropsSchema, type BubbleProps };

package/src/Activity/CarouselFilmStrip.js

@@ -1,8 +1,9 @@
 /* eslint complexity: ["error", 30] */
 
 import { hooks } from 'botframework-webchat-api';
+import { useStyles } from '@msinternal/botframework-webchat-styles/react';
 import { useItemContainerCallbackRef, useScrollableCallbackRef } from 'react-film';
-import classNames from 'classnames';
+import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
 
@@ -11,89 +12,10 @@ import CarouselFilmStripAttachment from './CarouselFilmStripAttachment';
 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';
 
-const { useAvatarForBot, useAvatarForUser, useDirection, useLocalizer, useStyleOptions } = hooks;
+import styles from './CarouselFilmStrip.module.css';
 
-const ROOT_STYLE = {
-  '&.webchat__carousel-filmstrip': {
-    display: 'flex',
-    flexDirection: 'column',
-    MsOverflowStyle: 'none',
-    overflowX: 'scroll',
-    overflowY: 'hidden',
-    position: 'relative', // This is to keep screen reader text in the destinated area.
-    touchAction: 'manipulation',
-    WebkitOverflowScrolling: 'touch',
-
-    '&::-webkit-scrollbar': {
-      display: 'none'
-    },
-
-    '& .webchat__carousel-filmstrip__alignment-pad': {
-      flexShrink: 0
-    },
-
-    '& .webchat__carousel-filmstrip-attachment': {
-      flex: 1
-    },
-
-    '& .webchat__carousel-filmstrip__attachments': {
-      display: 'flex',
-      listStyleType: 'none',
-      margin: 0,
-      padding: 0
-    },
-
-    '& .webchat__carousel-filmstrip__avatar': {
-      flexShrink: 0
-    },
-
-    '& .webchat__carousel-filmstrip__avatar-gutter': {
-      display: 'flex',
-      flexDirection: 'column',
-      flexShrink: 0
-    },
-
-    '& .webchat__carousel-filmstrip__complimentary': {
-      display: 'flex'
-    },
-
-    '& .webchat__carousel-filmstrip__complimentary-content': {
-      display: 'flex',
-      flexGrow: 1,
-      flexDirection: 'column'
-    },
-
-    '& .webchat__carousel-filmstrip__content': {
-      display: 'flex',
-      flexGrow: 1,
-      flexDirection: 'column'
-    },
-
-    '& .webchat__carousel-filmstrip__filler': {
-      flexGrow: 10000,
-      flexShrink: 1
-    },
-
-    '& .webchat__carousel-filmstrip__main': {
-      display: 'flex'
-    },
-
-    '& .webchat__carousel-filmstrip__message': {
-      display: 'flex'
-    },
-
-    '& .webchat__carousel-filmstrip__nub-pad': {
-      flexShrink: 0
-    },
-
-    '& .webchat__carousel-filmstrip__status': {
-      display: 'flex'
-    }
-  }
-};
+const { useAvatarForBot, useAvatarForUser, useLocalizer, useStyleOptions } = hooks;
 
 const CarouselFilmStrip = ({
   activity,
@@ -105,13 +27,11 @@ const CarouselFilmStrip = ({
   showCallout
 }) => {
   const [{ bubbleNubOffset, bubbleNubSize, bubbleFromUserNubOffset, bubbleFromUserNubSize }] = useStyleOptions();
-  const [{ carouselFilmStrip: carouselFilmStripStyleSet }] = useStyleSet();
   const [{ initials: botInitials }] = useAvatarForBot();
   const [{ initials: userInitials }] = useAvatarForUser();
-  const [direction] = useDirection();
   const localize = useLocalizer();
-  const rootClassName = useStyleToEmotionObject()(ROOT_STYLE) + '';
   const showActivityStatus = typeof renderActivityStatus === 'function';
+  const classNames = useStyles(styles);
 
   const itemContainerCallbackRef = useItemContainerCallbackRef();
   const scrollableCallbackRef = useScrollableCallbackRef();
@@ -152,33 +72,32 @@ const CarouselFilmStrip = ({
 
   return (
     <div
-      className={classNames(
-        'webchat__carousel-filmstrip',
+      className={cx(
+        classNames['carousel-filmstrip'],
         {
-          'webchat__carousel-filmstrip--extra-trailing': extraTrailing,
-          'webchat__carousel-filmstrip--hide-avatar': hasAvatar && !showAvatar,
-          'webchat__carousel-filmstrip--hide-nub': hideNub,
-          'webchat__carousel-filmstrip--no-message': !activityDisplayText,
-          'webchat__carousel-filmstrip--rtl': direction === 'rtl',
-          'webchat__carousel-filmstrip--show-avatar': showAvatar,
-          'webchat__carousel-filmstrip--show-nub': showNub,
-          'webchat__carousel-filmstrip--top-callout': topAlignedCallout
+          [classNames['carousel-filmstrip--extra-trailing']]: extraTrailing,
+          [classNames['carousel-filmstrip--hide-avatar']]: hasAvatar && !showAvatar,
+          [classNames['carousel-filmstrip--hide-nub']]: hideNub,
+          [classNames['carousel-filmstrip--no-message']]: !activityDisplayText,
+          [classNames['carousel-filmstrip--show-avatar']]: showAvatar,
+          [classNames['carousel-filmstrip--show-nub']]: showNub,
+          [classNames['carousel-filmstrip--top-callout']]: topAlignedCallout
         },
         'react-film__filmstrip',
-        rootClassName,
-        carouselFilmStripStyleSet + '',
-        (className || '') + ''
+        className
       )}
       ref={scrollableCallbackRef}
     >
-      <div className="webchat__carousel-filmstrip__main">
-        <div className="webchat__carousel-filmstrip__avatar-gutter">{showAvatar && renderAvatar({ activity })}</div>
-        <div className="webchat__carousel-filmstrip__content">
+      <div className={classNames['carousel-filmstrip__main']}>
+        <div className={classNames['carousel-filmstrip__avatar-gutter']}>
+          {showAvatar && renderAvatar({ activity })}
+        </div>
+        <div className={classNames['carousel-filmstrip__content']}>
           {!!activityDisplayText && (
-            <div aria-roledescription="message" className="webchat__carousel-filmstrip__message" role="group">
+            <div aria-roledescription="message" className={classNames['carousel-filmstrip__message']} role="group">
               <ScreenReaderText text={greetingAlt} />
               <Bubble
-                className="webchat__carousel-filmstrip__bubble"
+                className={classNames['carousel-filmstrip__bubble']}
                 fromUser={fromUser}
                 nub={showNub || ((hasAvatar || hasNub) && 'hidden')}
               >
@@ -190,14 +109,14 @@ const CarouselFilmStrip = ({
                   }
                 })}
               </Bubble>
-              <div className="webchat__carousel-filmstrip__filler" />
+              <div className={classNames['carousel-filmstrip__filler']} />
             </div>
           )}
-          <div className="webchat__carousel-filmstrip__complimentary">
-            <div className="webchat__carousel-filmstrip__nub-pad" />
-            <div className="webchat__carousel-filmstrip__complimentary-content c">
+          <div className={classNames['carousel-filmstrip__complimentary']}>
+            <div className={classNames['carousel-filmstrip__nub-pad']} />
+            <div className={classNames['carousel-filmstrip__complimentary-content']}>
               <ul
-                className="webchat__carousel-filmstrip__attachments react-film__filmstrip__list"
+                className={cx(classNames['carousel-filmstrip__attachments'], 'react-film__filmstrip__list')}
                 ref={itemContainerCallbackRef}
               >
                 {attachments.map((attachment, index) => (
@@ -220,12 +139,12 @@ const CarouselFilmStrip = ({
             </div>
           </div>
         </div>
-        <div className="webchat__carousel-filmstrip__alignment-pad" />
+        <div className={classNames['carousel-filmstrip__alignment-pad']} />
       </div>
       {showActivityStatus && (
-        <div className="webchat__carousel-filmstrip__status">
-          <div className="webchat__carousel-filmstrip__avatar-gutter" />
-          <div className="webchat__carousel-filmstrip__nub-pad" />
+        <div className={classNames['carousel-filmstrip__status']}>
+          <div className={classNames['carousel-filmstrip__avatar-gutter']} />
+          <div className={classNames['carousel-filmstrip__nub-pad']} />
           {renderActivityStatus({ hideTimestamp })}
         </div>
       )}

package/src/Activity/CarouselFilmStrip.module.css

@@ -0,0 +1,155 @@
+:global(.webchat) .carousel-filmstrip {
+  display: flex;
+  flex-direction: column;
+  -ms-overflow-style: none;
+  overflow-x: scroll;
+  overflow-y: hidden;
+  position: relative; /* This is to keep screen reader text in the destinated area. */
+  touch-action: manipulation;
+  -webkit-overflow-scrolling: touch;
+
+  /* Browser quirks: Firefox has no way to hide scrollbar and while keeping it in function */
+  /* https://developer.mozilla.org/en-US/docs/Web/CSS/overflow */
+  @supports (-moz-appearance: none) {
+    margin-block-end: -17px;
+  }
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  .carousel-filmstrip__bubble {
+    max-width: var(--webchat__max-width--message-bubble);
+    min-width: var(--webchat__min-width--message-bubble);
+    transition-duration: var(--webchat__transition-duration);
+    transition-property: max-width;
+  }
+
+  &.carousel-filmstrip--hide-nub,
+  &.carousel-filmstrip--show-nub,
+  &.carousel-filmstrip--hide-avatar,
+  &.carousel-filmstrip--show-avatar {
+    .carousel-filmstrip__bubble {
+      max-width: calc(var(--webchat__max-width--message-bubble) + var(--webchat__padding--regular));
+    }
+  }
+
+  .carousel-filmstrip__alignment-pad {
+    flex-shrink: 0;
+    transition-duration: var(--webchat__transition-duration);
+    transition-property: width;
+    width: var(--webchat__padding--regular);
+  }
+
+  &.carousel-filmstrip--extra-trailing .carousel-filmstrip__alignment-pad {
+    width: calc(var(--webchat__padding--regular) * 2);
+  }
+
+  &:not(.carousel-filmstrip--no-message) .carousel-filmstrip__attachments {
+    margin-block-start: var(--webchat__padding--regular);
+  }
+
+  .carousel-filmstrip__attachments {
+    display: flex;
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  .carousel-filmstrip__avatar {
+    flex-shrink: 0;
+  }
+
+  .carousel-filmstrip__avatar-gutter {
+    align-items: flex-end;
+    display: flex;
+    flex-direction: column;
+    flex-shrink: 0;
+    transition-duration: var(--webchat__transition-duration);
+    transition-property: width;
+  }
+
+  &.carousel-filmstrip--hide-avatar,
+  &.carousel-filmstrip--show-avatar {
+    .carousel-filmstrip__avatar-gutter {
+      width: var(--webchat__size--avatar);
+    }
+  }
+
+  &:not(.carousel-filmstrip--top-callout) .carousel-filmstrip__avatar-gutter {
+    justify-content: flex-end;
+  }
+
+  .carousel-filmstrip__complimentary {
+    display: flex;
+  }
+
+  .carousel-filmstrip__complimentary-content {
+    display: flex;
+    flex-grow: 1;
+    flex-direction: column;
+  }
+
+  .carousel-filmstrip__content {
+    display: flex;
+    flex-grow: 1;
+    flex-direction: column;
+  }
+
+  .carousel-filmstrip__filler {
+    flex-grow: 10000;
+    flex-shrink: 1;
+  }
+
+  .carousel-filmstrip__main {
+    display: flex;
+  }
+
+  .carousel-filmstrip__message {
+    display: flex;
+  }
+
+  .carousel-filmstrip__nub-pad {
+    flex-shrink: 0;
+    transition-duration: var(--webchat__transition-duration);
+    transition-property: width;
+    width: 0;
+  }
+
+  &.carousel-filmstrip--hide-avatar,
+  &.carousel-filmstrip--show-avatar,
+  &.carousel-filmstrip--hide-nub,
+  &.carousel-filmstrip--show-nub {
+    .carousel-filmstrip__nub-pad {
+      width: var(--webchat__padding--regular);
+    }
+  }
+
+  .carousel-filmstrip__status {
+    display: flex;
+  }
+
+  .carousel-filmstrip__avatar-gutter {
+    margin-inline-start: var(--webchat__padding--regular);
+  }
+
+  &.carousel-filmstrip .carousel-filmstrip__attachments {
+    margin-inline-start: calc(-1 * var(--webchat__padding--regular));
+  }
+
+  &.carousel-filmstrip--hide-avatar,
+  &.carousel-filmstrip--show-avatar {
+    .carousel-filmstrip__attachments {
+      margin-inline-start: calc(-1 * (var(--webchat__size--avatar) + var(--webchat__padding--regular) * 2));
+    }
+  }
+
+  &.carousel-filmstrip--hide-nub,
+  &.carousel-filmstrip--show-nub {
+    &:not(.carousel-filmstrip--hide-avatar.carousel-filmstrip--show-avatar) {
+      .carousel-filmstrip__attachments {
+        margin-inline-start: calc(-1 * var(--webchat__padding--regular) * 2);
+      }
+    }
+  }
+}

package/src/Activity/CarouselFilmStripAttachment.js

@@ -1,13 +1,15 @@
 import { hooks } from 'botframework-webchat-api';
-import classNames from 'classnames';
+import { useStyles } from '@msinternal/botframework-webchat-styles/react';
+import cx 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;
+import styles from './CarouselFilmStripAttachment.module.css';
+
+const { useLocalizer } = hooks;
 
 const CarouselFilmStripAttachment = ({
   activity,
@@ -21,27 +23,24 @@ const CarouselFilmStripAttachment = ({
   showAvatar,
   showNub
 }) => {
-  const [direction] = useDirection();
   const localize = useLocalizer();
-  const [{ carouselFilmStripAttachment: carouselFilmStripAttachmentStyleSet }] = useStyleSet();
+  const classNames = useStyles(styles);
 
   const attachedAlt = localize(fromUser ? 'ACTIVITY_YOU_ATTACHED_ALT' : 'ACTIVITY_BOT_ATTACHED_ALT');
 
   return (
     <li
       aria-roledescription="attachment"
-      className={classNames(
-        'webchat__carousel-filmstrip-attachment',
+      className={cx(
+        classNames['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
+          [classNames['carousel-filmstrip-attachment--hide-avatar']]: hasAvatar && !showAvatar,
+          [classNames['carousel-filmstrip-attachment--hide-nub']]: hideNub,
+          [classNames['carousel-filmstrip-attachment--show-avatar']]: showAvatar,
+          [classNames['carousel-filmstrip-attachment--show-nub']]: showNub
         },
         'react-film__filmstrip__item',
-        carouselFilmStripAttachmentStyleSet + '',
-        (className || '') + ''
+        className
       )}
       role="listitem"
       tabIndex={0}
@@ -49,7 +48,7 @@ const CarouselFilmStripAttachment = ({
       <ScreenReaderText text={attachedAlt} />
       <Bubble fromUser={fromUser} key={index} nub={false}>
         {renderAttachment({ activity, attachment })}
-        <div className="webchat__carousel-filmstrip-attachment--focus" />
+        <div className={classNames['carousel-filmstrip-attachment--focus']} />
       </Bubble>
     </li>
   );

package/src/Activity/CarouselFilmStripAttachment.module.css

@@ -0,0 +1,38 @@
+:global(.webchat) .carousel-filmstrip-attachment {
+  max-width: var(--webchat__max-width--attachment-bubble);
+  min-width: var(--webchat__min-width--attachment-bubble);
+  padding-inline-start: var(--webchat__padding--regular);
+  transition-duration: var(--webchat__transition-duration);
+  transition-property: max-width, min-width;
+
+  &:focus {
+    outline: 0;
+  }
+
+  &:focus .carousel-filmstrip-attachment--focus {
+    border-color: var(--webchat__color--transcript-visual-keyboard-indicator);
+    border-style: var(--webchat__border-style--transcript-visual-keyboard-indicator);
+    border-width: var(--webchat__border-width--transcript-visual-keyboard-indicator);
+    box-sizing: border-box;
+    height: calc(100% - var(--webchat__border-width--transcript-visual-keyboard-indicator));
+    inset-block-start: 0;
+    inset-inline-start: 0;
+    pointer-events: none;
+    position: absolute;
+    width: calc(100% - var(--webchat__border-width--transcript-visual-keyboard-indicator));
+  }
+
+  &.carousel-filmstrip-attachment--hide-avatar,
+  &.carousel-filmstrip-attachment--show-avatar {
+    &:first-child {
+      padding-inline-start: calc(var(--webchat__size--avatar) + var(--webchat__padding--regular) * 2);
+    }
+  }
+
+  &.carousel-filmstrip-attachment--hide-nub,
+  &.carousel-filmstrip-attachment--show-nub {
+    &:not(.carousel-filmstrip-attachment--hide-avatar.carousel-filmstrip-attachment--show-avatar):first-child {
+      padding-inline-start: calc(var(--webchat__padding--regular) * 2);
+    }
+  }
+}