botframework-webchat-fluent-theme 4.17.1-main.20240625.336dd7c → 4.17.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "botframework-webchat-fluent-theme",
-  "version": "4.17.1-main.20240625.336dd7c",
+  "version": "4.17.1",
   "description": "Fluent theme for Bot Framework Web Chat",
   "main": "./dist/botframework-webchat-fluent-theme.js",
   "types": "./dist/botframework-webchat-fluent-theme.d.ts",
@@ -63,19 +63,19 @@
   "devDependencies": {
     "@tsconfig/strictest": "^2.0.5",
     "@types/math-random": "^1.0.2",
-    "@types/node": "^20.12.11",
+    "@types/node": "^20.10.3",
     "@types/react": "^16.14.60",
     "tsup": "^8.0.2",
-    "typescript": "^5.4.5"
+    "typescript": "^5.3.2"
   },
   "dependencies": {
-    "botframework-webchat-api": "4.17.1-main.20240625.336dd7c",
-    "botframework-webchat-component": "4.17.1-main.20240625.336dd7c",
-    "botframework-webchat-core": "4.17.1-main.20240625.336dd7c",
-    "classnames": "2.5.1",
-    "inject-meta-tag": "0.0.1",
-    "math-random": "2.0.1",
-    "use-ref-from": "0.1.0"
+    "botframework-webchat-api": "4.17.1",
+    "botframework-webchat-component": "4.17.1",
+    "botframework-webchat-core": "4.17.1",
+    "classnames": "^2.5.1",
+    "inject-meta-tag": "^0.0.1",
+    "math-random": "^2.0.1",
+    "use-ref-from": "^0.1.0"
   },
   "peerDependencies": {
     "react": ">= 16.8.6"

package/src/components/sendBox/SendBox.module.css

@@ -79,13 +79,6 @@
   outline: none;
   padding: 4px 4px 0;
   resize: none;
-
-  /* Prevent zoom on focus on iOS */
-  @media only screen and (hover: none) and (pointer: coarse) {
-    &:focus-within {
-      font-size: 16px;
-    }
-  }
 }
 
 :global(.webchat-fluent) .sendbox__sendbox-controls {

package/src/components/sendBox/SendBox.tsx

@@ -17,7 +17,6 @@ import useSubmitError from './private/useSubmitError';
 import useUniqueId from './private/useUniqueId';
 import styles from './SendBox.module.css';
 import { useStyles } from '../../styles';
-import useTranscriptNavigation from './private/useTranscriptNavigation';
 
 const {
   useFocus,
@@ -143,12 +142,10 @@ function SendBox(
 
   const handleTelephoneKeypadButtonClick = useCallback(
     // TODO: We need more official way of sending DTMF.
-    (dtmf: DTMF) => sendMessage(`/DTMFKey ${dtmf}`),
+    (dtmf: DTMF) => sendMessage(`/DTMF ${dtmf}`),
     [sendMessage]
   );
 
-  const handleTranscriptNavigation = useTranscriptNavigation();
-
   const aria = {
     'aria-invalid': 'false' as const,
     ...(errorMessage && {
@@ -160,11 +157,7 @@ function SendBox(
   return (
     <form {...aria} className={cx(classNames['sendbox'], props.className)} onSubmit={handleFormSubmit}>
       <SuggestedActions />
-      <div
-        className={cx(classNames['sendbox__sendbox'])}
-        onClickCapture={handleSendBoxClick}
-        onKeyDown={handleTranscriptNavigation}
-      >
+      <div className={cx(classNames['sendbox__sendbox'])} onClickCapture={handleSendBoxClick}>
         <TextArea
           aria-label={isMessageLengthExceeded ? localize('TEXT_INPUT_LENGTH_EXCEEDED_ALT') : localize('TEXT_INPUT_ALT')}
           className={cx(classNames['sendbox__sendbox-text'], classNames['sendbox__text-area--in-grid'])}

package/src/components/telephoneKeypad/private/Button.tsx

@@ -15,6 +15,8 @@ type Props = Readonly<{
 }>;
 
 const Button = memo(
+  // As we are all TypeScript, internal components do not need propTypes.
+  // eslint-disable-next-line react/prop-types
   forwardRef(({ button, 'data-testid': dataTestId, onClick, ruby }: Props, ref: Ref<HTMLButtonElement>) => {
     const classNames = useStyles(styles);
     const onClickRef = useRefFrom(onClick);
@@ -29,7 +31,9 @@ const Button = memo(
         ref={ref}
         type="button"
       >
-        <span className={classNames['telephone-keypad__button__text']}>{button === '*' ? '\u2217' : button}</span>
+        <span className={classNames['telephone-keypad__button__text']}>
+          {button === 'star' ? '\u2217' : button === 'pound' ? '#' : button}
+        </span>
         {!!ruby && <ruby className={classNames['telephone-keypad__button__ruby']}>{ruby}</ruby>}
       </button>
     );

package/src/components/telephoneKeypad/private/TelephoneKeypad.tsx

@@ -50,8 +50,8 @@ const TelephoneKeypad = memo(({ autoFocus, className, onButtonClick, isHorizonta
   const handleButton8Click = useCallback(() => onButtonClickRef.current?.('8'), [onButtonClickRef]);
   const handleButton9Click = useCallback(() => onButtonClickRef.current?.('9'), [onButtonClickRef]);
   const handleButton0Click = useCallback(() => onButtonClickRef.current?.('0'), [onButtonClickRef]);
-  const handleButtonStarClick = useCallback(() => onButtonClickRef.current?.('*'), [onButtonClickRef]);
-  const handleButtonPoundClick = useCallback(() => onButtonClickRef.current?.('#'), [onButtonClickRef]);
+  const handleButtonStarClick = useCallback(() => onButtonClickRef.current?.('star'), [onButtonClickRef]);
+  const handleButtonPoundClick = useCallback(() => onButtonClickRef.current?.('pound'), [onButtonClickRef]);
   const handleKeyDown = useCallback<KeyboardEventHandler<HTMLDivElement>>(
     event => {
       if (event.key === 'Escape') {
@@ -123,9 +123,13 @@ const TelephoneKeypad = memo(({ autoFocus, className, onButtonClick, isHorizonta
           onClick={handleButton9Click}
           ruby="WXYZ"
         />
-        <Button button="*" data-testid={testIds.sendBoxTelephoneKeypadButtonStar} onClick={handleButtonStarClick} />
+        <Button button="star" data-testid={testIds.sendBoxTelephoneKeypadButtonStar} onClick={handleButtonStarClick} />
         <Button button="0" data-testid={testIds.sendBoxTelephoneKeypadButton0} onClick={handleButton0Click} ruby="+" />
-        <Button button="#" data-testid={testIds.sendBoxTelephoneKeypadButtonPound} onClick={handleButtonPoundClick} />
+        <Button
+          button="pound"
+          data-testid={testIds.sendBoxTelephoneKeypadButtonPound}
+          onClick={handleButtonPoundClick}
+        />
       </Orientation>
       <div className={classNames['telephone-keypad__info-message']}>
         <InfoSmallIcon />

package/src/components/telephoneKeypad/types.ts

@@ -1 +1 @@
-export type DTMF = '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '0' | '*' | '#';
+export type DTMF = '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '0' | 'star' | 'pound';

package/src/types/PropsOf.ts

@@ -1,4 +1,7 @@
 import { type ComponentType, type MemoExoticComponent } from 'react';
 
-export type PropsOf<T> =
-  T extends ComponentType<infer P> ? P : T extends MemoExoticComponent<ComponentType<infer P>> ? P : never;
+export type PropsOf<T> = T extends ComponentType<infer P>
+  ? P
+  : T extends MemoExoticComponent<ComponentType<infer P>>
+    ? P
+    : never;

package/src/components/decorator/Decorator.module.css

@@ -1,3 +0,0 @@
-:global(.webchat-fluent-decorator).decorator {
-  display: contents;
-}

package/src/components/decorator/Decorator.tsx

@@ -1,27 +0,0 @@
-import { DecoratorComposer, type DecoratorMiddleware } from 'botframework-webchat-api/decorator';
-import cx from 'classnames';
-import React, { memo, type ReactNode } from 'react';
-
-import { useStyles } from '../../styles';
-import styles from './Decorator.module.css';
-import Flair from './Flair';
-import Loader from './Loader';
-
-export const rootClassName = 'webchat-fluent-decorator';
-
-const middleware: DecoratorMiddleware[] = [
-  init => init === 'activity border' && (next => request => (request.state === 'completion' ? Flair : next(request))),
-  init => init === 'activity border' && (next => request => (request.state === 'informative' ? Loader : next(request)))
-];
-
-function WebChatDecorator(props: Readonly<{ readonly children?: ReactNode | undefined }>) {
-  const classNames = useStyles(styles);
-
-  return (
-    <div className={cx(rootClassName, classNames['decorator'])}>
-      <DecoratorComposer middleware={middleware}>{props.children}</DecoratorComposer>
-    </div>
-  );
-}
-
-export default memo(WebChatDecorator);

package/src/components/decorator/Flair.module.css

@@ -1,4 +0,0 @@
-:global(.webchat-fluent-decorator) .flair {
-  border-radius: inherit;
-  border: solid 2px red;
-}

package/src/components/decorator/Flair.tsx

@@ -1,12 +0,0 @@
-import React, { memo, type ReactNode } from 'react';
-
-import { useStyles } from '../../styles';
-import styles from './Flair.module.css';
-
-function Flair({ children }: Readonly<{ children?: ReactNode | undefined }>) {
-  const classNames = useStyles(styles);
-
-  return <div className={classNames['flair']}>{children}</div>;
-}
-
-export default memo(Flair);

package/src/components/decorator/Loader.module.css

@@ -1,3 +0,0 @@
-:global(.webchat-fluent-decorator) .loader {
-  border-bottom: solid 4px blue;
-}

package/src/components/decorator/Loader.tsx

@@ -1,17 +0,0 @@
-import React, { memo, type ReactNode } from 'react';
-
-import { useStyles } from '../../styles';
-import styles from './Loader.module.css';
-
-function Loader({ children }: Readonly<{ children?: ReactNode | undefined }>) {
-  const classNames = useStyles(styles);
-
-  return (
-    <React.Fragment>
-      {children}
-      <div className={classNames['loader']} />
-    </React.Fragment>
-  );
-}
-
-export default memo(Loader);

package/src/components/decorator/index.ts

@@ -1 +0,0 @@
-export { default as WebChatDecorator } from './Decorator';

package/src/components/sendBox/private/useTranscriptNavigation.ts

@@ -1,53 +0,0 @@
-import { useCallback, type KeyboardEvent } from 'react';
-import { hooks } from 'botframework-webchat-component';
-
-const { useScrollDown, useScrollUp } = hooks;
-
-export default function useTranscriptNavigation() {
-  const scrollDown = useScrollDown();
-  const scrollUp = useScrollUp();
-
-  return useCallback(
-    (event: KeyboardEvent<unknown>) => {
-      if (event.target instanceof HTMLTextAreaElement && event.target.value) {
-        return;
-      }
-
-      const { ctrlKey, metaKey, shiftKey } = event;
-
-      if (ctrlKey || metaKey || shiftKey) {
-        return;
-      }
-
-      let handled = true;
-
-      switch (event.key) {
-        case 'End':
-          scrollDown({ displacement: Infinity });
-          break;
-
-        case 'Home':
-          scrollUp({ displacement: Infinity });
-          break;
-
-        case 'PageDown':
-          scrollDown();
-          break;
-
-        case 'PageUp':
-          scrollUp();
-          break;
-
-        default:
-          handled = false;
-          break;
-      }
-
-      if (handled) {
-        event.preventDefault();
-        event.stopPropagation();
-      }
-    },
-    [scrollDown, scrollUp]
-  );
-}

package/src/external.umd/botframework-webchat-api/decorator.ts

@@ -1 +0,0 @@
-module.exports = (globalThis as any).WebChat.decorator;