botframework-webchat-fluent-theme 4.17.0-main.20240416.e3f5401 → 4.17.0-main.20240423.d9e4f4d

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

@@ -1,47 +1,22 @@
 import React, { KeyboardEventHandler, memo, useCallback, useEffect, useRef, type ReactNode } from 'react';
+import cx from 'classnames';
 import { useRefFrom } from 'use-ref-from';
+import { Components } from 'botframework-webchat-component';
 
-import { useStyles } from '../../../styles';
 import Button from './Button';
 // import HorizontalDialPadController from './HorizontalDialPadController';
 import testIds from '../../../testIds';
 import { type DTMF } from '../types';
 import useShown from '../useShown';
+import styles from './TelephoneKeypad.module.css';
+import { useStyles } from '../../../styles';
+import InfoSmallIcon from '../../../icons/InfoSmallIcon';
 
-const styles = {
-  'webchat__telephone-keypad': {
-    /* Commented out whitelabel styles for now. */
-    // background: getHighContrastDarkThemeColor(highContrastColor: black, darkThemeColor: gray190, string, defaultColor: gray10),
-    // borderRadius: '8px 8px 0px 0px',
-    // boxShadow: '-3px 0px 7px 0px rgba(0, 0, 0, 0.13), -0.6px 0px 1.8px 0px rgba(0, 0, 0, 0.10)',
-
-    alignItems: 'center',
-    background: 'var(--webchat-colorNeutralBackground1)',
-    // border: isHighContrastTheme() ? `1px solid ${white}` : 'none',
-    border: 'none',
-    borderRadius: 'var(--webchat-borderRadiusXLarge)',
-    // boxShadow: 'var(--shadow16)',
-    display: 'flex',
-    flexDirection: 'column',
-    fontFamily: 'var(--webchat-fontFamilyBase)',
-    justifyContent: 'center'
-    // margin: 'var(--spacingHorizontalMNudge)'
-  },
-
-  'webchat__telephone-keypad__box': {
-    boxSizing: 'border-box',
-    display: 'grid',
-    gap: '16px',
-    gridTemplateColumns: 'repeat(3, 1fr)',
-    gridTemplateRows: 'repeat(4, 1fr)',
-    justifyItems: 'center',
-    padding: '16px',
-    width: '100%'
-  }
-};
+const { LocalizedString } = Components;
 
 type Props = Readonly<{
   autoFocus?: boolean | undefined;
+  className?: string | undefined;
   isHorizontal: boolean;
   onButtonClick: (button: DTMF) => void;
 }>;
@@ -54,14 +29,14 @@ const Orientation = memo(
       // <HorizontalDialPadController>{children}</HorizontalDialPadController>
       false
     ) : (
-      <div className={classNames['webchat__telephone-keypad__box']}>{children}</div>
+      <div className={classNames['telephone-keypad__box']}>{children}</div>
     );
   }
 );
 
 Orientation.displayName = 'TelephoneKeypad:Orientation';
 
