botframework-webchat-fluent-theme 4.17.1 → 4.18.1-hotfix.20260127.b53acdf

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

@@ -15,8 +15,6 @@ 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);
@@ -31,9 +29,7 @@ const Button = memo(
         ref={ref}
         type="button"
       >
-        <span className={classNames['telephone-keypad__button__text']}>
-          {button === 'star' ? '\u2217' : button === 'pound' ? '#' : button}
-        </span>
+        <span className={classNames['telephone-keypad__button__text']}>{button === '*' ? '\u2217' : button}</span>
         {!!ruby && <ruby className={classNames['telephone-keypad__button__ruby']}>{ruby}</ruby>}
       </button>
     );

package/src/components/telephoneKeypad/private/TelephoneKeypad.module.css

@@ -1,4 +1,3 @@
-
 :global(.webchat-fluent) .telephone-keypad {
   /* Commented out whitelabel styles for now. */
   /* background: getHighContrastDarkThemeColor(highContrastColor: black, darkThemeColor: gray190, string, defaultColor: gray10), */

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?.('star'), [onButtonClickRef]);
-  const handleButtonPoundClick = useCallback(() => onButtonClickRef.current?.('pound'), [onButtonClickRef]);
+  const handleButtonStarClick = useCallback(() => onButtonClickRef.current?.('*'), [onButtonClickRef]);
+  const handleButtonPoundClick = useCallback(() => onButtonClickRef.current?.('#'), [onButtonClickRef]);
   const handleKeyDown = useCallback<KeyboardEventHandler<HTMLDivElement>>(
     event => {
       if (event.key === 'Escape') {
@@ -123,13 +123,9 @@ const TelephoneKeypad = memo(({ autoFocus, className, onButtonClick, isHorizonta
           onClick={handleButton9Click}
           ruby="WXYZ"
         />
-        <Button button="star" data-testid={testIds.sendBoxTelephoneKeypadButtonStar} onClick={handleButtonStarClick} />
+        <Button button="*" data-testid={testIds.sendBoxTelephoneKeypadButtonStar} onClick={handleButtonStarClick} />
         <Button button="0" data-testid={testIds.sendBoxTelephoneKeypadButton0} onClick={handleButton0Click} ruby="+" />
-        <Button
-          button="pound"
-          data-testid={testIds.sendBoxTelephoneKeypadButtonPound}
-          onClick={handleButtonPoundClick}
-        />
+        <Button button="#" 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' | 'star' | 'pound';
+export type DTMF = '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '0' | '*' | '#';