botframework-webchat-fluent-theme 4.17.0-main.20240501.533c151 → 4.17.0-main.20240502.a8ff179

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "botframework-webchat-fluent-theme",
-  "version": "4.17.0-main.20240501.533c151",
+  "version": "4.17.0-main.20240502.a8ff179",
   "description": "Fluent theme for Bot Framework Web Chat",
   "main": "./dist/botframework-webchat-fluent-theme.js",
   "types": "./dist/botframework-webchat-fluent-theme.d.ts",
@@ -69,9 +69,9 @@
     "typescript": "^5.3.2"
   },
   "dependencies": {
-    "botframework-webchat-api": "4.17.0-main.20240501.533c151",
-    "botframework-webchat-component": "4.17.0-main.20240501.533c151",
-    "botframework-webchat-core": "4.17.0-main.20240501.533c151",
+    "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}

@@ -2,11 +2,11 @@ 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,7 +15,7 @@ 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 {

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,6 +1,6 @@
 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';
 

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

@@ -5,12 +5,12 @@ import { useRefFrom } from 'use-ref-from';
 
 import Button from './Button';
 // import HorizontalDialPadController from './HorizontalDialPadController';
-import InfoSmallIcon from '../../../icons/InfoSmallIcon';
-import { useStyles } from '../../../styles';
 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';
 
 const { LocalizedString } = Components;
 

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/private/FluentThemeProvider.tsx

@@ -1,9 +1,9 @@
 import { Components } from 'botframework-webchat-component';
 import React, { memo, type ReactNode } from 'react';
 
-import { TelephoneKeypadProvider } from '../components/TelephoneKeypad';
-import WebChatTheme from '../components/Theme';
-import SendBox from '../components/SendBox';
+import { TelephoneKeypadProvider } from '../components/telephoneKeypad';
+import { WebChatTheme } from '../components/theme';
+import { SendBox } from '../components/sendBox';
 
 const { ThemeProvider } = Components;
 

package/src/styles/index.ts

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

package/src/types/index.ts

@@ -0,0 +1 @@
+export * from './PropsOf';

package/src/components/DropZone.tsx

@@ -1,3 +0,0 @@
-import DropZone from './dropZone/index';
-
-export default DropZone;

package/src/components/SendBox.tsx

@@ -1,3 +0,0 @@
-import SendBox from './sendbox/index';
-
-export default SendBox;

package/src/components/SuggestedActions.tsx

@@ -1,3 +0,0 @@
-import SuggestedActions from './suggestedActions/index';
-
-export default SuggestedActions;

package/src/components/TelephoneKeypad.tsx

@@ -1 +0,0 @@
-export * from './telephoneKeypad/index';

package/src/styles.ts

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