-const TelephoneKeypad = memo(({ autoFocus, onButtonClick, isHorizontal }: Props) => {
+const TelephoneKeypad = memo(({ autoFocus, className, onButtonClick, isHorizontal }: Props) => {
   const autoFocusRef = useRefFrom(autoFocus);
   const classNames = useStyles(styles);
   const firstButtonRef = useRef<HTMLButtonElement>(null);
@@ -95,7 +70,7 @@ const TelephoneKeypad = memo(({ autoFocus, onButtonClick, isHorizontal }: Props)
   }, [autoFocusRef, firstButtonRef]);
 
   return (
-    <div className={classNames['webchat__telephone-keypad']} onKeyDown={handleKeyDown}>
+    <div className={cx(classNames['telephone-keypad'], className)} onKeyDown={handleKeyDown}>
       <Orientation isHorizontal={isHorizontal}>
         <Button
           button="1"
@@ -159,6 +134,13 @@ const TelephoneKeypad = memo(({ autoFocus, onButtonClick, isHorizontal }: Props)
           onClick={handleButtonPoundClick}
         />
       </Orientation>
+      <div className={classNames['telephone-keypad__info-message']}>
+        <InfoSmallIcon />
+        <LocalizedString
+          linkClassName={classNames['telephone-keypad__info-message-link']}
+          stringIds="TELEPHONE_KEYPAD_INPUT_MESSAGE"
+        />
+      </div>
     </div>
   );
 });

package/src/env.d.ts

@@ -0,0 +1,7 @@
+// CSS modules
+type CSSModuleClasses = { readonly [key: string]: any };
+
+declare module '*.module.css' {
+  const classes: CSSModuleClasses;
+  export default classes;
+}

package/src/icons/AddDocumentIcon.tsx

@@ -5,7 +5,6 @@ export function AddDocumentIcon(props: Readonly<{ readonly className?: string }>
     <svg
       aria-hidden="true"
       className={props.className}
-      fill="currentColor"
       height="1em"
       viewBox="0 0 20 20"
       width="1em"

package/src/icons/AttachmentIcon.tsx

@@ -5,7 +5,6 @@ export function AttachmentIcon(props: Readonly<{ readonly className?: string }>)
     <svg
       aria-hidden="true"
       className={props.className}
-      fill="currentColor"
       height="1em"
       viewBox="0 0 20 20"
       width="1em"

package/src/icons/InfoSmallIcon.tsx

@@ -0,0 +1,17 @@
+import React, { memo } from 'react';
+
+export default memo((props: Readonly<{ readonly className?: string }>) => (
+  <svg
+    aria-hidden="true"
+    className={props.className}
+    height="1em"
+    viewBox="0 0 16 16"
+    width="1em"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M8.5 7.5a.5.5 0 1 0-1 0v3a.5.5 0 0 0 1 0v-3Zm.25-2a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1ZM2 8a6 6 0 1 1 12 0A6 6 0 0 1 2 8Z"
+      fill="currentColor"
+    />
+  </svg>
+));

package/src/icons/SendIcon.tsx

@@ -5,7 +5,6 @@ export function SendIcon(props: Readonly<{ readonly className?: string }>) {
     <svg
       aria-hidden="true"
       className={props.className}
-      fill="currentColor"
       height="1em"
       viewBox="0 0 20 20"
       width="1em"

package/src/icons/TelephoneKeypad.tsx

@@ -5,7 +5,6 @@ export function TelephoneKeypadIcon(props: Readonly<{ readonly className?: strin
     <svg
       aria-hidden="true"
       className={props.className}
-      fill="currentColor"
       height="1em"
       viewBox="0 0 20 20"
       width="1em"

package/src/index.ts

@@ -2,9 +2,12 @@ import { injectMetaTag } from 'inject-meta-tag';
 
 import FluentThemeProvider from './private/FluentThemeProvider';
 import testIds from './testIds';
+import { injectStyle } from './styles';
 
 declare const NPM_PACKAGE_VERSION: string;
 
 injectMetaTag('botframework-webchat-fluent-theme:version', NPM_PACKAGE_VERSION);
 
+injectStyle();
+
 export { FluentThemeProvider, testIds };

package/src/styles/injectStyle.ts

@@ -0,0 +1,9 @@
+export const injectedStyles = '@--INJECTED-STYLES-CONTENT--@';
+
+export default function injectStyles() {
+  if (globalThis.document) {
+    const style = document.createElement('style');
+    style.append(document.createTextNode(injectedStyles));
+    document.head.appendChild(style);
+  }
+}

package/src/styles/useStyles.ts

@@ -0,0 +1,19 @@
+import { useMemo } from 'react';
+
+function useStyles<T extends CSSModuleClasses>(styles: T): T {
+  // @ts-expect-error: entries/fromEntries don't allow to specify keys type
+  return useMemo(
+    () =>
+      Object.freeze(
+        Object.fromEntries(
+          Object.entries(styles).map(([baseClassName, resultClassName]) => [
+            baseClassName,
+            `${baseClassName} ${resultClassName}`
+          ])
+        )
+      ),
+    [styles]
+  );
+}
+
+export default useStyles;

package/src/styles.ts

@@ -0,0 +1,4 @@
+import injectStyle from './styles/injectStyle';
+import useStyles from './styles/useStyles';
+
+export { injectStyle, useStyles };

package/src/tsconfig.json

@@ -5,7 +5,8 @@
     "jsx": "react",
     "moduleResolution": "Bundler",
     "skipLibCheck": true,
-    "target": "ESNext"
+    "target": "ESNext",
+    "plugins": [{ "name": "typescript-plugin-css-modules" }]
   },
   "extends": "@tsconfig/strictest/tsconfig.json"
 }

package/src/private/useStyleToEmotionObject.ts

@@ -1,32 +0,0 @@
-import createEmotion, { type Emotion } from '@emotion/css/create-instance';
-// TODO: [P0] Use `math-random`. Today, it requires "crypto" today, maybe missing "conditions" or what.
-// import random from 'math-random';
-import { useMemo } from 'react';
-
-const { random } = Math;
-
-const emotionPool: Record<string, Emotion> = {};
-const nonce = '';
-
-/* eslint no-magic-numbers: ["error", { "ignore": [0, 2, 5, 26, 65] }] */
-
-function createCSSKey() {
-  return random()
-    .toString(26)
-    .substr(2, 5)
-    .replace(/\d/gu, (value: string) => String.fromCharCode(value.charCodeAt(0) + 65));
-}
-
-export default function useStyleToEmotionObject() {
-  return useMemo(() => {
-    // Emotion doesn't hash with nonce. We need to provide the pooling mechanism.
-    // 1. If 2 instances use different nonce, they should result in different hash;
-    // 2. If 2 instances are being mounted, pooling will make sure we render only 1 set of <style> tags, instead of 2.
-    const emotion =
-      // Prefix "id-" to prevent object injection attack.
-      emotionPool[`id-${nonce}`] ||
-      (emotionPool[`id-${nonce}`] = createEmotion({ key: `webchat--css-${createCSSKey()}`, nonce }));
-
-    return (style: TemplateStringsArray) => emotion.css(style);
-  }, []);
-}

package/src/styles/index.ts

@@ -1,15 +0,0 @@
-import { useMemo } from 'react';
-
-import useStyleToEmotionObject from '../private/useStyleToEmotionObject';
-
-export function useStyles<T extends Record<`webchat-fluent__${string}`, any>>(styles: T): Record<keyof T, string> {
-  const getClassName = useStyleToEmotionObject();
-  // @ts-expect-error: entries/fromEntries don't allow to specify keys type
-  return useMemo(
-    () =>
-      Object.freeze(
-        Object.fromEntries(Object.entries(styles).map(([cls, style]) => [cls, `${cls} ${getClassName(style)}`]))
-      ),
-    [styles, getClassName]
-  );
-}