botframework-webchat-fluent-theme 4.17.0-main.20240425.edca85d → 4.17.0-main.20240502.a8ff179

package/package.json

@@ -1,21 +1,21 @@
 {
   "name": "botframework-webchat-fluent-theme",
-  "version": "4.17.0-main.20240425.edca85d",
+  "version": "4.17.0-main.20240502.a8ff179",
   "description": "Fluent theme for Bot Framework Web Chat",
-  "main": "./dist/index.js",
-  "types": "./dist/index.d.ts",
+  "main": "./dist/botframework-webchat-fluent-theme.js",
+  "types": "./dist/botframework-webchat-fluent-theme.d.ts",
   "publishConfig": {
     "access": "public"
   },
   "exports": {
     ".": {
       "import": {
-        "default": "./dist/index.mjs",
-        "types": "./dist/index.d.mts"
+        "types": "./dist/botframework-webchat-fluent-theme.d.mts",
+        "default": "./dist/botframework-webchat-fluent-theme.mjs"
       },
       "required": {
-        "default": "./dist/index.js",
-        "types": "./dist/index.d.ts"
+        "types": "./dist/botframework-webchat-fluent-theme.d.ts",
+        "default": "./dist/botframework-webchat-fluent-theme.js"
       }
     }
   },
@@ -54,19 +54,24 @@
     "precommit:typecheck": "tsc --project ./src --emitDeclarationOnly false --esModuleInterop true --noEmit --pretty false",
     "start": "npm run build -- --watch"
   },
-  "pinDependencies": {},
+  "pinDependencies": {
+    "@types/react": [
+      "16",
+      "react@16.8.6 is our baseline"
+    ]
+  },
   "devDependencies": {
     "@tsconfig/strictest": "^2.0.5",
     "@types/math-random": "^1.0.2",
     "@types/node": "^20.10.3",
-    "@types/react": "^18.2.74",
+    "@types/react": "^16.14.60",
     "tsup": "^8.0.2",
     "typescript": "^5.3.2"
   },
   "dependencies": {
-    "botframework-webchat-api": "4.17.0-main.20240425.edca85d",
-    "botframework-webchat-component": "4.17.0-main.20240425.edca85d",
-    "botframework-webchat-core": "4.17.0-main.20240425.edca85d",
+    "botframework-webchat-api": "4.17.0-main.20240502.a8ff179",
+    "botframework-webchat-component": "4.17.0-main.20240502.a8ff179",
+    "botframework-webchat-core": "4.17.0-main.20240502.a8ff179",
     "classnames": "^2.5.1",
     "inject-meta-tag": "^0.0.1",
     "math-random": "^2.0.1",

package/src/components/dropZone/{index.tsx → DropZone.tsx}

@@ -3,9 +3,9 @@ import cx from 'classnames';
 import React, { memo, useCallback, useEffect, useRef, useState, type DragEventHandler } from 'react';
 import { useRefFrom } from 'use-ref-from';
 
-import { AddDocumentIcon } from '../../icons/AddDocumentIcon';
+import { AddDocumentIcon } from '../../icons';
 import testIds from '../../testIds';
-import styles from './index.module.css';
+import styles from './DropZone.module.css';
 import { useStyles } from '../../styles';
 
 const { useLocalizer } = hooks;

package/src/components/dropZone/index.ts

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

package/src/components/{sendbox → sendBox}/AddAttachmentButton.tsx

@@ -1,7 +1,7 @@
 import { hooks } from 'botframework-webchat-component';
 import React, { useCallback, useRef, type ChangeEventHandler, memo } from 'react';
 import { useRefFrom } from 'use-ref-from';
-import { AttachmentIcon } from '../../icons/AttachmentIcon';
+import { AttachmentIcon } from '../../icons';
 import testIds from '../../testIds';
 import { ToolbarButton } from './Toolbar';
 import styles from './AddAttachmentButton.module.css';

package/src/components/{sendbox/index.tsx → sendBox/SendBox.tsx}

@@ -1,12 +1,12 @@
-import { hooks } from 'botframework-webchat-component';
+import { hooks, type SendBoxFocusOptions } from 'botframework-webchat-component';
 import cx from 'classnames';
 import React, { memo, useCallback, useRef, useState, type FormEventHandler, type MouseEventHandler } from 'react';
 import { useRefFrom } from 'use-ref-from';
-import { SendIcon } from '../../icons/SendIcon';
+import { SendIcon } from '../../icons';
 import testIds from '../../testIds';
-import DropZone from '../DropZone';
-import SuggestedActions from '../SuggestedActions';
-import { TelephoneKeypadSurrogate, useTelephoneKeypadShown, type DTMF } from '../TelephoneKeypad';
+import { DropZone } from '../dropZone';
+import { SuggestedActions } from '../suggestedActions';
+import { TelephoneKeypadSurrogate, useTelephoneKeypadShown, type DTMF } from '../telephoneKeypad';
 import AddAttachmentButton from './AddAttachmentButton';
 import Attachments from './Attachments';
 import ErrorMessage from './ErrorMessage';
@@ -15,10 +15,18 @@ import TextArea from './TextArea';
 import { Toolbar, ToolbarButton, ToolbarSeparator } from './Toolbar';
 import useSubmitError from './private/useSubmitError';
 import useUniqueId from './private/useUniqueId';
-import styles from './index.module.css';
+import styles from './SendBox.module.css';
 import { useStyles } from '../../styles';
 
-const { useStyleOptions, useMakeThumbnail, useLocalizer, useSendBoxAttachments, useSendMessage } = hooks;
+const {
+  useFocus,
+  useLocalizer,
+  useMakeThumbnail,
+  useRegisterFocusSendBox,
+  useSendBoxAttachments,
+  useSendMessage,
+  useStyleOptions
+} = hooks;
 
 function SendBox(
   props: Readonly<{
@@ -38,6 +46,39 @@ function SendBox(
   const errorMessageId = useUniqueId('sendbox__error-message-id');
   const [errorRef, errorMessage] = useSubmitError({ message, attachments });
   const [telephoneKeypadShown] = useTelephoneKeypadShown();
+  const setFocus = useFocus();
+
+  useRegisterFocusSendBox(
+    useCallback(
+      ({ noKeyboard, waitUntil }: SendBoxFocusOptions) => {
+        if (!inputRef.current) {
+          return;
+        }
+        if (noKeyboard) {
+          waitUntil(
+            (async () => {
+              const previousReadOnly = inputRef.current?.getAttribute('readonly');
+              inputRef.current?.setAttribute('readonly', 'true');
+              // TODO: [P2] We should update this logic to handle quickly-successive `focusCallback`.
+              //       If a succeeding `focusCallback` is being called, the `setTimeout` should run immediately.
+              //       Or the second `focusCallback` should not set `readonly` to `true`.
+              // eslint-disable-next-line no-restricted-globals
+              await new Promise(resolve => setTimeout(resolve, 0));
+              inputRef.current?.focus();
+              if (typeof previousReadOnly !== 'string') {
+                inputRef.current?.removeAttribute('readonly');
+              } else {
+                inputRef.current?.setAttribute('readonly', previousReadOnly);
+              }
+            })()
+          );
+        } else {
+          inputRef.current?.focus();
+        }
+      },
+      [inputRef]
+    )
+  );
 
   const attachmentsRef = useRefFrom(attachments);
   const messageRef = useRefFrom(message);
@@ -48,10 +89,9 @@ function SendBox(
         return;
       }
 
-      // TODO: Should call `useFocus('sendBox')`.
-      inputRef.current?.focus();
+      setFocus('sendBox');
     },
-    [inputRef]
+    [setFocus]
   );
 
   const handleMessageChange: React.FormEventHandler<HTMLTextAreaElement> = useCallback(
@@ -95,10 +135,9 @@ function SendBox(
         setAttachments([]);
       }
 
-      // TODO: Should call `useFocus('sendBox')`.
-      inputRef.current?.focus();
+      setFocus('sendBox');
     },
-    [attachmentsRef, messageRef, sendMessage, setAttachments, setMessage, isMessageLengthExceeded, errorRef, inputRef]
+    [attachmentsRef, messageRef, sendMessage, setAttachments, setMessage, isMessageLengthExceeded, errorRef, setFocus]
   );
 
   const handleTelephoneKeypadButtonClick = useCallback(

package/src/components/{sendbox → sendBox}/TelephoneKeypadToolbarButton.tsx

@@ -1,9 +1,9 @@
 import React, { memo, useCallback } from 'react';
 
 import { hooks } from 'botframework-webchat-component';
-import { TelephoneKeypadIcon } from '../../icons/TelephoneKeypad';
+import { TelephoneKeypadIcon } from '../../icons';
 import testIds from '../../testIds';
-import { useTelephoneKeypadShown } from '../TelephoneKeypad';
+import { useTelephoneKeypadShown } from '../telephoneKeypad';
 import { ToolbarButton } from './Toolbar';
 
 const { useLocalizer } = hooks;

package/src/components/sendBox/index.tsx

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

package/src/components/suggestedActions/SuggestedAction.tsx

@@ -1,10 +1,11 @@
 import { hooks } from 'botframework-webchat-component';
 import { type DirectLineCardAction } from 'botframework-webchat-core';
 import cx from 'classnames';
-import React, { MouseEventHandler, memo, useCallback, useRef } from 'react';
+import React, { MouseEventHandler, memo, useCallback } from 'react';
 import styles from './SuggestedAction.module.css';
 import { useStyles } from '../../styles';
 import AccessibleButton from './AccessibleButton';
+import { useRovingFocusItemRef } from './private/rovingFocus';
 
 const { useDisabled, useFocus, usePerformCardAction, useScrollToEnd, useStyleSet, useSuggestedActions } = hooks;
 
@@ -36,6 +37,7 @@ function SuggestedAction({
   displayText,
   image,
   imageAlt,
+  itemIndex,
   text,
   type,
   value
@@ -44,7 +46,7 @@ function SuggestedAction({
   const [{ suggestedAction: suggestedActionStyleSet }] = useStyleSet();
   const [disabled] = useDisabled();
   const focus = useFocus();
-  const focusRef = useRef<HTMLButtonElement>(null);
+  const focusRef = useRovingFocusItemRef<HTMLButtonElement>(itemIndex);
   const performCardAction = usePerformCardAction();
   const classNames = useStyles(styles);
   const scrollToEnd = useScrollToEnd();

package/src/components/suggestedActions/{index.tsx → SuggestedActions.tsx}

@@ -1,12 +1,13 @@
 import { hooks } from 'botframework-webchat-component';
 import cx from 'classnames';
-import React, { memo, type ReactNode } from 'react';
+import React, { memo, useCallback, type ReactNode } from 'react';
 import SuggestedAction from './SuggestedAction';
 import computeSuggestedActionText from './private/computeSuggestedActionText';
-import styles from './index.module.css';
+import styles from './SuggestedActions.module.css';
 import { useStyles } from '../../styles';
+import RovingFocusProvider from './private/rovingFocus';
 
-const { useLocalizer, useStyleOptions, useStyleSet, useSuggestedActions } = hooks;
+const { useFocus, useLocalizer, useStyleOptions, useStyleSet, useSuggestedActions } = hooks;
 
 function SuggestedActionStackedOrFlowContainer(
   props: Readonly<{
@@ -44,6 +45,12 @@ function SuggestedActions() {
   const classNames = useStyles(styles);
   const localize = useLocalizer();
   const [suggestedActions] = useSuggestedActions();
+  const focus = useFocus();
+
+  const handleEscapeKey = useCallback(() => {
+    focus('sendBox');
+  }, [focus]);
+
   const children = suggestedActions.map((cardAction, index) => {
     const { displayText, image, imageAltText, text, type, value } = cardAction as {
       displayText?: string;
@@ -85,13 +92,16 @@ function SuggestedActions() {
       />
     );
   });
+
   return (
-    <SuggestedActionStackedOrFlowContainer
-      aria-label={localize('SUGGESTED_ACTIONS_LABEL_ALT')}
-      className={classNames['suggested-actions']}
-    >
-      {children}
-    </SuggestedActionStackedOrFlowContainer>
+    <RovingFocusProvider onEscapeKey={handleEscapeKey}>
+      <SuggestedActionStackedOrFlowContainer
+        aria-label={localize('SUGGESTED_ACTIONS_LABEL_ALT')}
+        className={classNames['suggested-actions']}
+      >
+        {children}
+      </SuggestedActionStackedOrFlowContainer>
+    </RovingFocusProvider>
   );
 }
 

package/src/components/suggestedActions/index.ts

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

package/src/components/suggestedActions/private/rovingFocus.tsx

@@ -0,0 +1,180 @@
+/* eslint-disable no-magic-numbers */
+import React, {
+  type MutableRefObject,
+  createContext,
+  memo,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef
+} from 'react';
+
+type ItemRef = MutableRefObject<HTMLElement | undefined>;
+
+type RovingFocusContextType = {
+  itemEffector: <T extends HTMLElement>(ref: MutableRefObject<T | null>, index: number) => () => void;
+};
+
+const RovingFocusContext = createContext<RovingFocusContextType>({
+  itemEffector: () => {
+    // This will be implemented when using in <RovingFocusProvider>.
+    throw new Error('botframework-webchat-fluent-theme rovingFocus: no provider for RovingFocusContext.');
+  }
+});
+
+function RovingFocusProvider(
+  props: Readonly<{
+    children?: React.ReactNode | undefined;
+    direction?: 'vertical' | 'horizontal' | undefined;
+    onEscapeKey?: () => void;
+  }>
+) {
+  const activeItemIndexRef = useRef(0);
+  const itemRefsRef = useRef<ItemRef[]>([]);
+
+  const updateItemTabIndex = useCallback(
+    ({ current }: ItemRef, index: number) =>
+      current && (current.tabIndex = activeItemIndexRef.current === index ? 0 : -1),
+    [activeItemIndexRef]
+  );
+
+  const setActiveItemIndex = useCallback(
+    (valueOrFunction: number | ((value: number) => number)) => {
+      // All calls to this function is expected to be under event handlers (post-rendering).
+      let nextActiveItemIndex;
+
+      if (typeof valueOrFunction === 'number') {
+        nextActiveItemIndex = valueOrFunction;
+      } else {
+        nextActiveItemIndex = valueOrFunction(activeItemIndexRef.current);
+      }
+
+      // If the index points to no item, fallback to the first item.
+      // This makes sure at least one of the item in the container is selected.
+      if (nextActiveItemIndex && !itemRefsRef.current.at(nextActiveItemIndex)?.current) {
+        nextActiveItemIndex = 0;
+      }
+
+      if (activeItemIndexRef.current !== nextActiveItemIndex) {
+        activeItemIndexRef.current = nextActiveItemIndex;
+
+        itemRefsRef.current.forEach((ref, index) => updateItemTabIndex(ref, index));
+        itemRefsRef.current.at(nextActiveItemIndex)?.current?.focus();
+      }
+    },
+    [updateItemTabIndex, itemRefsRef, activeItemIndexRef]
+  );
+
+  const handleFocus = useCallback(
+    event => {
+      const { target } = event;
+
+      const index = itemRefsRef.current.findIndex(({ current }) => current === target);
+
+      // prevent focusing the last element, if we didn't found the element focused
+      if (index !== -1) {
+        setActiveItemIndex(index);
+      }
+    },
+    [itemRefsRef, setActiveItemIndex]
+  );
+
+  const handleSetNextActive = useCallback(
+    (key: string) =>
+      (currentIndex: number): number => {
+        const isUnidirectional = !props.direction;
+        const isVerticalMove = /up|down/iu.test(key) && props.direction === 'vertical';
+        const isHorizontalMove = /left|right/iu.test(key) && props.direction === 'horizontal';
+        const isForwardMove = /right|down/iu.test(key);
+        const direction = isUnidirectional || isVerticalMove || isHorizontalMove ? (isForwardMove ? 1 : -1) : 0;
+        // The `itemRefsRef` array could be a sparse array.
+        // Thus, the next item may not be immediately next to the current one.
+        const itemIndices = itemRefsRef.current.map((_, index) => index);
+        const nextIndex = itemIndices.indexOf(currentIndex) + direction;
+
+        return itemIndices.at(nextIndex) ?? 0;
+      },
+    [props.direction]
+  );
+
+  const handleKeyDown = useCallback<(event: KeyboardEvent) => void>(
+    event => {
+      const { key } = event;
+
+      switch (key) {
+        case 'Up':
+        case 'ArrowUp':
+        case 'Left':
+        case 'ArrowLeft':
+        case 'Down':
+        case 'ArrowDown':
+        case 'Right':
+        case 'ArrowRight':
+          setActiveItemIndex(handleSetNextActive(key));
+          break;
+
+        case 'Home':
+          setActiveItemIndex(0);
+          break;
+
+        case 'End':
+          setActiveItemIndex(-1);
+          break;
+
+        case 'Escape':
+          props.onEscapeKey?.();
+          break;
+
+        default:
+          return;
+      }
+
+      event.preventDefault();
+      event.stopPropagation();
+    },
+    [setActiveItemIndex, handleSetNextActive, props]
+  );
+
+  const itemEffector = useCallback(
+    (ref, index) => {
+      const { current } = ref;
+
+      itemRefsRef.current[Number(index)] = ref;
+
+      current.addEventListener('focus', handleFocus);
+      current.addEventListener('keydown', handleKeyDown);
+
+      updateItemTabIndex(ref, index);
+
+      return () => {
+        current.removeEventListener('focus', handleFocus);
+        current.removeEventListener('keydown', handleKeyDown);
+
+        delete itemRefsRef.current[Number(index)];
+      };
+    },
+    [handleFocus, handleKeyDown, updateItemTabIndex, itemRefsRef]
+  );
+
+  const value = useMemo<RovingFocusContextType>(
+    () => ({
+      itemEffector
+    }),
+    [itemEffector]
+  );
+
+  return <RovingFocusContext.Provider value={value}>{props.children}</RovingFocusContext.Provider>;
+}
+
+export function useRovingFocusItemRef<T extends HTMLElement>(itemIndex: number): MutableRefObject<T | null> {
+  const ref = useRef<T>(null);
+
+  const { itemEffector } = useContext(RovingFocusContext);
+
+  useEffect(() => itemEffector(ref, itemIndex));
+
+  return ref;
+}
+
+export default memo(RovingFocusProvider);

package/src/components/telephoneKeypad/Surrogate.tsx

@@ -1,12 +1,12 @@
 import React, { memo } from 'react';
 
-import type { PropsOf } from '../../types/PropsOf';
+import type { PropsOf } from '../../types';
 import TelephoneKeypad from './private/TelephoneKeypad';
 import useShown from './useShown';
 
 type Props = PropsOf<typeof TelephoneKeypad>;
 
-const TelephoneKeypadSurrogate = memo((props: Props) => (useShown()[0] ? <TelephoneKeypad {...props} /> : false));
+const TelephoneKeypadSurrogate = memo((props: Props) => (useShown()[0] ? <TelephoneKeypad {...props} /> : null));
 
 TelephoneKeypadSurrogate.displayName = 'TelephoneKeypad.Surrogate';
 

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

@@ -1,7 +1,7 @@
-import React, { KeyboardEventHandler, memo, useCallback, useEffect, useRef, type ReactNode } from 'react';
+import { Components } from 'botframework-webchat-component';
 import cx from 'classnames';
+import React, { memo, useCallback, useEffect, useRef, type KeyboardEventHandler, type ReactNode } from 'react';
 import { useRefFrom } from 'use-ref-from';
-import { Components } from 'botframework-webchat-component';
 
 import Button from './Button';
 // import HorizontalDialPadController from './HorizontalDialPadController';
@@ -10,7 +10,7 @@ import { type DTMF } from '../types';
 import useShown from '../useShown';
 import styles from './TelephoneKeypad.module.css';
 import { useStyles } from '../../../styles';
-import InfoSmallIcon from '../../../icons/InfoSmallIcon';
+import { InfoSmallIcon } from '../../../icons';
 
 const { LocalizedString } = Components;
 
@@ -25,10 +25,7 @@ const Orientation = memo(
   ({ children, isHorizontal }: Readonly<{ children?: ReactNode | undefined; isHorizontal: boolean }>) => {
     const classNames = useStyles(styles);
 
-    return isHorizontal ? (
-      // <HorizontalDialPadController>{children}</HorizontalDialPadController>
-      false
-    ) : (
+    return isHorizontal ? null : ( // <HorizontalDialPadController>{children}</HorizontalDialPadController>
       <div className={classNames['telephone-keypad__box']}>{children}</div>
     );
   }

package/src/components/{Theme.tsx → theme/Theme.tsx}

@@ -1,7 +1,7 @@
 import React, { type ReactNode } from 'react';
 import cx from 'classnames';
 import styles from './Theme.module.css';
-import { useStyles } from '../styles';
+import { useStyles } from '../../styles';
 
 export const rootClassName = 'webchat-fluent';
 

package/src/components/theme/index.ts

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

package/src/icons/AddDocumentIcon.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
+import React, { memo } from 'react';
 
-export function AddDocumentIcon(props: Readonly<{ readonly className?: string }>) {
+function AddDocumentIcon(props: Readonly<{ readonly className?: string }>) {
   return (
     <svg
       aria-hidden="true"
@@ -17,3 +17,5 @@ export function AddDocumentIcon(props: Readonly<{ readonly className?: string }>
     </svg>
   );
 }
+
+export default memo(AddDocumentIcon);

package/src/icons/AttachmentIcon.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
+import React, { memo } from 'react';
 
-export function AttachmentIcon(props: Readonly<{ readonly className?: string }>) {
+function AttachmentIcon(props: Readonly<{ readonly className?: string }>) {
   return (
     <svg
       aria-hidden="true"
@@ -17,3 +17,5 @@ export function AttachmentIcon(props: Readonly<{ readonly className?: string }>)
     </svg>
   );
 }
+
+export default memo(AttachmentIcon);

package/src/icons/InfoSmallIcon.tsx

@@ -1,17 +1,21 @@
 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>
-));
+function InfoSmallIcon(props: Readonly<{ readonly className?: string }>) {
+  return (
+    <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>
+  );
+}
+
+export default memo(InfoSmallIcon);

package/src/icons/SendIcon.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
+import React, { memo } from 'react';
 
-export function SendIcon(props: Readonly<{ readonly className?: string }>) {
+function SendIcon(props: Readonly<{ readonly className?: string }>) {
   return (
     <svg
       aria-hidden="true"
@@ -17,3 +17,5 @@ export function SendIcon(props: Readonly<{ readonly className?: string }>) {
     </svg>
   );
 }
+
+export default memo(SendIcon);

package/src/icons/{TelephoneKeypad.tsx → TelephoneKeypadIcon.tsx}

@@ -1,6 +1,6 @@
-import React from 'react';
+import React, { memo } from 'react';
 
-export function TelephoneKeypadIcon(props: Readonly<{ readonly className?: string }>) {
+function TelephoneKeypadIcon(props: Readonly<{ readonly className?: string }>) {
   return (
     <svg
       aria-hidden="true"
@@ -17,3 +17,5 @@ export function TelephoneKeypadIcon(props: Readonly<{ readonly className?: strin
     </svg>
   );
 }
+
+export default memo(TelephoneKeypadIcon);

package/src/icons/index.ts

@@ -0,0 +1,5 @@
+export { default as AddDocumentIcon } from './AddDocumentIcon';
+export { default as AttachmentIcon } from './AttachmentIcon';
+export { default as InfoSmallIcon } from './InfoSmallIcon';
+export { default as SendIcon } from './SendIcon';
+export { default as TelephoneKeypadIcon } from './TelephoneKeypadIcon';

package/src/index.ts

@@ -1,13 +1,20 @@
 import { injectMetaTag } from 'inject-meta-tag';
 
 import FluentThemeProvider from './private/FluentThemeProvider';
-import testIds from './testIds';
 import { injectStyle } from './styles';
+import testIds from './testIds';
+
+const buildTool = process.env['build_tool'];
+const moduleFormat = process.env['module_format'];
+const version = process.env['npm_package_version'];
 
-declare const NPM_PACKAGE_VERSION: string;
+const buildInfo = { buildTool, moduleFormat, version };
 
-injectMetaTag('botframework-webchat-fluent-theme:version', NPM_PACKAGE_VERSION);
+injectMetaTag(
+  'botframework-webchat:fluent-theme',
+  `version=${process.env['npm_package_version']}; build-tool=${process.env['build_tool']}; module-format=${process.env['module_format']}`
+);
 
 injectStyle();
 
-export { FluentThemeProvider, testIds };
+export { FluentThemeProvider, buildInfo, testIds };